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这就像我们的兔子功能.但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] }
{}

这是为什么？

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

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 foxreturns true.

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