為什么我的班級原型不起作用？

Question

為了構建我的JavaScript代碼，我想使用類 ，ES6的新原型繼承的語法糖。 我遇到了麻煩：似乎我的原型方法沒有按預期工作，這讓我覺得我可能對JavaScript類有一個基本的誤解，和/或它們是如何工作的。

采用以下代碼，聲明傳統構造函數Cat並修改其原型，以及ES6類Dog ，其中定義了原型方法。

// Traditional Cat Constructor
// ===========================
function Cat(name) {
    this.name  = name;
    this.sound = "Meow.";
}

Cat.prototype.speak = function() {
    console.log(this.sound || "I don't make a sound.");
};


// Dog via ES6 Class
// =================
class Dog {
    constructor(name) {
        this.name = name;
        this.sound = "Woof!";
    }

    speak() {
        console.log(this.sound);
    }
}

var cat = new Cat("Bella");
var dog = new Dog("Sparky");

---

在NodeJS中 （使用4.4.2和6.0.0-pre測試），當我嘗試獲取Dog實例的原型時，我得到一個空對象，但我仍然可以在實例上調用prototype方法。

Object.getPrototypeOf(cat);
// -> Cat { speak: [Function] }

Object.getPrototypeOf(dog);
// -> Dog {}

cat.speak();
// -> Meow.

dog.speak();
// -> Woof!

---

在谷歌瀏覽器中 ，我希望結果是相同的（因為Node使用其引擎），我得到了預期的結果：

Object.getPrototypeOf(cat);
// -> Object {}
// ->     constructor: function Cat(name)
// ->     speak: function()
// ->     __proto__: Object

Object.getPrototypeOf(dog);
// -> Object {}
// ->     constructor: function(name)
// ->     speak: function()
// ->     __proto__: Object

---

我在Node中遇到一個錯誤，說我在類中定義的原型方法不是類的實例函數，這是我注意到這一點的唯一原因，但不幸的是現在我似乎無法重現這個問題。

無論如何，上面沒有正確的接縫，是否有任何解釋為什么這個代碼以這種方式表現？

Answer 1

為什么我的班級原型不起作用？

只是因為輸出不是你的預期並不意味着它不起作用。 Node REPL和console都沒有標准化。 實現完全可以隨意輸出他們想要的任何內容。

真正了解某些東西是否“有效”的唯一方法就是使用它。 所以嘗試調用dog.speak() 。

無論如何，上面沒有正確的接縫，是否有任何解釋為什么這個代碼以這種方式表現？

類方法是不可枚舉的屬性，因此它們不會顯示在Node輸出中。 簡化示例：

> var foo = {};
undefined
> Object.defineProperty(foo, 'bar', {value: 42, enumerable: false});
{}
> console.log(foo);
{}
undefined
> foo.bar
42
>

關於Chrome輸出，您似乎擴展了對象。 Chrome始終顯示可枚舉和不可枚舉的屬性。

> var foo = {};
  undefined
> Object.defineProperty(foo, 'bar', {value: 42, enumerable: false});
  Object {bar: 42}
> console.dir(foo);
  Object
    bar: 42
    __proto__: Object
  undefined

Chrome也似乎在夏季中顯示了不可枚舉的屬性。 但是，即使Chrome和Node共享相同的引擎，它們也可能不會為console或輸出生成共享相同的邏輯。