深入理解原型链的本质
2016-06-29 15:55
671 查看
原型链是作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
实现原型链的代码如下:
实例以及构造函数和原型之间的关系如下如:
上面的代码中,没有使用Sub默认的原型,而是给它换了个新原型,就是Super的实例。新原型不仅具有作为一个Super的实例所拥有的全部属性和方法,而且其内部还有一个指针,指向了Super的原型。最终的结果就是:instance指向Sub的原型,Sub的原型又指向Super的原型。getSuperValue()方法仍然还在Super.prototype中,但property则位于Sub.prototype中。这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然Sub.prototype现在是Super的实例,那么property当然就位于该实例中。要注意instance.constructor现在指向的是Super,这是因为Sub.prototype中的constructor被重写了。
由于所有引用类型默认都继承了Object,因此如下图:
一句话:Sub继承了Super,Super继承了Object,调用instance.toString实际上调用的是保存在Object.prototype中的方法
实现原型链的代码如下:
function Super() { this.property = true; } Super.prototype.getSuperValue = function() { return this.property; }; function Sub() { this.subproperty = false; } //继承了Super Sub.prototype = new Super(); Sub.prototype.getSubValue = function() { return this.subproperty; }; var instance = new Sub(); alert(instance.getSuperValue()); //true
实例以及构造函数和原型之间的关系如下如:
上面的代码中,没有使用Sub默认的原型,而是给它换了个新原型,就是Super的实例。新原型不仅具有作为一个Super的实例所拥有的全部属性和方法,而且其内部还有一个指针,指向了Super的原型。最终的结果就是:instance指向Sub的原型,Sub的原型又指向Super的原型。getSuperValue()方法仍然还在Super.prototype中,但property则位于Sub.prototype中。这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然Sub.prototype现在是Super的实例,那么property当然就位于该实例中。要注意instance.constructor现在指向的是Super,这是因为Sub.prototype中的constructor被重写了。
由于所有引用类型默认都继承了Object,因此如下图:
一句话:Sub继承了Super,Super继承了Object,调用instance.toString实际上调用的是保存在Object.prototype中的方法
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享