如何避免网站模板侵权,策划书标准格式,网上创建公司流程,太仓网站建设JavaSript对象
简介
在 JavaScript 中#xff0c;对象是一组无序的相关属性和方法的集合#xff0c;所有的事物都是对象#xff0c;例如字符串、数值、数组、函数等。
在Javascript中, 几乎所有的事务都是对象, 对象也可以是一个变量,但是可以包括多个值, 它是以name:val…JavaSript对象
简介
在 JavaScript 中对象是一组无序的相关属性和方法的集合所有的事物都是对象例如字符串、数值、数组、函数等。
在Javascript中, 几乎所有的事务都是对象, 对象也可以是一个变量,但是可以包括多个值, 它是以name:value的形式存在的(可以说对象是变量的容器, 封装了属性和方法)
var car {name:value
}
// 这种形式和python的字典相像在javascript中的对象分为三种:
自定义对象内置对象(如date,math,array等等)浏览器对象(如Window对象Document对象History对象等)
创建对象的方法
一, 采用name:value形式创建
var star {name : xxxx,age : xx,sex : xx,fun : function(){alert(xxxx);}
};typeof this.star // object二, 利用new object创建对象
var star new Object();
star.name xxxx;
star.age xx;
star.sex xx;
star.fun function(){alert(xxxx);
}console.log(typeof star); // Object三, 利用构造函数创建对象
var star function(){this.name xxxx,this.age xx,this.sex x,this.fun function(){alert(xxxx);}
};var p new star();
console.log(typeof p);对象的相关方法
Object.getPrototypeOf()
Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。
var star function(){this.name xxxx,this.age xx,this.sex x,this.fun function(){alert(xxxx);}
};var p new star();
Object.getPrototypeOf(p) star.prototype //trueObject.setPrototypeOf()
Object.setPrototypeOf 静态方法可以将一个指定对象的原型即内部的 属性设置为另一个对象或者 null。
const obj {};
const parent { foo: bar };console.log(obj.foo);
// Expected output: undefinedObject.setPrototypeOf(obj, parent);console.log(obj.foo);
// Expected output: barObject.create()
Object.create 静态方法以一个现有对象作为原型创建一个新对象
const person {isHuman: false,printIntroduction: function() {console.log(My name is ${this.name}. Am I human? ${this.isHuman});}
};const me Object.create(person);me.name Matthew; // name is a property set on me, but not on person
me.isHuman true; // Inherited properties can be overwrittenme.printIntroduction();
// Expected output: My name is Matthew. Am I human? trueObject.prototype.isPrototypeOf()
实例对象的isPrototypeOf方法用来判断该对象是否为参数对象的原型。
var o1 {};
var o2 Object.create(o1);
var o3 Object.create(o2);// o2 -- o1
// 03 -- o2 -- o1
o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true
// o1和o2都是o3的原型Object.prototype.__proto__
function Circle() {}
const shape {};
const circle new Circle();// 设置该对象的原型
// 已弃用。这里只是举个例子请不要在生产环境中这样做。
shape.__proto__ circle;// 判断该对象的原型链引用是否属于 circle
console.log(shape.__proto__ circle); // true获取原型对象方法的比较
如前所述__proto__属性指向当前对象的原型对象即构造函数的prototype属性。
var obj new Object();obj.__proto__ Object.prototype
// true
obj.__proto__ obj.constructor.prototype
// true上面代码首先新建了一个对象obj它的__proto__属性指向构造函数Object或obj.constructor的prototype属性。
因此获取实例对象obj的原型对象有三种方法。
obj.__proto__obj.constructor.prototypeObject.getPrototypeOf(obj)
上面三种方法之中前两种都不是很可靠。__proto__属性只有浏览器才需要部署其他环境可以不部署。而obj.constructor.prototype在手动改变原型对象时可能会失效。
var P function () {};
var p new P();var C function () {};
C.prototype p;
var c new C();c.constructor.prototype p // false上面代码中构造函数C的原型对象被改成了p但是实例对象的c.constructor.prototype却没有指向p。所以在改变原型对象时一般要同时设置constructor属性。
C.prototype p;
C.prototype.constructor C;var c new C();
c.constructor.prototype p // true因此推荐使用第三种Object.getPrototypeOf方法获取原型对象。
Object.getOwnPropertyNames()
Object.getOwnPropertyNames 静态方法返回一个数组其包含给定对象中所有自有属性包括不可枚举属性但不包括使用 symbol 值作为名称的属性。
const object1 {a: 1,b: 2,c: 3
};console.log(Object.getOwnPropertyNames(object1));
// Expected output: Array [a, b, c]Object.prototype.hasOwnProperty()
hasOwnProperty 方法返回一个布尔值表示对象自有属性而不是继承来的属性中是否具有指定的属性。
const object1 {};
object1.property1 42;console.log(object1.hasOwnProperty(property1));
// Expected output: trueconsole.log(object1.hasOwnProperty(toString));
// Expected output: falseconsole.log(object1.hasOwnProperty(hasOwnProperty));
// Expected output: falsethis关键字
作用域
JavaScript的作用域分以下三种:
全局作用域脚本模式运行所有代码的默认作用域模块作用域模块模式中运行代码的作用域函数作用域由函数创建的作用域块级作用域用一对花括号一个代码块创建出来的作用域(用 let 或 const 声明的变量属于额外的作用域)
绑定this的方法
Function.prototype.call()
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
函数实例的call方法可以指定函数内部this的指向即函数执行时所在的作用域然后在所指定的作用域中调用该函数。
var obj {};var f function () {return this;
};f() window // true
f.call(obj) obj // true上面代码中全局环境运行函数f时this指向全局环境浏览器为window对象call方法可以改变this的指向指定this指向对象obj然后在对象obj的作用域中运行函数f。
call方法的参数应该是一个对象。如果参数为空、null和undefined则默认传入全局对象。
var n 123;
var obj { n: 456 };function a() {console.log(this.n);
}a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456上面代码中a函数中的this关键字如果指向全局对象返回结果为123。如果使用call方法将this关键字指向obj对象返回结果为456。可以看到如果call方法没有参数或者参数为null或undefined则等同于指向全局对象。
如果call方法的参数是一个原始值那么这个原始值会自动转成对应的包装对象然后传入call方法。
var f function () {return this;
};f.call(5)
// Number {[[PrimitiveValue]]: 5}上面代码中call的参数为5不是对象会被自动转成包装对象Number的实例绑定f内部的this。
call方法还可以接受多个参数。
func.call(thisValue, arg1, arg2, ...)call的第一个参数就是this所要指向的那个对象后面的参数则是函数调用时所需的参数。
function add(a, b) {return a b;
}add.call(this, 1, 2) // 3上面代码中call方法指定函数add内部的this绑定当前环境对象并且参数为1和2因此函数add运行后得到3。
call方法的一个应用是调用对象的原生方法。
var obj {};
obj.hasOwnProperty(toString) // false// 覆盖掉继承的 hasOwnProperty 方法
obj.hasOwnProperty function () {return true;
};
obj.hasOwnProperty(toString) // trueObject.prototype.hasOwnProperty.call(obj, toString) // false上面代码中hasOwnProperty是obj对象继承的方法如果这个方法一旦被覆盖就不会得到正确结果。call方法可以解决这个问题它将hasOwnProperty方法的原始定义放到obj对象上执行这样无论obj上有没有同名方法都不会影响结果。
Function.prototype.apply()
apply方法的作用与call方法类似也是改变this指向然后再调用该函数。唯一的区别就是它接收一个数组作为函数执行时的参数使用格式如下。
func.apply(thisValue, [arg1, arg2, ...])apply方法的第一个参数也是this所要指向的那个对象如果设为null或undefined则等同于指定全局对象。第二个参数则是一个数组该数组的所有成员依次作为参数传入原函数。原函数的参数在call方法中必须一个个添加但是在apply方法中必须以数组形式添加。
function f(x, y){console.log(x y);
}f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2上面代码中f函数本来接受两个参数使用apply方法以后就变成可以接受一个数组作为参数。
Function.prototype.bind()
bind()方法用于将函数体内的this绑定到某个对象然后返回一个新函数。
var d new Date();
d.getTime() // 1481869925657var print d.getTime;
print() // Uncaught TypeError: this is not a Date object.上面代码中我们将d.getTime()方法赋给变量print然后调用print()就报错了。这是因为getTime()方法内部的this绑定Date对象的实例赋给变量print以后内部的this已经不指向Date对象的实例了。
bind()方法可以解决这个问题。
var print d.getTime.bind(d);
print() // 1481869925657上面代码中bind()方法将getTime()方法内部的this绑定到d对象这时就可以安全地将这个方法赋值给其他变量了。
bind方法的参数就是所要绑定this的对象下面是一个更清晰的例子。
var counter {count: 0,inc: function () {this.count;}
};var func counter.inc.bind(counter);
func();
counter.count // 1上面代码中counter.inc()方法被赋值给变量func。这时必须用bind()方法将inc()内部的this绑定到counter否则就会出错。
this绑定到其他对象也是可以的。
var counter {count: 0,inc: function () {this.count;}
};var obj {count: 100
};
var func counter.inc.bind(obj);
func();
obj.count // 101上面代码中bind()方法将inc()方法内部的this绑定到obj对象。结果调用func函数以后递增的就是obj内部的count属性。
bind()还可以接受更多的参数将这些参数绑定原函数的参数。
var add function (x, y) {return x * this.m y * this.n;
}var obj {m: 2,n: 2
};var newAdd add.bind(obj, 5);
newAdd(5) // 20上面代码中bind()方法除了绑定this对象还将add()函数的第一个参数x绑定成5然后返回一个新函数newAdd()这个函数只要再接受一个参数y就能运行了。
如果bind()方法的第一个参数是null或undefined等于将this绑定到全局对象函数运行时this指向顶层对象浏览器为window。
function add(x, y) {return x y;
}var plus5 add.bind(null, 5);
plus5(10) // 15上面代码中函数add()内部并没有this使用bind()方法的主要目的是绑定参数x以后每次运行新函数plus5()就只需要提供另一个参数y就够了。而且因为add()内部没有this所以bind()的第一个参数是null不过这里如果是其他对象也没有影响。
