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上的Enumerability and ownership of properties。

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

1 个答案: