一、[[Prototype]]
js中的对象有一个特殊的[[Prototype]]内置属性,即对于其他对象的引用。几乎所有的对象在创建时[[Prototype]]属性都会被赋予一个非空值。对象的[[Prototype]]链接可以为空,但很少见。
var myObject = {
a:2
};
myObject.a; // 2
当你试图引用对象的属性时会触发[[Get]]操作,如myObject.a。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,若有就使用。
如果a不在myObject中,就需要使用对象的[[Prototype]]链了。
对于默认的[[Get]]操作来说,如果无法在对象本身找到需要的属性,就会继续访问[[Prototype]]链:
var anotherObject = {
a:2
};
// 创建一个关联到anotherObject的对象
var myObject = Object.create(anotherObject);
myObject.a; // 2
myObject对象的[[Prototype]]关联到了anotherObject。myObject.a并不存在,但属性能在anotherObject中找到2。
如果anotherObject也找不到a并且[[Prototype]]不为空,则继续查找下去。
这个过程会持续到找到匹配的属性名或查找完整条[[Prototype]]链。若是后者[[Get]]操作返回undefined。
使用for..in遍历对象时原理和查找[[Prototype]]链类似,任何可以通过原型链访问到的属性都会被枚举。使用in操作符来检查属性在对象中是否存在,同样会查找对象的整条原型链(无论对象是否可枚举):
var anotherObject = {
a:2
};
// 创建一个关联到anotherObject的对象
var myObject = Object.create(anotherObject);
for (var k in myObject) {
console.log("found: " + k);
}
// found: a
("a" in myObject); // true
1、Object.prototype
所有普通的[[Prototype]]链最终对吼指向内置的Object.prototype。由于所有“普通”(内置)对象都“源于”Object.prototype,所以它包含了js中许多通用功能
2、属性设置和屏蔽
myObject.foo = "far";
如果myObject对象包含名为foo的普通数据访问属性,这条赋值语句只会修改已有的属性值。
如果foo不是直接存在于myObject中[[Prototype]]链就会被遍历,类似[[Get]]操作。如果原型链上找不到foo,foo就会被直接添加到myObject上。
如果foo存在于原型链上层,赋值语句myObject.foo = "bar"的行为就会有些不同。
如果属性名foo既出现在myObject的[[Prototype]]链上层,则会发横屏蔽。myObject中包含的foo属性会屏蔽原型链上层的所有foo属性,因为myObject.foo总是会选择原型链中最底层的foo属性。
下面直接分析如果foo不直接存在于myObject中而是存在于原型链上层时myObject.foo = "bar"会出现的三种情况。
1、如果在[[Prototype]]链上层存在名为foo的普通数据访问属性并且没有被标记为只读(writable:false)则直接在myObject中添加一个名为foo的属性,它是屏蔽属性。
2、如果在[[Prototype]]链上层存在foo,但被标记为只读(writable:false),则无法需改已有属性或在myObject上创建屏蔽属性。如果在严格模式下,代码则会跑出一个错误。否则,这条赋值语句会被忽略。总之,不会发生屏蔽。
3、如果在[[Prototype]]链上层存在foo并且它是一个setter,则会调用这个setter。foo不会被添加到或屏蔽于myObject,也不会重新定义foo这个setter。
如果希望在第二种第三种情况下也屏蔽foo,就不能用=操作符来赋值,而使用Object.defineProperty(..)来向myObject添加foo。
通常应当尽量避免使用屏蔽
有些情况下会隐式产生屏蔽:
var anotherObject = {
a:2
};
var myObject = Object.create(anotherObject);
anotherObject.a; // 2
myObject.a; // 2
anotherObject.hasOwnProperty("a"); // true
myObject.a++; // 隐式屏蔽
anotherObject.a; // 2
myObject.a; // 3
myObject.hasOwnProperty("a"); // true
++操作首先会通过[[Prototype]]查找属性a并从anotherObject.a获取当前属性值2,然后给这个值加1,接着用[[Put]]将值3赋给myObject中新建的屏蔽属性a
二、“类”
1、“类”函数
所有的函数默认都会拥有一个名为prototype的共有并且不可枚举的属性,他会指向另一个对象:
function Foo() {
// ...
}
Foo.prototype; // {}
这个对象通常被称为Foo的原型。这个对象是在调用new Foo()时创建的,最后会被关联到“Foo.prototype”对象上
function Foo() {
// ...
}
var a = new Foo();
Object.getPrototypeOf(a) === Foo.prototype; // true
调用new Foo()时会创建a,其中一步就是将a内部的[[Prototype]]链接到Foo.prototype所指向的对象。
2、“构造函数”
function Foo() {
// ...
}
// constructor公有不可枚举的属性
Foo.prototype.constructor === Foo; // true
var a = new Foo();
a.constructor === Foo; // true
a本身没有constructor属性,虽然a.constructor确实指向Foo函数,但是这个属性并不是表示a由Foo“构造”
实际上.constructor引用同样被委托给了Foo.prototype,而Foo.prototype.constructor默认指向Foo。
a.constructor只是通过默认的[[Prototype]]委托指向Foo,这和“构造”毫无关系。
function Foo() { /* .. */ }
Foo.prototype = { /* .. */ }; //创建一个新原型对象
var a1 = new Foo();
a1.constructor === Foo; // false
a1.constructor === Object; // true
a1并没有.constructor属性,所以它会委托[[Prototype]]链上的Foo.prototype。但这个对象也没有.constructor属性(不过默认的Foo.prototype对象有这个属性),所以它会继续委托,这次会委托给委托链顶端的Object.prototype。这个对象有.constructor属性,指向内置的Object(..)函数
当然你可以给Foo.prototype添加一个.constructor属性,不过需要手动添加一个符合正常行为不可枚举的属性。
function Foo() { /* .. */ }
Foo.prototype = { /* .. */ }; //创建一个新原型对象
// 需要在Foo.prototype上“修复”丢失的.constructor属性
// 新对象属性起到Foo.prototype的作用
// 关于defineProperty(..)
Object.defineProperty( Foo.prototype, "constructor", {
enumerable: false,
writable: true,
configurable: true,
value: Foo // 让.constructor指向Foo
})
.constructor并不表示被构造,也不是一个不可变属性。他是不可枚举的,但值是可写的
1)构造函数还是调用
function NothingSpecial() {
console.log("Don't mind me!");
}
var a = new NothingSpecial();
// Don't mind me!
a; // {}
NothingSpecial只是一个普通的函数,但使用new调用时,就会构造一个对象并赋值给a。这个调用时一个构造函数调用,但NothingSpecial本身不是构造函数
函数不是构造函数,当且仅当使用new时,函数调用会变成“构造函数调用”
3、技术
function Foo(name) {
this.name = name;
}
Foo.prototype.myName = function() {
return this.name;
}
var a = new Foo("a");
var b = new Foo("b");
a.myName(); // "a"
b.myName(); // "b"
这段diamante展示了另外两种“面向类”的技巧:
1、this.name = name给每个对象,即a,b都添加了.name属性
2、Foo.prototype.myName = ...会给Foo.prototype对象添加一个属性(函数)
在创建过程中,a、b的内部[[Prototype]]都会关联到Foo.prototype上。当a、b中无法找到myName时,它会通过委托在Foo.prototype上找到
三、(原型)继承
function Foo(name) {
this.name = name;
}
Foo.prototype.myName = function() {
return this.name;
}
function Bar(name, label) {
Foo.call(this, name);
}
// 创建一个新的Bar.prototype对象并关联到Foo.prototype
Bar.prototype = Object.create(Foo.prototype); // 核心部分
// 注意现在没有Bar.prototype.constructor了
// 若你需要则手动修复
Bar.prototype.myLabel = function() {
return this.label;
}
var a = new Bar("a", "obj a");
a.myName(); // "a"
a.myLabel(); // 'obj a'
创建一个新对象并把它关联到我们希望的对象上有两种常见的做法:
// 和你想要的机制不一样
Bar.prototype = Foo.prototype;
此代码让Bar.prototype直接引用Foo.prototype对象。因此当你执行类型Bar.prototype.myLabel = ... 的赋值语句时会修改Foo.prototype对象本身
// 基本上满足你的需求,但可能会产生一些副作用
Bar.prototype = new Foo();
此语句会创建一个关联到Bar.prototype的新对象。但使用了Foo(..)的构造函数调用。如果函数Foo有一些副作用(如:写日志、修改转态等)就会影响到Bar()的“后代”,后果不堪设想
要创建一个合适的关联对象,最好使用Object.create(..)而不是具有徐作用的Foo(..)。但这需要创建一个新对象然后把旧对象抛弃掉,不能直接修改已有的默认对象。
// ES6之前需要抛弃默认的Bar.prototype
Bar.prototype = Object.create(Foo.prototype);
// ES6可以直接修改现有的Bar.prototype
Object.setPrototypeOf(Bar.prototype, Foo.prototype);
检查“类”关系
内省(反射):检查一个实例的继承祖先(js的委托关联)
function Foo() {
// ...
}
Foo.prototype.blah = ...;
var a = new Foo();
如何通过内省找出a的“祖先”(委托关联)
1)a instanceof Foo; 在a的整条[[Prototype]]链中是否有指向Foo.prototype的对象
缺点:只能处理对象(a)和函数(带.prototype引用的Foo)之间的关系
如果使用内置的.bind(..)函数来生成一个硬绑定函数的话,该函数没有.prototype属性。在这样的函数上使用instanceof的话目标函数的.prototype会代替硬绑定函数的.prototype。
function isRelated(o1, o2) {
function F() {}
F.prototype = o2;
return o1 instanceof F;
}
var a = {};
var b = Object.create(a);
isRelated(b, a); // true
2)判断[[Prototype]]反射的方法
Foo.prototype.isPrototypeOf(a); // true
在a的整条[[Prototype]]链,中是否出现过Foo.prototype
此方法不需要间接引用函数(Foo),它的.prototype属性会被自动访问
// 非常简单:b是否出现在c的[[Prototype]]链中
b.isPrototypeOf(c);
这个方法并不需要使用函数(“类”),它直接使用b和c之间的对象引用来判断他们的关系。换而言之,语言内置的isPrototypeOf(..)函数就是我们的isRelatedTo(..)函数
我们也可以直接获取一个对象[[Prototype]]链,在ES5中标准方法:
Object.getPrototypeOf(a);
Object.getPrototypeOf(a) === Foo.prototype; // true
a.__proto__ === Foo.prototype; // true 大多数浏览器也支持这种方法
.__proto__存在于内置的Object.prototype中(不可枚举)
Object.defineProperty(Object.prototype, "__proto__", {
get: function() {
return Object.getPrototypeOf(this);
},
set: function(o) {
Object.setPrototypeOf(this, o);
return 0;
}
})
因此,访问(获取值)a.__proto__时,实际上是调用了a.proto()(调用getter函数)。虽然getter函数存在于Object.prototype对象中,但它的this指向对象a,所以Object.getPrototypeOf(a)结果相同。
.__proto__是可设置属性,但通常来说不需要修改已有对象的[[Prototype]],。
在特殊情况下需要设置函数默认.prototype对象的[[Prototype]],让它引用其他对象(除了Object.prototype)这样可避免使用全新对象替换默认对象。此外最好把[[Prototype]]对象关联看做是只读特性,从而增加代码可读性
四、对象关联
1、创建关联
var foo = {
something:function() {
console.log("Tell me sometihng good ...");
}
};
var bar = Object.create(foo);
bar.something(); // Tell me sometihng good ...
Object.create(..)会创建一个新对象(bar)并把它关联到我们指定的对象(foo),这样可以避免不必要的麻烦。
Object.create(..)的polyfill代码
Object.create(..)是在ES5中新增的函数,所以在ES5之前的环境中要支持这个功能的话就需要使用一段简单的polyfill代码。
if (!Object.create) {
Object.create = function(o) {
function F(){}
F.prototype = o;
return new F();
}
}
这段polyfill代码使用了一个一次性函数F,我们通过改写它的.prototype属性使其指向想要关联的对象,然后再使用new F()来构造一个新对象进行关联。