深入研究原型

以下笔记参考自《你不知道的JavaScript上卷》

一.原型

1.[[Prototype]]是什么？

• 它是JavaScript的对象的一个特殊的内置属性，其实就是顺着原型链引用其他的对象。

2.Object.create()方法

①该方法会创建一个对象，并把这个对象(obj)的[[Prototype]]关联到指定对象(person)。

var person = {
    name: 'Gerg'
};
var obj = Object.create(person);
//__proto__只是[[Prototype]]内置属性的一种表现形式，但非标准形式
obj.__proto__ === person;
>>>true

obj.name;
>>>"Gerg"

Object.create().png

②现在obj对象的[[Prototype]]关联到了person。虽然obj.a并不存在，但是属性访问仍能成功地（在person中）找到了该属性值"Gerg"。

③如果person中也找不到name属性，并且[[Prototype]]不为空的话，就会继续查找下去。

④这个过程会持续找到匹配的属性名为止，或者查找完整条[[Prototype]]链。如果是后者，[[Get]]操作的返回值就是undefined。

⑤for...in遍历对象的原理与[[Prototype]]链相似，任何可以通过原型链访问到（并且是可枚举的，Enumerable: true;）的属性都会被枚举。使用in操作符检查属性是否在对象存在时，同样会查找对象的整条原型链（无论属性可枚举与否）。

var person = {
    name: 'Gerg'
};
var obj = Object.create(person);
Object.defineProperty(obj,'age',{
    configurable: true,
    enumerable: false,
    writable: true,
    value: 21
});
for(var v in obj){
    console.log('found: ' + v);
}
>>>found: name

'name' in obj;
>>>true

'age' in obj;
>>>true

3.属性设置

//准备
var person = {};
var obj = Object.create(person);
//完整解析以下过程：
obj.name = 'asan';

属性设置.png

①

var person = {};
var obj = Object.create(person);
obj.name = 'asan';
obj.name;
>>>"asan"

person.name;
>>>undefined

• 如果name属性不是直接存在于obj对象中，[[Prototype]]链就会向上遍历，类似[[Get]]操作。如果整条原型链都找不到name属性，name属性就会被直接添加到obj对象上。

②

var person = {
    name: 'Gerg'
};
var obj = Object.create(person);
obj.name;
>>>"Gerg"

obj.name = 'asan';
obj.name;
>>>"asan"

person.name;
>>>"Gerg"

• 如果obj对象中包含了名为name的普通数据访问属性（即通过原型链可访问到name属性），这条赋值语句只会修改已有的属性。

③

• 情况一：[[Prototype]]链上层存在名为name的普通数据访问属性，并且没有被标记为只读（也就是writable: true;），那么当在obj对象上添加一个名为name的新属性，会屏蔽掉原来[[Prototype]]上的同名属性。

var person = {
    
};
var obj = Object.create(person);
var higherObj = Object.create(obj);
Object.defineProperty(higherObj,'name',{
    writable: true,
    value: 'pangzi'
});
obj.name = 'asan';
obj.name;
>>>"asan"

• 情况二：如果[[Prototype]]链上层存在name属性，但是它被标记为只读（writable: false;），那么无法修改已有属性，或者说无法在obj对象上创建屏蔽属性。在严格模式下，代码会出错。否则，这条赋值语句会被忽略。

var person = {
    
};
var obj = Object.create(person);
Object.defineProperty(obj,'name',{
    writable: false,
    value: 'Gerg'
});
obj.name = 'asan';
obj.name;
>>>"Gerg"

• 情况三：如果在[[Prototype]]链上层存在name属性，并且它是一个setter，那么就一定会调用这个setter。name属性不会被添加到（或者屏蔽）obj对象，也不会重新定义name这个setter。

④

• 如果属性名name既出现在obj对象中，也出现在obj的[[Prototype]]链上层，那么又会发生屏蔽（obj对象中的name属性屏蔽了higherObj对象中的同名属性），因为obj.name总是选择原型链中最底层的name属性。

