龙空技术网

Javascript继承之道

前端刘小灰 990

前言:

现在看官们对“js继承核心”大体比较关切,朋友们都需要了解一些“js继承核心”的相关资讯。那么小编也在网上汇集了一些对于“js继承核心””的相关资讯,希望大家能喜欢,大家快快来了解一下吧!

原型赋值方式

上代码

这种方法是直接new 了一个父类的实例,然后赋给子类的原型。这样也就相当于直接将父类原型中的方法属性以及挂在this上的各种方法属性全赋给了子类的原型,简单粗暴!

因为简单粗暴,所以弊端很多

1, new实例的时候不能给父类传参数

如上个例子所示,Sun 函数里面什么都没有,我们new的时候还怎么传参数,即使Sun函数体里面有值,他也不能和Per函数建立联系

2,自己的prototype被占用

为了继承父类的实例直接赋值给了Sun.prototype,那Sun还怎么用自己的prototype

调用构造函数方式

上代码

在子类的在构造函数里用子类实例的this去调用父类的构造函数(改变this指向),从而达到继承父类属性的效果

但是这种方法却不能继承父类的prototype,所有sun调用不到sayName方法

组合继承

上面两种方法各有缺点,那能不能互补一下呢?

上代码:

看似很完美,父类的属性和方法都可以访问到,还可以给父类传递参数

but 我们再看


这是什么情况? name及出现了sun里面也出现了sun的__proto__里面。

看来组合方式继承把两个方式都有的也叠加了一切,实在是太不优雅

寄生组合继承

这是目前es5中主流的继承方式

上代码:

这里用到了Object.creat(obj)方法,该方法会对传入的obj对象进行浅拷贝。和上面组合继承的主要区别就是:将父类的原型复制给了子类原型。这种做法很清晰

但是也有一点小小弊端就是Per和Sun的constructor都指向了Pre,大部分情况下使用这种继承方式没问题,但是如果要使用constructor的话, 我们要加上这样一句话

Sun.prototype.constructor = Sun

可以说,ES6之前实现继承确实不是一件容易的事,特别和强类型语言对比来说,Javascript实现继承只能用'另类'来说

但是现在,我们可以说Javascript站起啦!

ES6实现继承

上代码:


只能用两个字来形容 优雅

但是为什么Vue源码中用构造函数而不用class呢?

欢迎留言谈论...

标签: #js继承核心