脚本宝典收集整理的这篇文章主要介绍了Javascript 五十问——实现的继承多种方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
谈到继承,或者更广义上的:一个对象可以使用另外一个对象的属性或方法。实现起来无外乎有两种方式:
apply or call 改变this的作用域
原型继承 改变__PRoto__指向,添加作用域链
而JavaScript所有的继承实现,都是围绕以上两点展开的。
1.原型链继承
2.构造函数继承
3.组合继承
4.ES6 extends 继承
原型链继承
function Father(){}
function Son(){}
Son.prototyPE = new Father()
缺点很明显:
子类构造函数不能传递参数
子类只是拷贝父类的引用,父类的引用类型的属性会被所有的子类共享
构造函数继承
function Father(){}
function Son(){
Father.apply(this, arguments)
}
解决了参数和引用共享问题,但是父类方法不能够共享。
组合继承
function Father(){}
function Son(){
Father.apply(this, arguments)
}
Son.prototype = new Father()
ES6继承
我们的主角,ES6 extends,就是对组合继承的改进。不同的是在子类中,子类作用域和父类作用域谁先谁后的问题。
在ES5中,首先声明子类的 作用域,然后在将子类的作用域指向父类
在ES6中,是首先将子类的作用域指向父类,然后在此基础上增强子类的作用域。这也是为什么在子类构造函数中一定要显示调用super()的原因。
参考babel转换后的代码:
VAR Son = function (_Father) {
_inherITs(Son, _Person);
function Son() {
_classCallCheck(this, Son);
//为了方便阅读,简略了代码
var _this = _possibleConstructorReturn(this,Father.call(this));
_this.gender = "male";
return _this;//返回的是 指向父类的作用域 _this
}
return Son;
}(Father);
关于更详细的ES6 Class的实现机制,可以参考我的另外一篇文章:聊一聊ES6 CLASS 实现原理<>
后记
第一次在sifou
上发布文章,添加了一个专题——Javascript五十问——里面会细致聊一些关于JavaScript原生和ES6的内容;算是我自己在开发过程中的一点积累;如果哪位发现错误,希望不吝赐教,共同进步!
参考文档
一篇文章理解JS继承 https://segmentfault.com/a/11...
Javascript 红宝书
阮一峰 ES6标准入门
以上是脚本宝典为你收集整理的Javascript 五十问——实现的继承多种方式全部内容,希望文章能够帮你解决Javascript 五十问——实现的继承多种方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。