骚操作带你了解 js es5里的继承、原型链

2020-05-07  本文已影响0人  辉_1592

话不多说我们先来看一个对象:由函数生成实例,实例指向的原型对象
首先要搞懂一个属性
温馨提示:以下为伪代码,实际情况会复杂很多

假设,有一个对象 var f1 = function () {}
然后,又有一个对象 var p1 = { constructor: f1, name: 'pengyuyan' }
此时,这个对象 p1 我们假设他就是一个原型对象,因为他有 constructor 属性,这个属性是用来指定构造函数的。
然后,还有一个对象 var o1 = { test: '123' }
最后,我们进行一个骚操作,我们来强行将 o1 的原型对象改变一下
o1.__proto__ = p1
进行了这个操作之后,就可以理想的认为,以上操作等价于 o1 = new f1();
现在, o1 的原型对象里的构造函数 constructor 就是 f1 ,并且 o1 从他的原型对象里得到了 name 属性,即 o1.name = 'pengyuyan'

朋友们,看到这里你是不是有点感觉了,o1 的原型对象 o1.__proto__p1p1.constructorf1,可以认为 o1 就是 f1生成的,同时 o1 获得了 p1里的属性, 这就是最简单的继承属性。
而又因为原型对象 p1 也是一个对象,他有自己的 __proto__ ,所以 p1 也会有从他的原型对象里继承过来的属性,继续往上找原型对象直到 constuctor 指向了 Object,就停止查找,这就是原型链。

因此,实际情况应该是如下:

运行了 var o1 = new f1();
o1.__proto__ === f1.prototype; // 都是指向了原型对象 { constructor: xxx, __proto__: ooo}
再往上一层就是 o1.__proto__.__proto__ === f1.prototype.__proto__;
f1.prototype.__proto__ === Object.prototype;
原型链的查找就走完了

判断是否实例关系可以用
o1 instanceof f1 === true;
f1 instanceof Object === true;

上一篇 下一篇

猜你喜欢

热点阅读