原型&原型链深度解读

[djlxiaoshi]

基本概念

首先我们看上面的示意图，我们可以看到每一个构造函数都会有一个prototype属性（js引擎自动帮我们加上的），这个属性会指向一个原型对象，这个构造函数通过new 会生成一个新的实例对象，这个实例拥有一个__prto__属性，而这个属性也会指向原型对象。

function A () {} // 构造函数
const a = new A(); // 实例

A.prototye === a.__proro__  // true

也就是说通常情况下（没有手动给A.prototye重新赋值）构造函数的prototype和实例的__proto__指向同一地址。而原型对象会有constructor属性指向这个构造函数。同样原型对象也是一个对象，这个对象也会有他的__proto__属性，这个属性又会指向另一个原型对象，这样一层层链接下去就构成了我们通常所说的原型链。

我们通常会通过instanceof这个操作符来判断某个对象是不是某个构造函数的实例（一般我们认为一个对象的__proto__属性和某个构造函数的prototype属性指向同一地址instanceof就会返回true），a instanceof A返回true，这样看来似乎并没与什么不妥，但是我们发现a isntanceof Object返回的也是true，a 是由Object构造函数的直接实例对象吗？a的__proto__和Object的prototype指向同一地址吗？显然不是，那为什么会返回true。其实instanceof表明的是在a这个对象的原型链上存在一个对象的__proto__属性和某个构造函数的prototype属性指向的是同一地址（翻译过来就是：a的整条[[prototype]]链中是否出现过Object.prototype）。a.__proto__.__proto__ === Object.prototype这里会返回true。其实要知道这样的关系，我们还可以使用isPrototypeOf
Object.prototype.isPrototypeOf(a)，当然也可以是b.isPrototypeOf(a)

在ES5中获取对象的原型链标准方法是Object.getPrototypeOf,非标准方式是a.__proto__(大多数现代浏览器都会支持)

但是如果这样我们就不能判断一个对象是不是某个构造函数的直接实例了，这时我们就可以使用constructor这个属性

a.constructor === A //true
a.constructor === Object // false

下面再来看看这张图

我们从左上角说起，f2和f1是Foo构造函数的两个实例，他们的__proto__属性指向Foo.prototype所指向的地址（换句话说在这里f2.__proto__和Foo.prototype同一个东西）。而Foo.prototype也是一个对象，也拥有__proto__属性，这个属性和Object.prototype指向同一个地址，而Object.prototype.__porto__指向null(也就是说并不是每个对象都有__proto__这个属性)因为这已经是原型链的顶端了。我们再看构造函数Foo其实也是一个对象（函数也是一个对象）它也拥有__proto__，它的__proto__属性指向Function.prototype所指向的地址（即Foo.__proto__ === Function.prototype）,这是因为函数对象都是有Function这个构造函数构造的。
而Function.prototype(或者Foo.__proto__.__proto__)指向Object.prototype。这里还有中间的Object这个特殊的构造函数，他是一个函数那么他拥有prototype属性，同时他又是一个函数对象，那么他就是由Function构造出来，所以Object.__proto__ === Function.prototype，Function构造函数䦹如此。解释起来有点麻烦，大家多看这个图就好。所以就会出现下面这些题目了

Function instanceof Object // true 
Object instanceof Function // true 
Function instanceof Function //true
Object instanceof Object // true
Number instanceof Number //false

上面说一个对象的__proto__属性指向对应构造函数的prototype属性所指向的地址，但是这里如果我们新建的对象是通过Object.create函数创建，那么新创建的这个对象的__proto__会指向crate的参数

const p = {name: 'djlxs'};
const o = Object(p);

即o.__proto__ === p

属性屏蔽

当我们读取某个对象的某个属性时，实际上是通过[[Get]]这个操作，在对象本身没有找到时，就会在其原型链上寻找直到找到或者返回undefined，当一个属性既出现在对象本身上，又出现在原型链上，那么就会优先返回对象本身相应的属性值，因此这里就发生了属性屏蔽

当我们向一个对象，添加某个属性时，如果这个属性存在于原型链上，且没有设置成只读，那么会在这个对象本身新建这个属性，从而屏蔽原型链上的相应属性，但是如果原型链上的这个属性设置成了只读，那么在严格模式下，会抛出相应错误，非严格模式下，则会忽略。如果在这种情况下，想要设置这个属性，那么我们就不能直接使用=这个赋值操作符，而是要使用Object.defineProperty()

在我们使用的要注意属性屏蔽，这里还有一种隐式的属性屏蔽尤其要注意

var anotherObject = {
	a: 2
}

var myObject = Object.create(anotherObject);

myObject++;

console.log(anotherObject)  // 2
console.log(myObject) // 3

因为这里myObject++相当于myObject = myObject + 1;

注 以上参考自 《你不知道的JavaScript上卷》（144-146）

最后（欢迎大家关注我）

DJL箫氏个人博客
博客GitHub地址
简书
掘金