【探秘ES6】系列专栏（十一）：类语法

1顶
0踩

2015-08-17 14:34 by 副主编 mengyidan1988 评论(1) 有4241人浏览

javascript ES6

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成【探秘ES6】系列专栏，供大家学习借鉴。本文为该系列的第十一篇。

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

问题

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

为给定的Canvas画一个Circle。
记录所画Circle的个数。
记录给定Circle的半径，以及如何给不变量（invariant）强行赋值。
计算给定Circle的面积。

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

function Circle(radius) {
    this.radius = radius;
    Circle.circlesMade++;
}

Circle.draw = function draw(circle, canvas) { /* Canvas drawing code */ }

Object.defineProperty(Circle, "circlesMade", {
    get: function() {
        return !this._count ? 0 : this._count;
    },

    set: function(val) {
        this._count = val;
    }
});

Circle.prototype = {
    area: function area() {
        return Math.pow(this.radius, 2) * Math.PI;
    }
};

Object.defineProperty(Circle.prototype, "radius", {
    get: function() {
        return this._radius;
    },

    set: function(radius) {
        if (!Number.isInteger(radius))
            throw new Error("Circle radius must be an integer.");
        this._radius = radius;
    }
});

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

定义方法的语法

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

给对象添加普通函数（normal function）。
给对象添加生成器函数（generator function）。
给对象添加普通访问器函数属性（accessor function property）。
给已创建的对象添加上述任何函数，好像使用方括号［］语法就能完成的样子。我们称之为计算属性名（computed property name）。

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

var obj = {
    // Methods are now added without a function keyword, using the name of the
    // property as the name of the function.
    method(args) { ... },

    // To make a method that's a generator instead, just add a '*', as normal.
    *genMethod(args) { ... },

    // Accessors can now go inline, with the help of |get| and |set|. You can
    // just define the functions inline. No generators, though.

    // Note that a getter installed this way must have no arguments
    get propName() { ... },

    // Note that a setter installed this way must have exactly one argument
    set propName(arg) { ... },

    // To handle case (4) above, [] syntax is now allowed anywhere a name would
    // have gone! This can use symbols, call functions, concatenate strings, or
    // any other expression that evaluates to a property id. Though I've shown
    // it here as a method, this syntax also works for accessors or generators.
    [functionThatReturnsPropertyName()] (args) { ... }
};

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

function Circle(radius) {
    this.radius = radius;
    Circle.circlesMade++;
}

Circle.draw = function draw(circle, canvas) { /* Canvas drawing code */ }

Object.defineProperty(Circle, "circlesMade", {
    get: function() {
        return !this._count ? 0 : this._count;
    },

    set: function(val) {
        this._count = val;
    }
});

Circle.prototype = {
    area() {
        return Math.pow(this.radius, 2) * Math.PI;
    },

    get radius() {
        return this._radius;
    },
    set radius(radius) {
        if (!Number.isInteger(radius))
            throw new Error("Circle radius must be an integer.");
        this._radius = radius;
    }
};

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

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

定义类的语法

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

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

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

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

综上所述，可以重写Circle类了：

class Circle {
    constructor(radius) {
        this.radius = radius;
        Circle.circlesMade++;
    };

    static draw(circle, canvas) {
        // Canvas drawing code
    };

    static get circlesMade() {
        return !this._count ? 0 : this._count;
    };
    static set circlesMade(val) {
        this._count = val;
    };

    area() {
        return Math.pow(this.radius, 2) * Math.PI;
    };

    get radius() {
        return this._radius;
    };
    set radius(radius) {
        if (!Number.isInteger(radius))
            throw new Error("Circle radius must be an integer.");
        this._radius = radius;
    };
}

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

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

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

译者简介：白云鹏，移动应用开发者，关注前端技术、架构设计、移动应用开发。个人博客：http://baiyunpeng.com。

原文链接：ES6 In Depth: Classes

本译文遵循Creative Commons Attribution Share-Alike License v3.0

分享到：