代码之家 › 专栏 › 技术社区 › Elias Zamaria

访问超类上的类字段

babeljs ecmascript-6 javascript

Elias Zamaria · 技术社区 · 8 年前

class Animal {
    doSomething = () => {
        return 'Hi.';
    };
}

class Dog extends Animal {
    doSomething = () => {
        return super.doSomething() + ' Woof!';
    };
}

console.log(new Dog().doSomething());

注意:尝试运行上面的代码片段可能不起作用,因为我不知道如何使用Babal设置。

不管怎样,当我使用Babel编译它并在Node中运行它时,我得到以下错误:

/Users/elias/src/classFieldTest/build/classFieldTest.js:15
            return super.doSomething() + ' Woof!';
                         ^

TypeError: (intermediate value).doSomething is not a function
    at Dog.doSomething (/Users/elias/src/classFieldTest/build/classFieldTest.js:15:26)
    at Object.<anonymous> (/Users/elias/src/classFieldTest/build/classFieldTest.js:21:23)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

我正在使用Babel6.26.0和 stage-2

为什么会这样?我猜是的 super 不能用于访问类字段,但我该怎么办?如果我改变主意 doSomething Animal 传统的方法( doSomething() { return 'Hi.'; } ),这是可行的,但我宁愿避免传统的方法,用它们重新定义的方式 this

有没有办法访问超类的类字段?

1 回复 | 直到 5 年前

Bergi 8 年前

为什么会这样?我猜super不能用来访问类字段

对。类字段是实例属性,但是 super 尝试访问超类的原型对象的属性。你的 Animal doSomething 方法-相反,每个 动物 对象具有包含绑定函数的属性。

但我该怎么办呢?如果我把它改成一个传统的方法,它是有效的

是的,你应该这样做。这是怎样的方法和方法工作。

避免使用箭头函数 when you don't need them ,尤其是 when they don't work . 还可以看看 Arrow Functions in Class Properties Might Not Be As Great As We Think .

是-它是一个实例属性,您可以在重写它之前在构造函数中访问它:

class Animal {
    constructor() {
        this.doSomething = () => {
             return 'Hi.';
        };
    }
}

class Dog extends Animal {
    constructor() {
        super();
        const superDoSomething = this.doSomething;
        this.doSomething = () => {
            return superDoSomething() + ' Woof!';
        };
    }
}

或者,对于类字段建议和无显式构造函数:

class Animal {
    doSomething = () => {
        return 'Hi.';
    }
}

class Dog extends Animal {
    doSomething = (superDoSomething => () => {
        return superDoSomething() + ' Woof!';
    })(this.doSomething)
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前