美文网首页
JS的继承(原型继承与Class继承)

JS的继承(原型继承与Class继承)

作者: Sharp丶TJ | 来源:发表于2021-12-16 00:02 被阅读0次

    一、原型继承

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

    上面代码中,在子构造函数中调用父构造函数,并使用 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 构造函数

    二、Class继承

    Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多.

    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方式来继承父构造函数的属性
    }
    

    super关键字: 他表示父类的构造函数,用来新建父类的this对象;

    子类必须在constructor方法中调用super方法,否则新建实例时会报错,这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工,如果不调用super方法,子类就得不到this对象;

    相关文章

      网友评论

          本文标题:JS的继承(原型继承与Class继承)

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