ES6类与ES5风格有多大差异？

Question

我就是那种需要深入了解一切的人......所以，我一直在经历许多教学科目，并且我已经深入了解原型继承。
我清楚地了解它在ES5中是如何工作的（每个函数都有这个特殊的原型属性，它指向它所基于的对象。这个对象有.constructor属性，它指向函数等）。

那么，现在让我们看一下ES5示例：

function Bunny(name) {
    this.name = name
}

Bunny.prototype.sayName = function() {
    console.log('Im',this.name)
}

这个很清楚：函数Bunny获取的参数name将被分配给一个新对象。

下一行将函数添加到函数的原型中，该函数将返回当前名称。

我们现在看看ES6课程：

class Fox{
    constructor(name){
        this.name = name;
    }

    sayName() {
        console.log('Im', this.name)
    }
}

同样的东西：这里的Constructor函数就像我们的Bunny函数。 但sayName在狐狸是不一样的sayName的兔子。
让我们创建实例：

let bunny = new Bunny('Henry');
let fox = new Fox('Jerry');

现在，检查他们的原型：

console.log(Object.getPrototypeOf(bunny))
console.log(Object.getPrototypeOf(fox))

我们得到了什么？

//using repl.it - ES6
{ sayName: [Function] }
{}

这是为什么？

我想可能是因为我们直接在Bunny的原型上设置了函数sayName 。 所以我把它改成了这个：

function Bunny(name) {
    this.name = name

    //Warning - Bad practice ahead! 
    this.sayName = function() {
        console.log('Im',this.name)
    }
}

结果：

//using repl.it - ES6
{}
{}

这有意义，如果不是这样：

console.log(bunny.hasOwnProperty('sayName'))
console.log(fox.hasOwnProperty('sayName'))

这意味着， fox没有对他拥有sayName ，原型显示它拥有它。 我在这里错过了什么吗？ 为什么他们不同？

Answer 1

在ES6类中，所有方法都是不可枚举的，因此当您记录ES6类的实例原型时，您会得到一个看起来像空对象的东西。

看这个例子：

 const obj = new (class {method() {}}); console.log(Object.getPrototypeOf(obj)); // {} console.log(typeof Object.getPrototypeOf(obj).method); // function 

在ES5中，您可以通过将方法分配给类原型的属性来定义方法，这使其可枚举。 如果要实现与ES6类相同的效果，可以使用Object.defineProperty()代替：

 const TestClass = function TestClass() {}; Object.defineProperty(TestClass.prototype, 'method', { value: function() {}, writable: true, enumerable: false, configurable: true, }); const obj = new TestClass(); console.log(Object.getPrototypeOf(obj)); // {} console.log(typeof Object.getPrototypeOf(obj).method); // function 

---

并且fox.hasOwnProperty('sayName')返回false因为hasOwnProperty()仅检查自己的属性，而sayName在原型链中。 如果你想检查原型链中的属性，可以使用in运算符： 'sayName' in fox返回true 。

---

另请参阅MDN上的属性的可用性和所有权 。