26 8月

探秘ES6: 类语法

来源:Mozilla Web开发者博客         文 / Eric Faust

原文链接:https://hacks.mozilla.org/2015/07/es6-in-depth-classes/

ES In Depth是一个系列,描述按照ECMAScript标准第6版加入到JavaScript语言中的新特性。简称为ES6

在领教了本系列文章前几篇的复杂程度后,我们现在得以有片刻的喘息。再没有闻所未闻的编码方式,使用生成器(generator)编码;再没有无所不能的代理对象(proxy object),为JavaScript语言内部算法实现提供了钩子函数;再没有新的数据结构,避免了用户自主开发的需要。相反,我们要说说与一个旧问题相关的语法和清理技法(idiom),那就是JavaScript中对象构造函数的创建。

问题

我们要说的是,创建面向对象设计原则中最典型的例子:Circle类。想象我们正在为Canvas库编写一个Circle类,除此之外,恐怕还需要知道如何去做以下几点:

  • 为给定的Canvas画一个Circle。
  • 记录所画Circle的个数。
  • 记录给定Circle的半径,如何给不变量(invariant)强行赋值。
  • 计算给定Circle的面积。

目前JS的惯用技法是先拿构造函数当作函数来创建,然后向函数添加任何想要添加的属性,再用一个对象替换构造函数中的prototype属性。该prototype对象包含构造函数最初所创建实例的所有属性。虽然这只是一个简单的例子,但敲出来以后,会是不少样板(boilerplate)代码:

  1. function Circle(radius) {
  2.     this.radius = radius;
  3.     Circle.circlesMade++;
  4. }
  5. Circle.draw = function draw(circle, canvas) { /* Canvas drawing code */ }
  6. Object.defineProperty(Circle, “circlesMade”, {
  7.     get: function() {
  8.         return !this._count ? 0 : this._count;
  9.     },
  10.     set: function(val) {
  11.         this._count = val;
  12.     }
  13. });
  14. Circle.prototype = {
  15.     area: function area() {
  16.         return Math.pow(this.radius, 2) * Math.PI;
  17.     }
  18. };
  19. Object.defineProperty(Circle.prototype, “radius”, {
  20.     get: function() {
  21.         return this._radius;
  22.     },
  23.     set: function(radius) {
  24.         if (!Number.isInteger(radius))
  25.             throw new Error(“Circle radius must be an integer.”);
  26.         this._radius = radius;
  27.     }
  28. });

这样的代码不仅冗长,而且不够直观。不是一下子就能理解函数是如何工作的,也不是很容易理解各个属性用什么方式绑定到所创建的实例对象的。即使这样的实现方式看起来比较复杂也不必着急。本文的主旨就是要展示一种更简单的编码方式,用来解决所有这些问题。

定义方法的语法

首次尝试去规范这个问题时,ES6给出了一种新的语法来为对象添加特殊属性。虽然很容易在上面的Circle.prototype添加area方法,但是对radius添加一对getter和setter让人感觉过于啰嗦。由于JS更加倾向于面向对象化的解决方法,所以人们变得关心如何用简洁的方式给属性添加访问器(accessor)。我们需要一种新的方式给对象添加“方法”,就像obj.prop = method那样被添加进去,而不需要用Object.defineProperty。大家希望能够轻松做到下面几件事:

  1. 给对象添加普通函数(normal function)。
  2. 给对象添加生成器函数(generator function)。
  3. 给对象添加普通访问器函数属性(accessor function property)。
  4. 给已创建的对象添加上述任何函数,好像使用方括号[]语法就能完成的样子。我们称之为计算属性名(computed property name)。

其中的一些事情之前是无法完成的。例如,之前没有办法给obj.prop定义getter或setter对其进行赋值,因此要添加新的语法功能。现在你就可以编写像下面这样的代码了。

  1. var obj = {
  2.     // Methods are now added without a function keyword, using the name of the
  3.     // property as the name of the function.
  4.     method(args) { … },
  5.     // To make a method that’s a generator instead, just add a ‘*’, as normal.
  6.     *genMethod(args) { … },
  7.     // Accessors can now go inline, with the help of |get| and |set|. You can
  8.     // just define the functions inline. No generators, though.
  9.     // Note that a getter installed this way must have no arguments
  10.     get propName() { … },
  11.     // Note that a setter installed this way must have exactly one argument
  12.     set propName(arg) { … },
  13.     // To handle case (4) above, [] syntax is now allowed anywhere a name would
  14.     // have gone! This can use symbols, call functions, concatenate strings, or
  15.     // any other expression that evaluates to a property id. Though I’ve shown
  16.     // it here as a method, this syntax also works for accessors or generators.
  17.     [functionThatReturnsPropertyName()] (args) { … }
  18. };

我们可以使用新的语法重写上面的代码段:

  1. function Circle(radius) {
  2.     this.radius = radius;
  3.     Circle.circlesMade++;
  4. }
  5. Circle.draw = function draw(circle, canvas) { /* Canvas drawing code */ }
  6. Object.defineProperty(Circle, “circlesMade”, {
  7.     get: function() {
  8.         return !this._count ? 0 : this._count;
  9.     },
  10.     set: function(val) {
  11.         this._count = val;
  12.     }
  13. });
  14. Circle.prototype = {
  15.     area() {
  16.         return Math.pow(this.radius, 2) * Math.PI;
  17.     },
  18.     get radius() {
  19.         return this._radius;
  20.     },
  21.     set radius(radius) {
  22.         if (!Number.isInteger(radius))
  23.             throw new Error(“Circle radius must be an integer.”);
  24.         this._radius = radius;
  25.     }
  26. };

