Question

当我看到令人惊讶的事情时，我正在搞乱ES6课程：

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak(sound) {
        console.log(sound);
    }
}

class Dog extends Animal {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    speak() {
        super.speak("Woof! I'm " + super.name + " and am " + this.age);
    }
}

然后，我创造了我的狗：

var mydog = new Dog("mydog",3);
mydog.speak();

现在打印

Woof! I'm undefined and am 3

所以我的问题是，为什么super.name未定义？在这种情况下，我希望它是mydog。

Answer 1

父构造函数中的

this仍然引用了狗，因此this.name = name直接在name对象上设置属性Dog而不在其父对象上。使用this.name将起作用：

super.speak("Woof! I'm " + this.name + " and am " + this.age);

Answer 2

覆盖对象实例上的方法以调用同名的prototype方法，我们会做类似的事情

let person = {
    getGreeting() {
        return "Hello";
    }
};

let dog = {
    getGreeting() {
        return "Woof";
    }
};


let friend = {
    getGreeting() {
        return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
    }
};

// set prototype to person
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting());                      // "Hello, hi!"
console.log(Object.getPrototypeOf(friend) === person);  // true

// set prototype to dog
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting());                      // "Woof, hi!"
console.log(Object.getPrototypeOf(friend) === dog);     // true

使用Object.getPrototypeOf（）和.call（this）来调用原型上的方法有点冗长，很好的ECMAScript 6可以帮助它，它引入了super。 super是指向当前对象原型的指针，与Object.getPrototypeOf（this）值相同。牢记这一点，我们可以将getGreeting()方法重写为

let friend = {
    getGreeting() {
        // in the previous example, this is the same as:
        // Object.getPrototypeOf(this).getGreeting.call(this)
        return super.getGreeting() + ", hi!";
    }
};

访问ES6超级属性

2 个答案: