以下笔记参考自《你不知道的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);
网友评论