JS 类中的方法 - 为什么代码会抛出错误？

Question

有谁知道为什么在下面的代码示例中，当 ES6 类只是构造函数和原型模式之上的语法糖时，JS 会抛出错误？

// Example 1
class Cat {
  meow() {
    console.log('Meow meow!')
  }
}

let kitty = {};
Object.assign(kitty, Cat.prototype);
kitty.meow(); // TypeError: kitty.meow is not a function

为什么这段代码片段在功能上应该与上面的代码片段相同？

class Cat {

}

Cat.prototype.meow = function() {console.log('Meow meow!')}

let kitty = {};
Object.assign(kitty, Cat.prototype);
kitty.meow(); // Meow meow!

Answer 1

Object.assign将一个或多个源对象的可枚举属性复制到目标对象。除非如此定义，否则默认情况下方法是不可枚举的。Object.create另一方面，如果出于某种原因，您想这样做，则可以创建类的新实例。

class Cat {
  meow() { console.log('Meow meow!') }
}

let kitty = Object.create(Cat.prototype);
kitty.meow();

下面是一个说明如何Object.assign工作的示例。在下面的示例中， usingObject.assign将两个Cat实例的可枚举属性复制到kitten3，它混合了它们的属性但本身不是一个Cat实例。

var id = 1;

class Cat {
  constructor(name) {
    this.id = id++;
    if (name) this.name = name;
  }
}

let kitty1 = new Cat("Lucy");
console.log(kitty1.id, kitty1.name, kitty1 instanceof Cat);

let kitty2 = new Cat();
console.log(kitty2.id, kitty2.name, kitty2 instanceof Cat);

let kitty3 = {};
Object.assign(kitty3, kitty1, kitty2);
console.log(kitty3.id, kitty3.name, kitty3 instanceof Cat);

在你设置的更新代码中Cat.prototype.meow = function() {}，你直接这样做，这使它成为对象（原型）的可枚举属性，这就是为什么Object.assign有效。您可以使用Object.keys. 更接近于第一个声明的是定义方法 usingObject.defineProperty并使其不可枚举：

class Cat1 {
  meow() { console.log('Meow meow!') }
}

class Cat2 {}
Cat2.prototype.meow = function() { console.log('Meow meow!') }

class Cat3 {}
Object.defineProperty(Cat3.prototype, "meow", {
  value: function() { console.log('Meow meow!') },
  enumerable: false
});

console.log("Cat1: ", Object.keys(Cat1.prototype));
console.log("Cat2: ", Object.keys(Cat2.prototype));
console.log("Cat3: ", Object.keys(Cat3.prototype));