美文网首页
骚操作带你了解 js es5里的继承、原型链

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

作者: 辉_1592 | 来源:发表于2020-05-07 20:16 被阅读0次

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

假设,有一个对象 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;

相关文章

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

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

  • 浅谈JavaScript原型、原型链的概念与继承的实现原理

    关于js对象的继承,es5和es6提供了两种不同的继承机制。es5通过修改原型链的方式实现继承,由此可见继承与原型...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • js实现继承的几种方式

    如何实现继承? js中实现继承的方式主要是通过原型链完成的。了解原型链的相关信息可以点这里 javascript中...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • Javascript 面向对象(ES5继承)

    ES5继承 在ES5中继承是通过原型链来继承的。 我们都知道每个构造函数都有有一个原型对象,原型对象都包含一个指向...

  • 继承

    原型链继承 许多OO语言都支持两种继承方式接口继承和实现继承,ES5只有实现继承,且主要依靠原型链继承。 那我们先...

  • JS中的继承(ES5)

    前言 ES6之前,没有严格意义上的class继承, 其实JS(ES5)主要是依靠原型链来实现继承的。 既然要实现继...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

网友评论

      本文标题:骚操作带你了解 js es5里的继承、原型链

      本文链接:https://www.haomeiwen.com/subject/jmwtghtx.html