ES6深度解析-Classes

Posted 2021-08-28 不要搞偷袭

web前端JavaScript

存在的问题

假设我们想要创建最典型的面向对象设计的示例:Circle类。假设我们正在为一个简单的Canvas库编写一个Circle。除此之外，我们可能想知道如何做到以下几点:

• 在给定的画布Canvas上画一个给定的圆Circle。
• 记录所做的圆圈的总数。
• 跟踪给定圆的半径，以及如何对其值施加不变量。
• 计算给定圆的面积。

当前的JS习惯说法是，我们应该首先创建一个函数，作为构造函数；然后将我们可能想要的任何属性添加到函数本身，文章摘自乐字节、然后用一个对象Object替换构造函数的prototype属性。这个prototype对象将包含构造函数创建的实例对象开始时应该包含的所有属性。即使是一个简单的例子，当你把它全部写出来的时候，这最终会变成一大堆样板文件:

function Circle(radius) {
    this.radius = radius;
    Circle.circlesMade++;//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提供了一种向对象添加特殊属性的新语法。虽然很容易将area方法添加到Circle.prototype中，为radius添加getter/setter对感觉要就复杂多了。随着JS转向更面向对象的方法，人们开始对设计更简洁的方法来添加对象访问器感兴趣。我们需要一种新的方式来添加方法到一个对象，就像方法已经使用obj.prop = method被添加到obj中一样。不需要使用Object.defineProperty这样复杂的API。人们希望能够轻松地做以下事情:

1. 向对象添加普通函数属性。
2. 向对象添加生成器函数属性。
3. 向对象添加普通访问器函数属性。
4. 添加上面的任何一个，就像在最终的对象上用[]语法做过一样。我们称这些为Computed属性名（Computed property
   names）。

有些事情以前是做不到的。例如，没有办法定义一个getter或setter来给obj.prop赋值。因此，必须添加新的语法。你现在可以写这样的代码:

var obj = {
    // 方法被添加而不带function关键字，使用属性名作为函数名。
    method(args) { ... },

    // 让方法称为一个生成器，在方法名前加一个*号
    *genMethod(args) { ... },

    // 在|get|和|set|的帮助下，访问器（accessors）现在可以用内联写法。

    // 注意，以这种方式注册的getter不能有参数
    get propName() { ... },

    // 注意，以这种方式注册的setter只能有一个参数
    set propName(arg) { ... },

    // 为了解决上面的第四个问题，[] 语法可以出现在任何方法名出现的地方。
    // 这里可以使用Symbols，调用函数，连接字符串，或者其他任何可以产生一个属性id的表达式。
    // 这个语法对访问器（accessors）和生成器（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;
    }
};

这段代码与上面的代码片段并不完全相同。对象字面量中的方法定义注册为可配置和可枚举的，而注册在第一个代码段中的访问器（get，set）将是不可配置和不可枚举的。在实践中，这一点很少被注意到，为了简洁起见，我决定省略上面的可列举性和可配置性。

不过，情况正在好转，对吧?不幸的是，即使有了这种新的方法定义语法，对于Circle的定义我们也无能为力，因为我们还没有定义函数。在定义函数的时候，没有办法给它赋予属性。

类定义语法

虽然这更好了，但仍然不能满足那些想要用javascript实现面向对象设计的更清晰解决方案的人。他们认为，其他语言有一个用于处理面向对象设计的构造，这个构造称为类。

很好。那么，让我们给JS添加类。

我们想要一个允许我们向有命名构造函数添加方法，并向它的.prototype添加方法的系统，这样它们就会出现在类的构造实例中。既然我们有了新奇的新方法定义语法，我们肯定应该使用它。然后，我们只需要一种方法来区分哪些是在类的所有实例上通用的，哪些函数是特定于给定实例的。在c++或Java中，关键字是static。看起来和其他的一样好。让我们使用它。

现在，如果有一种方法可以指定其中一个方法作为构造函数被调用，那将是很有用的。在c++或Java中，它将被命名为与类相同的名称，没有返回类型。因为JS没有返回类型，我们需要一个.constructor属性，为了向后兼容，我们把这个方法称为构造函数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;
    };
}

我们不仅可以把所有与圆相关的东西放在一起，而且所有东西看起来都很干净。这肯定比我们开始的时候好。即便如此，一些人可能还会有疑问。我将尝试预测并解决以下问题:

• 分号是怎么回事？

  为了“让东西看起来更像传统的类”，我们决定使用更传统的分隔符。不喜欢它吗?它是可选的。分隔符不是必须的。

• 如果我不想要构造函数，但仍然想在创建的对象上放置方法，该怎么办？

  这没问题。构造函数方法是完全可选的。如果你没有提供一个，默认情况下会补充一个空的构造函数constructor() {}

• 构造函数可以是生成器吗?

  不可以。添加一个非普通方法的构造函数将导致TypeError。这包括生成器和访问器。

• 我可以用计算属性名（[computed property name]）定义构造函数吗？

  不可以。。这很难检测，所以我们就不试了。如果你用一个计算属性名定义了一个方法，这个方法最终返回constructor，你仍然会得到一个命名为constructor的方法，它最终不是类的构造函数。

• 如果我改变Circle的值呢?这会导致新的Circle行为错误吗?

  不会的!与函数表达式非常相似，类获得其指定名称的内部绑定。外部力量无法更改此绑定，因此无论您在外围作用域Circle中将Circle变量设置为什么。构造函数中的circlesMade++将按预期运行。

文章摘自乐字节