原型&原型链深度解读

基本概念

首先咱们看上面的示意图，咱们能够看到每个构造函数都会有一个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地址

简书

掘金