var person = {
    name: 'Gerg'
};
var obj = Object.create(person);
obj.name = 'qin';
var higherObj = Object.create(obj);
higherObj.name = 'pangzi';
obj.name = 'asan';
obj.name;
>>>"asan"

4.隐式屏蔽

var person = {
    name: 'Gerg'    
};
var obj = Object.create(person);
person.name;
>>>"Gerg"

obj.name;
>>>"Gerg"

person.hasOwnProperty('name');
>>>true

obj.hasOwnProperty('name');
>>>false

obj.name = 'asan';
obj.name;
>>>"asan"

person.name;
>>>"Gerg"

obj.hasOwnProperty('name');
>>>true

obj.name = 'asan';首选会通过[[Prototype]]查找属性name（在person对象中找到同名属性），用属性值'asan'将原来的'Gerg'覆盖掉，接着用[[Put]]将'asan'赋值给obj中新创建的屏蔽属性name。

5."类"

①继承意味着复制操作，JavaScript（默认）并不会复制对象属性。相反，JavaScript会在两个对象之间创建一个关联，这样以来，一个对象就可以通过委托访问另一个对象的属性和函数。

②委托这个术语更为精确地描述 JavaScript中对象的关联机制。

③new会劫持所有普通函数并用构造对象的形式来调用它。

④

function nothingSpecial(){
    
}
var obj = new nothingSpecial();
obj;
>>>nothingSpecial {}

• nothingSpecial只是个普通的函数，当它被new操作符调用时，它就会构造一个函数并赋值给obj。

⑤JavaScript中的构造函数：带new操作符的函数调用。

⑥

function Foo(name){
    this.fooName = name;
}
Foo.prototype.myName = function(){
    return this.fooName;
};
var a = new Foo('a');
var b = new Foo('b');
a.myName();
>>>"a"

b.myName();
>>>"b"

a.__proto__ === Foo.prototype;
>>>true

Done.png

6.回顾"构造函数"

①一个普遍而又感觉理所应当的错觉：a.constructor === Foo;意味着对象a确实有个constructor属性指向Foo。

②其实这只不过是一种虚假的安全感而已。何以证明？

function Foo(){};
Foo.prototype = {};
var a = new Foo();
a.constructor === Foo;
>>>false

③那么真相到底是怎么样的呢？

• Foo.prototype中的constructor属性只是Foo函数在声明时的默认属性。如果在声明之后，你创建了一个新对象并替换了函数默认的prototype对象引用，那么新对象就不会自动获得constructor属性。

④所以a.constructor === Foo;整个过程应该是这样的：

a.__proto__ === Foo.prototype;//true
Foo.prototype.constructor === Foo;//true

⑤More：

function Foo(){};
Foo.prototype = {};
var a = new Foo();
a.constructor === Foo;
>>>false

a.constructor === Object;
>>>true

• 这是为啥？

对象a中并没有constructor属性，所以它会委托[[Prototype]]链上的Foo.prototype对象。但是这个对象中也没有constructor属性（不过，默认的Foo.prototype对象中有个属性！），所以它会继续向上委托，这次会委托给委托链顶端的Object.prototype。这个对象由constructor属性，所以指向内置的Object函数。

⑥修改上图的错误

修改版.png

⑦如果你闲的慌，当然可以人工为Foo.prototype添加一个constructor属性。

function Foo(){};
Foo.prototype = {};
var a = new Foo();
Object.defineProperty(Foo.prototype,'constructor',{
    configurable: true,
    //注意constructor属性在默认情况下是不可枚举的
    enumerable: false,
    writable: true,
    value: Foo
});
a.constructor === Foo;
>>>true

7.（原型）继承

①两种把Bar.prototype关联到Foo.prototype的方法：

//ES6之前需要抛弃默认的Bar.prototype
Bar.prototype = Object.create(Foo.prototype);

//ES6开始可以直接修改现有的Bar.prototype
Object.setPrototypeOf(Bar.prototype,Foo.prototype);