ES6专题 class类继承super详解

super作为对象在普通方法中指向父类的原型对象

class A{
    // 属性应该怎么写???
    //#pA私有属性,static pA静态属性  
    pA = 123 //实例属性
    p(){
        return 3
    }
}
//A.prototype.pA = 123

class B extends A{
    constructor(){
        super()
        console.log(super.p()) // 3
        console.log(super.pA)//undefined  pA必须在原型对象上
    }
}
let b = new B()

调用super后内部的this指向子类的实例

class A{
    constructor(){
        this.x = 1
    }
    print(){
        console.log(this.x);
    }
}

class B extends A{
    constructor(){
        super()
        this.x = 2
    }
    fn(){
        super.print()
        // 相当于 es5里面的super.print.call(this)
    }
}
let b = new B()
b.fn()

通过super对属性赋值 这时的super相当于this


```javascript
 class A{
        constructor(){
            this.x = 1
        }
    }
    // A.prototype.x = 3

    class B extends A{
        constructor(){
            super()
            this.x = 2
            super.x = 3 // this.x = 3
            console.log(super.x); // undefined
            console.log(this.x); // 3
            
        }
    }
    let b = new B()

super作为对象在静态方法中,指向父类而不是原型对象

 class Parent{
        static myMethod(msg){
            console.log(`static-${msg}`);
            
        }
        myMethod(msg){
            console.log(`普通-${msg}`);
        }
            
    }

    class Child extends Parent{
        static myMethod(msg){
            super.myMethod(msg)
        }
        myMethod(msg){
            super.myMethod(msg)
        }
    }

    Child.myMethod(1)
    let child = new Child()
    child.myMethod(2)

子类的静态方法中通过super调用父类的方法时 ,方法内部的this指向当前的子类 而不是子类的实例

 class A{
        constructor(){
            this.x = 1
        }
        static print(){
            console.log(this.x);
        }
    }

    class B extends A{
        constructor(){
            super()
            this.x = 2
        }
        static fn(){
            super.print()
        }
    }
    B.fn()
    B.x = 3
原创文章 207 获赞 173 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_41181778/article/details/104830596