ES6 类只是 Javascript 中原型模式的语法糖吗? [英] Are ES6 classes just syntactic sugar for the prototypal pattern in Javascript?

问题描述

在玩过 ES6 之后，我真的开始喜欢新的语法和可用的功能，但我确实有一个关于类的问题.

After playing with ES6, I've really started to like the new syntax and features available, but I do have a question about classes.

新的 ES6 类只是旧原型模式的语法糖吗?还是幕后有更多事情发生?例如:

Are the new ES6 classes just syntactic sugar for the old prototypal pattern? Or is there more going on here behind the scenes? For example:

class Thing {
   //... classy stuff
  doStuff(){}
}

对比:

var Thing = function() {
  // ... setup stuff
};

Thing.prototype.doStuff = function() {}; // etc

推荐答案

是的，也许，但有些语法糖有问题.

Yes, perhaps, but some of the syntactic sugar has teeth.

声明一个类会创建一个函数对象，它是该类的构造函数，使用为类体内的constructor 提供的代码，以及为命名的类，与类同名.

Declaring a class creates a function object that is the constructor for the class, using the code provided for constructor within the class body, and for named classes, with the same name as the class.

类构造函数有一个普通的原型对象，类实例以普通的 JavaScript 方式从中继承属性.类体中定义的实例方法被添加到这个原型中.

The class constructor function has a normal prototype object from which class instances inherit properties in normal JavaScript fashion. Instance methods defined within the class body are added to this prototype.

ES6 没有提供在类体内声明类实例默认属性值(即不是方法的值)以存储在原型上并继承的方法.要初始化实例值，您可以将它们设置为构造函数中的本地非继承属性，或者以与普通构造函数相同的方式将它们手动添加到类定义之外的类构造函数的 prototype 对象中.(我不是在争论为 JavaScript 类设置继承属性的优点或其他方面).

ES6 does not provide a means to declare class instance default property values (i.e. values which are not methods) within the class body to be stored on the prototype and inherited. To initialize instance value you can either set them as local, non inherited properties within the constructor, or manually add them to the class constructor's prototype object outside the class definition in the same fashion as for ordinary constructor functions. (I am not arguing the merits or otherwise of setting up inherited properties for JavaScript classes).

在类体内声明的静态方法被添加为类构造函数的属性.避免使用与标准函数属性和从 Function.prototype 继承的方法竞争的静态类方法名称，例如 call、apply 或 length.

Static methods declared within the class body are added as properties of the class constructor function. Avoid using static class method names that compete with standard function properties and methods inherited from Function.prototype such as call, apply or length.

不那么甜的是，类声明和方法总是在严格模式下执行，还有一个很少受到关注的特性:类构造函数的 .prototype 属性是只读的:你不能设置将它分配给您为某些特殊目的而创建的其他对象.

Less sugary is that class declarations and methods are always executed in strict mode, and a feature that gets little attention: the .prototype property of class constructor functions is read only: you can't set it to some other object you've created for some special purpose.

当你扩展一个类时会发生一些有趣的事情:

Some interesting stuff happens when you extend a class:

• 扩展类构造函数的prototype 对象属性自动在被扩展类的prototype 对象上建立原型.这不是特别新，可以使用 Object.create 复制效果.

• the prototype object property of the extended class constructor is automatically prototyped on the prototype object of the class being extended. This is not particularly new and the effect can be duplicated using Object.create.

扩展类的构造函数(对象)自动在被扩展类的构造函数上建立原型，而不是Function.虽然可以使用 Object.setPrototypeOf 或什至 childClass.__proto__ = parentClass 在普通构造函数上复制效果，但这将是一种非常不寻常的编码实践，并且是JavaScript 文档中经常建议不要这样做.

the extended class constructor function (object) is automatically prototyped on the constructor function of the class being extended, not Function. While it may be possible to replicate the effect on an ordinary constructor function using Object.setPrototypeOf or even childClass.__proto__ = parentClass, this would be an extremely unusual coding practice and is often advised against in JavaScript documentation.

还有其他区别，例如类对象没有以使用 function 关键字声明的命名函数的方式提升.

There are other differences such as class objects not being hoisted in the manner of named functions declared using the function keyword.

我认为认为类声明和表达式将在 ECMA 脚本的所有未来版本中保持不变的想法可能是幼稚的，看看是否以及何时发生发展将会很有趣.可以说，将语法糖"与 ES6(ECMA-262 标准版本 6)中引入的类联系起来已经成为一种时尚，但我个人尽量避免重复它.

I believe it could be naive to think that Class declarations and expressions will remain unaltered in all future versions of ECMA Script and it will be interesting to see if and when developments occur. Arguably it has become a fad to associate "syntactical sugar" with classes introduced in ES6 (ECMA-262 standard version 6) but personally I try to avoid repeating it.

这篇关于ES6 类只是 Javascript 中原型模式的语法糖吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！