有没有办法用JavaScript访问子类中的超类变量?

时间:2019-03-05 01:48:20

标签: javascript ecmascript-6 ecmascript-5

当我遇到访问子类中超类方法的一些示例示例时,我正在学习JavaScript oop,这可以通过super关键字实现 但是当我尝试访问或返回超类的变量时,它会返回未定义或我尝试以各种方式获取变量的子类变量

我也去过this堆栈溢出帖子。

class dad {
    constructor(name) {
        this.name = name;
    }
    printname() {
        console.log(this.name);
        var a = 2;
        return a;
    }
    sendVal() {
        console.log(this.name);
        var a = 2;
        return this.name;
    }
}

class son extends dad {
    constructor(name) {
        super(name);
    }
    printname() {
        console.log(super.printname());

    }
    printvariable() {
        console.log(super.name);

    }
    getvalue() {
        console.log(super.sendVal())
    }
}

var o1 = new dad('jackson');
var o2 = new son('jack')

o1.printname()
o2.printname()
o2.printvariable()
o2.getvalue()
  

1 个答案:

答案 0 :(得分:2)

使用super.fieldName访问父类的字段时,实际上是在父类的prototype上查询字段名称。

因此,您可能会相信从super(name);构造函数调用Son会在父类的原型中设置name,但不是,所以,实际上设置了name类所继承的Son属性{strong> ,您可以使用this.name来访问它。

因此,我修改了示例代码,并演示了如何通过调用super.fieldName来实际获取值。在示例中,我在age类的原型中添加了一个属性Dad并将其值设置为50,现在在Sonprintvariable()中将正确通过引用super.age类的原型来调用Dad

在JavaScript中的所有类实际上都是语法糖之后,如果使用babel将其转换为ES2015,您实际上可以看到它的作用。

class Dad {
    constructor(name) {
        this.name = name;
        Dad.prototype.age = 50; //adding property to prototype
    }
    printname() {
        console.log(this.name);
        var a = 2;
        return a;
    }
    sendVal() {
        console.log(this.name);
        var a = 2;
        return this.name;
    }
}

class Son extends Dad {
    constructor(name) {
        super(name);
    }
    printname() {
        console.log(super.printname());

    }
    printvariable() {
        console.log(`super.name will be undefined, as not present in prototype of the Dad class: ${super.name}`);
        console.log(`super.age will have a value of 50, present in the prototype of the Dad class: ${super.age}`);
        console.log(`this.name will be jack, as it is set from the constructor of the Son class: ${this.name}`);

    }
    getvalue() {
        console.log(super.sendVal());
    }
}

var o1 = new Dad('jackson');
var o2 = new Son('jack')

o1.printname();
o2.printname();
o2.printvariable();
o2.getvalue();