ES6构造函数的继承

379 阅读2分钟

旧方式继承

在es6之前,我们通常用在子构造函数中使用call方法,实现父构造函数的继承

//父构造函数
function Father(value){
	this.value=value
    this.name='qiuyanxi'
}
//子构造函数
function Son(value){
	Father.call(this,value)
}
let obj2=new Son(0)
obj2.value // 0
obj2.name // qiuyanxi

上面代码中,在子构造函数中调用父构造函数,并使用call函数传入this,这样子构造函数就会继承父构造函数的方法。

但是这样的话子构造函数无法获取到父构造函数原型中的方法,那么我们继续可以采取两种方式来继承父构造函数的原型方法

Son.prototype = Father.prototype

这种方式直接把父构造函数的原型传给子构造函数,但是这种方式有个缺点,那就是当我修改了Son的原型时,也会修改父构造函数的原型,因为这种方式是把原型地址赋值给了Son

Son.prototype=Object.create(Father.prototype)
Son.prototype.constructor = Son

采取Object.create就相当于覆盖了原来Son.prototype的值,并让Son.prototype.__proto__指向父构造函数的原型,由于覆盖原因,为了避免突发的情况发生所以要让Son.prototype.constructor指回Son构造函数

基于es6的class继承

es6给我们带来了新语法来继承父构造函数,来看一个例子

class Father{
	constructor(value){
    	this.value=value
        this.name="qiuyanxi"
    }
    say(){
    console.log(123)}
}

上面的代码类似于传统的java、python等传统后端语言的写法,让新手更加容易学习,并且say方法直接用于prototype,新手可以不用再关心要专门写prototype了,但是是这个语法依然是原型模型的语法糖,很难细节的了解到JS原来的原型设计模式。

使用class来继承父构造函数非常方法,使用extends关键字即可

class Father{
	constructor(value){
    	this.value=value
        this.name="qiuyanxi"
    }
    say(){
    console.log(123)}
}

class Son extends Father{ //使用extends关键字来继承
	constructor(value,age){
    	super(value) //这里要使用super方法来继承父构造函数的属性
        this.age=age
    }
    say(){
    super.say()}//这里同样要使用super方式来继承父构造函数的属性
}

不过这种方式还产生了新的知识,那就是让Son.__proto__ === Father

总的来说,ES6的演化给我们产生不少语法糖,让我们无需过多关注JS的设计,不过个人依然认为不管语法怎样变化,JS原型链的设计模式是不变的,这对于学习这门语言非常有好处

参考网站

wangdoc.com/javascript/…

www.liaoxuefeng.com/wiki/102291…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…