严格地说,这段代码与其上面那段并不完全相同。方法定义中所使用的对象字面量(object literal)被设置成了configurable和enumerable。而在上一个代码段中的访问器则会是non-configurable和non-enumerable的。在实践中,这点很少被注意到,为了简洁,我决定忽略掉上面这两种描述。

不过,应该变得更好了对吗?很遗憾,即使有了这样新的定义方法的语法,我们对Circle的定义仍然无法做太多的事情。因为我们还没有定义函数。没有办法将属性绑定到你尚在定义的函数上去。

定义类的语法

虽然这样更好一些,但仍然无法令人满意,人们想要一种更简洁的JavaScript面向对象设计解决方案。他们说其他编程语言为了解决面向对象设计而拥有一种结构,这种结构被称为

很公平,那么就来添加类。

我们需要一个系统,允许将方法添加到已命名的构造函数当中,并还能添加系统的.prototype当中。这样这些方法就会出现在类的结构化实例当中。由于有新奇的语法可以定义方法,我们应该用一下。然后,只需要区分所添加的方法属于类的所有实例,还是专属于某个给定实例。在C++和Java语言中,解决这一问题的关键字是static。用在这里看起来也不错,用一下吧!

现在将众多方法其中的一个指定为函数,它将被称为构造函数。在C++和Java语言中,构造函数的名称要与类名一致,并且没有返回类型。由于JS没有返回类型,所以为了向后兼容,的确需要一个.constructor 属性。我们称这个方法为构造函数。

综上所述,可以重写Circle类了:

  1. class Circle {
  2.     constructor(radius) {
  3.         this.radius = radius;
  4.         Circle.circlesMade++;
  5.     };
  6.     static draw(circle, canvas) {
  7.         // Canvas drawing code
  8.     };
  9.     static get circlesMade() {
  10.         return !this._count ? 0 : this._count;
  11.     };
  12.     static set circlesMade(val) {
  13.         this._count = val;
  14.     };
  15.     area() {
  16.         return Math.pow(this.radius, 2) * Math.PI;
  17.     };
  18.     get radius() {
  19.         return this._radius;
  20.     };
  21.     set radius(radius) {
  22.         if (!Number.isInteger(radius))
  23.             throw new Error(“Circle radius must be an integer.”);
  24.         this._radius = radius;
  25.     };
  26. }

哇!我们不仅可以把与Circle相关的一切组织在一起,而且一切看起来如此地整洁。这绝对比一开始好多了。

即便如此,有些人可能还会有问题,找出极端的例子。我就试着预测一下,并解决其中的一些问题。

  • Q:分号用来做什么?A:为了“让一切看起来更像传统的类”,我们决定使用更为传统的分隔符。不喜欢它吗?这是可选的,分隔符并不是必须的。
  • Q:如果我不想要构造函数,但仍然想给已创建定对象添加方法该怎么办?A:很好!constructor方法完全是可选的。如果不这样做,默认情况就像已经敲了constructor() {}。
  • Q:“constructor”可以是生成器吗?A:不可以!不使用普通方法(normal method)添加constructor会导致TypeError,包括生成器和访问器。
  • Q:可以使用计算属性名定义constructor吗?A:遗憾的是不可以。这将非常难以探测。因此我们就不试了。如果使用计算属性名定义方法的话,最终方法会被命名为“constructor”,仍会得到一个名为 constructor的方法,而不是类的构造函数。
  • Q:如果改变Circle的值会怎样?是否会导致出现新的Circle,并且出错呢?A:不会的!就像函数表达式,类内部绑定了它们的名称。外部力量无法改变这个绑定。因此,在封闭范围内不管怎样设置Circle变量,构造函数中的Circle.circlesMade++都会按预期工作。
  • Q:好吧,但是我可以直接传入对象字面量作为函数的参数。使用新语法定义的类看起来行不通了。A:很幸运,ES6还增加类表达式!可以对其命名或者匿名。除了在声明它们的范围内不会创建变量,其行为与上面描述的函数完全相同。
  • Q:上面的这些把戏如果是可枚举的,或者有什么其他属性会怎么样?A:这样做是为了可以给对象配置方法,但是当你对对象的属性进行枚举的时候,仅得到了已经添加进对象的数据属性。因为这是合理的,所以类里所配置的方法是configurable的,但不是enumerable的。
  • Q:喂,等等……实例变量在哪里?static常量呢?A:好问题!在ES6中,类的定义目前不存在实例变量和静态常量。不过好消息是,连同参与其他规范的过程中,我都强有力地支持在类的语法中设有static和const值。事实上,这已经出现在了规范相关的会议上。我想可以期待以后出现更多与此有关的讨论。
  • Q:好吧,即便如此,这些也都是极好的!我可以使用它们了吗?A:不完全可以。存在那些可选用的polyfill(特别是Babel),你可以试着使用它们。遗憾的是,在被主流浏览器原生地实现以前,还需要一些时间。我们这里讨论的一切都在Nightly版的Firefox浏览器实现过。Edge和Chrome浏览器实现了,但是默认情况下并未启用。遗憾之处是Safari浏览器还没实现这些新特性。
  • Q:JavaC++都使用子类和super关键字,但这里并没提到,JS有相关概念吗?A:有的!但这完全是一个值得另外成文讨论的事情。回头再看我们今后有关使用子类的更新,将讨论更多有关JavaScript类的威力。

没有Jason OrendorffJeff Walden大量认真负责的代码审查和指导,我不可能实现文中的类代码。

下周,Jason Orendorff将结束为期一周的假期,开始撰写let和const主题。

http://www.csdn.net/article/2015-08-14/2825464-es6-in-depth-classes

发表评论

电子邮件地址不会被公开。 必填项已用*标注