【译】《Understanding ECMAScript6》- 第五章-Class

目录

自JavaScript面世以来,许多开发者疑惑为何JavaScript没有Class。大多数面向对象语言都支持Class以及Class继承,尽管部分开发者认为JavaScript语言并不需要Class,但事实上很多第三方库通过工具方法来模拟Class。

ES6正式引入了Class规范。为了保证JavaScript语言的动态性,ES6的Class规范与其他面向对象语言的Class并不完全相同。

ES5中的拟Class结构

在详细讲述Class之前,我们首先了解一下Class的内层机制。ES5甚至更早的版本中,在没有Class的环境下,最接近Class的模式是创建一个构造函数并且扩展它的prototype方法。这种模式通常被称为自定义类型。如下:

function PersonType(name) {
    this.name = name;
}
PersonType.prototype.sayName = function() {
    console.log(this.name);
};
let person = new PersonType("Nicholas");
person.sayName();   // outputs "Nicholas"
console.log(person instanceof PersonType);  // true
console.log(person instanceof Object);      // true

上述代码中,PersonType是一个构造函数,它创建了一个name属性。sayName()方法是prototype的扩展方法,它可以被PersonType的所有实例使用。随后,通过new创建了PersonType的一个实例person对象,根据原型链继承原理,person同时也是Object的实例。

这种机制是各种拟Class模式的理论基础,也是ES6中Class规范的基础。

Class声明

Class的声明语法与其他语言类似,采用class关键字+类名的语法。Class内部的语法与Object字面量方法的简洁语法类似,只不过方法之间不必使用逗号隔开。将上例改写为Class如下:

class PersonClass {
    // 等价于构造函数PersonType
    constructor(name) {
        this.name = name;
    }
    // 等价于PersonType.prototype.sayName
    sayName() {
        console.log(this.name);
    }
}
let person = new PersonClass("Nicholas");
person.sayName();   // outputs "Nicholas"
console.log(person instanceof PersonClass);     // true
console.log(person instanceof Object);          // true
console.log(typeof PersonClass);                    // "function"
console.log(typeof PersonClass.prototype.sayName);  // "function"

上述代码的PersonClass与前例中的PersonType作用类似。Class声明内部使用constructor关键字定义构造函数。方法的定义可以使用简洁语法,不必使用function关键字。除constructor以外的方法名可以根据产品需求自由定义。

私有属性只能在Class的构造函数内声明。比如本例中的name属性便是私有属性,属性值与实例声明时的传参有关。笔者强烈推荐所有的私有属性均在构造函数内创建,以便统一管理

译者注:私有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性

实际上,ES6中的Class只是在语法更加语义化,本质上仍然是基于prototype原理。比如本例中的PersonClass本质上是一个构造函数,typeof PersonClass的运行结果为"function"。sayName()同前例的PersonType.prototype.sayName()一样,是PersonClass.prototype的扩展方法。

但是Class与常规的构造函数并不完全相同,再使用Class时需要注意以下几点区别

  1. Class不会被声明提升。与let声明类似,Class在声明语句执行之前是不能被访问的;
  2. Class声明语句内部的代码全部运行在严格模式下;
  3. Class的所有方法都是不可枚举的。而常规的自定义类型需要使用Object.defineProperty()来定义非枚举属性;
  4. 必须使用new调用Class构造函数,否则会报错;
  5. Class不能被自身的方法函数重命名。

基于以上规范,前例中的PersonClass等价于以下代码:

// 等价于PersonClass
let PersonType2 = (function() {

    "use strict";

    const PersonType2 = function(name) {

        // 确保只能被new调用
        if (typeof new.target === "undefined") {
            throw new Error("Constructor must be called with new.");
        }

        this.name = name;
    }

    Object.defineProperty(PersonType2.prototype, "sayName", {
        value: function() {
            console.log(this.name);
        },
        enumerable: false,
        writable: true,
        configurable: true
    });

    return PersonType2;
}());

虽然不使用Class也可以实现同样的功能,但是Class的语法更加简洁易读。

常量类名

Class的类名与const类似,在其内部是一个不可变的常量。也就是说,Class不能被自身的方法函数重命名,但是可以在外部进行重命名。如下:

class Foo {
   constructor() {
       Foo = "bar";    // throws an error when executed
   }
}

// but this is okay
Foo = "baz";

上述代码中的,Foo在其内部代码与外部代码中的行为完全不同。在内部,Foo类名是一个不能被重写的常量,尝试重写会抛出错误;在外部,Foo是一个类似let声明的变量,可以被随意重写。

Class表达式

Class与function都有两种声明方式:字面量声明和表达式声明。字面量声明即关键字(class/function)+类名/函数名。函数的表达式声明语法可以省略函数名,类似的,Class的表达式声明语法也可以省略类名:

// class expressions do not require identifiers after "class"
let PersonClass = class {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
};

let person = new PersonClass("Nicholas");
person.sayName();   // outputs "Nicholas"

console.log(person instanceof PersonClass);     // true
console.log(person instanceof Object);          // true

console.log(typeof PersonClass);                    // "function"
console.log(typeof PersonClass.prototype.sayName);  // "function"

Class的字面量声明与表达式声明是完全等价的。class关键字后的类名可以被省略,也可以不省略,如下:

let PersonClass = class PersonClass2 {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
};

console.log(PersonClass === PersonClass2);  // true

上述代码中的PersonClass和PersonClass2是同一个class的引用,两者是完全等价的。

Class表达式还有一些其他很有趣的使用场景。比如可以作为参数传入函数:

function createObject(classDef) {
    return new classDef();
}

let obj = createObject(class {

    sayHi() {
        console.log("Hi!");
    }
});

obj.sayHi();        // "Hi!"

上述代码中,匿名class表达式作为createObject()的参数使用,在函数内部使用new创建并返回了一个class实例。

Class表达式还可以通过立即执行构造函数来创建单例。这种模式下,必须使用new调用class表达式,并且class表达式的末尾需要圆括号传入参数。如下:

let person = new class {

    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(this.name);
    }

}("Nicholas");

person.sayName();       // "Nicholas"

上述代码中,匿名class表达式被创建时立即执行构造函数。这种模式可以使用class语法创建单例,而不必遗留class的引用。

Class声明与class表达式只在语法上存在差异,两者可以互相替换。与函数声明/表达式不同的是,class声明/表达式并不会被声明提升。

存储器属性

尽管私有属性应该在class的构造函数内创建,class允许在构造函数以外的区域定义其原型的存储器属性,语法类似Object字面量。创建getter的语法是get关键字+空格+方法名;创建setter的语法是set关键字+空格+方法名。如下:

class CustomHTMLElement {

    constructor(element) {
        this.element = element;
    }

    get html() {
        return this.element.innerHTML;
    }

    set html(value) {
        this.element.innerHTML = value;
    }
}

var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype,"html");
console.log("get" in descriptor);   // true
console.log("set" in descriptor);   // true
console.log(descriptor.enumerable); // false

译者注:Object.getOwnPropertyDescriptor() 返回指定对象上一个自有属性对应的属性描述符,包括value、writable、get、set、configurable、enumerable。

上述代码中,CustomHTMLElement类是对指定DOM一系列操作的简单封装。html的setter和getter方法是原生innerHTML方法的事件代理。存储器属性归属于CustomHTMLElement.prototype,并且是不可枚举的。上述代码改写为常规函数模式如下:

// direct equivalent to previous example
let CustomHTMLElement = (function() {

    "use strict";

    const CustomHTMLElement = function(element) {

        // make sure the function was called with new
        if (typeof new.target === "undefined") {
            throw new Error("Constructor must be called with new.");
        }

        this.element = element;
    }

    Object.defineProperty(CustomHTMLElement.prototype, "html", {
        enumerable: false,
        configurable: true,
        get: function() {
            return this.element.innerHTML;
        },
        set: function(value) {
            this.element.innerHTML = value;
        }
    });

    return CustomHTMLElement;
}());

与前例的class语法相比,上述代码要繁琐很多。

译者注:请注意前例class语法中的getter和setter方法的名称是相同的,因为两者都是CustomHTMLElement.prototype.html的存储器属性。这一点容易产生困惑,本例中Object.defineProperty()则一目了然。

静态成员

为构造函数添加额外的方法来模拟静态成员是JavaScript中常用的模式之一。如下:

function PersonType(name) {
    this.name = name;
}

// static method
PersonType.create = function(name) {
    return new PersonType(name);
};

// instance method
PersonType.prototype.sayName = function() {
    console.log(this.name);
};

var person = PersonType.create("Nicholas");

在其他编程语言中,工厂方法PersonType.create()被称为静态方法,因为它与PersonType的实例无关。

Class简化了静态方法的创建过程,在方法名或存储器属性之前使用static修饰即可。前例中的代码可以改写为以下形式:

class PersonClass {

    // 等价于构造函数PersonType
    constructor(name) {
        this.name = name;
    }

    // 等价于PersonType.prototype.sayName
    sayName() {
        console.log(this.name);
    }

    // 等价于PersonType.create
    static create(name) {
        return new PersonClass(name);
    }
}

let person = PersonClass.create("Nicholas");

PersonClass使用static修饰符定义了一个静态方法create()。

static修饰符可以用于除constructor以外的任何class方法和存储器属性。

与class的其他成员一样,静态成员默认不可枚举。

派生类

ES6之前实现继承需要非常繁琐的逻辑,比如:

function Rectangle(length, width) {
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function() {
    return this.length * this.width;
};

function Square(length) {
    Rectangle.call(this, length, length);
}

Square.prototype = Object.create(Rectangle.prototype, {
    constructor: {
        value:Square,
        enumerable: true,
        writable: true,
        configurable: true
    }
});

var square = new Square(3);

console.log(square.getArea());              // 9
console.log(square instanceof Square);      // true
console.log(square instanceof Rectangle);   // true

上述代码中,Square继承自Rectangle。首先,以Rectangle.prototype为原型创建Square.prototype;其次,Square函数内部需要使用call()函数调用Rectangle。实现继承的逻辑太过繁琐,不仅仅令新手望而却步,即使是经验丰富的开发者也会在此跌跟头。

ES6规范并简化了实现继承的方式,使用extends关键字便可以指定派生类的父类。派生类内部可以使用super()调用父类的方法。基于此规范,前例的代码可以简化为以下形式:

class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }

    getArea() {
        return this.length * this.width;
    }
}

class Square extends Rectangle {
    constructor(length) {

        // 等同于前例的Rectangle.call(this, length, length)
        super(length, length);
    }
}

var square = new Square(3);

console.log(square.getArea());              // 9
console.log(square instanceof Square);      // true
console.log(square instanceof Rectangle);   // true

Square类使用extends关键字继承自Rectangle。Square的构造函数内使用super()调用Rectangle的构造函数并传入指定参数。需要注意的是,Rectangle只在派生类声明时,即extends之后使用,这是与ES5不同的地方。

译者注:最后一句话可以这样理解,派生类内部调用父类全部使用super(),而不用直接使用类名来调用父类。

如果派生类内显式定义了构造函数,那么构造函数内部必须使用super()调用父类,否则会产生错误。如果构造函数没有被显式定义,class会默认隐式定义一个构造函数,并且构造函数内部使用super()调用父类,同时传入生成class实例时的所有参数。例如,以下两个class是完全等价的:

class Square extends Rectangle {
    //constructor没有被显式定义
}

// 等价于
class Square extends Rectangle {
    constructor(...args) {
        super(...args);
    }
}

上述代码中的第二种写法表示的是构造函数未被显式定义时的行为。所有的参数按顺序被传入父类的构造函数。笔者建议始终显式定义构造函数,以保证参数的正确性。

使用super()是需要注意以下几点

  1. super()只能在派生类中使用,否则会产生错误;
  2. super()必须在操作this之前使用。因为super()的作用便是初始化this的指向,如果在super()之前操作this会产生错误;
  3. 构造函数中不使用super()的唯一场景是返回一个Object。

Class方法

派生类中定义的方法会覆盖父类中的同名方法。例如,派生类Square中定义了getArea()方法:

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }

    // override and shadow Rectangle.prototype.getArea()
    getArea() {
        return this.length * this.length;
    }
}

上述代码中,派生类Square的定义了方法getArea(),Square的实例便不再调用Rectangle.prototype.getArea()。当然,你仍然可以使用super.getArea()间接调用父类的方法,如下:

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }

    // override, shadow, and call Rectangle.prototype.getArea()
    getArea() {
        return super.getArea();
    }
}

Class方法没有内部属性[[Construct]],不能被new调用。如下:

// throws an error
var x = new Square.prototype.getArea();

正是由于class方法不可被new调用,减少了被错误使用导致的意外状况。

与Object字面量类似,class方法名可以使用方括号动态运算。如下:

let methodName = "getArea";
class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }

    // override, shadow, and call Rectangle.prototype.getArea()
    [methodName]() {
        return super.getArea();
    }
}

上述代码与前例等价。唯一的区别便是getArea()的方法名是通过方括号运算得到的。

静态成员

派生类中仍然可以使用其父类的静态成员。如下:

class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
    getArea() {
        return this.length * this.width;
    }
    static create(length, width) {
        return new Rectangle(length, width);
    }
}

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }
}

var rect = Square.create(3, 4);

console.log(rect instanceof Rectangle);     // true
console.log(rect.getArea());                // 12
console.log(rect instanceof Square);        // false

上述代码中,Rectangle有一个静态方法create()。派生类可以调用Square.create(),但是功能等价于Rectangle.create()

动态派生类

派生类强大的功能之一便是可以通过表达式动态生成派生类。extends可以用于任何表达式,只要表达式可以生成一个具有[[Construct]]和prototype属性的函数,就可以生成一个派生类。例如:

function Rectangle(length, width) {
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function() {
    return this.length * this.width;
};

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }
}

var x = new Square(3);
console.log(x.getArea());               // 9
console.log(x instanceof Rectangle);    // true

上述代码中的Rectangle是ES5规范的常规函数,而Square是一个类。由于Rectangle具备[[Construct]]和prototype属性,Square类可以直接继承它。

extends语法的动态性可以为很多强大的功能提供理论基础。比如动态生成继承对象:

function Rectangle(length, width) {
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function() {
    return this.length * this.width;
};

function getBase() {
    return Rectangle;
}

class Square extends getBase() {
    constructor(length) {
        super(length, length);
    }
}

var x = new Square(3);
console.log(x.getArea());               // 9
console.log(x instanceof Rectangle);    // true

上述代码功能与前例等价。getBase()函数在class声明语句中被执行。开发者可以继续增强getBase()函数的动态性,以产生不同的被继承对象。比如,我们可以使用mixin模式:

let SerializableMixin = {
    serialize() {
        return JSON.stringify(this);
    }
};

let AreaMixin = {
    getArea() {
        return this.length * this.width;
    }
};

function mixin(...mixins) {
    var base = function() {};
    Object.assign(base.prototype, ...mixins);
    return base;
}

class Square extends mixin(AreaMixin, SerializableMixin) {
    constructor(length) {
        super();
        this.length = length;
        this.width = length;
    }
}

var x = new Square(3);
console.log(x.getArea());               // 9
console.log(x.serialize());             // "{"length":3,"width":3}"

上述代码中的mixin()函数接受任意数目的参数,将这些参数作为扩展属性赋值给base.prototype,并返回base函数以使extends语法生效。需要注意的是,你仍然需要再显式定义的构造函数内调用super()。

Square的实例x同时具备AreaMixin的getArea()方法和SerializableMixin的serialize方法。

虽然extends可以用于任意的表达式,但并非所有的表达式都能够产生一个合法的class。以下表达式会产生错误:

  • null
  • 生成器表达式(第八章会详细讲述)

以上表达式生成的class不能被创建实例,否则会抛出错误。

内置对象的继承

一直以来,开发者都希望能够继承JavaScript数组并且自定义特殊的数组类型。然而在ES5及其早期版本中并不支持这种需求:

// 内置数组对象的行为
var colors = [];
colors[0] = "red";
console.log(colors.length);         // 1

colors.length = 0;
console.log(colors[0]);             // undefined

//ES5环境中尝试继承内置数组对象
function MyArray() {
    Array.apply(this, arguments);
}

MyArray.prototype = Object.create(Array.prototype, {
    constructor: {
        value: MyArray,
        writable: true,
        configurable: true,
        enumerable: true
    }
});

var colors = new MyArray();
colors[0] = "red";
console.log(colors.length);         // 0

colors.length = 0;
console.log(colors[0]);             // "red"

上述代码是JavaScript实现继承的经典方式,但是最终得到的结果并未达到预期。length属性以及枚举属性的行为与内置数组对象的行为并不相同,这是由于不论是Array.apply(),还是通过扩展prototype,派生类型的属性修改并未映射到基础类型。

译者注: 也就是说,修改colors.length并未改变内置数组类型的length。实际上,本例中的MyArray并非数组,而是一个类似于arguments的类数组对象

ES6引入Class的目标之一,便是支持内置对象的继承。class的继承模型与ES5经典继承模型有以下几点区别:

  1. ES5经典继承模型中,this的由派生类型(如本例的MyArray)初始化,然后通过Array.apply()调用基础类型(Array)的构造函数。也就是说,this最初是MyArray的一个实例,随后被赋予了基础类型Array的属性。
  2. ES6的class继承模型中,this由基础类(Array)初始化,然后被派生类(MyArray)的构造函数修正。也就是说,this拥有基础类的所有属性和功能。

以下的class继承可以实现自定义数组类型的需求:

class MyArray extends Array {
    // ...
}

var colors = new MyArray();
colors[0] = "red";
console.log(colors.length);         // 1

colors.length = 0;
console.log(colors[0]);             // undefined

上述代码中的MyArray继承自内置数组对象Array,与Array的行为完全一致。枚举属性与length属性互相影响,改变length属性的同时,枚举属性被更新。

另外,MyArray也继承了Array的静态成员,可以直接使用:

class MyArray extends Array {
    // ...
}

var colors = MyArray.of(["red", "green", "blue"]);
console.log(colors instanceof MyArray);     // true

上述代码中的静态方法MyArray.of()与Array.of()的行为一致,它创建了一个MyArray的实例而不是Array的实例。这是内置对象的静态方法与常规对象静态方法的不同之处。

译者注:请注意内置对象与常规对象的派生类中,静态成员表现的区别。

JavaScript的所有内置对象都支持class继承,并且派生类的行为与内置对象完全一致。

new.target

第二章里介绍了new.target与函数调用方式的关系。new.target也可以在class构造函数内使用,用来判断class的执行方式。这种场景下,new.target相当于class的构造函数,如下:

class Rectangle {
    constructor(length, width) {
        console.log(new.target === Rectangle);
        this.length = length;
        this.width = width;
    }
}

// new.target is Rectangle
var obj = new Rectangle(3, 4);      // outputs true

译者注:要理解“new.target相当于class的构造函数”这句话,首先要理解class本质上是一个构造函数。根据第二章的讲诉,使用new调用构造函数时,new.target的取值是构造函数的函数名。

上述代码中,执行new Rectangle(3, 4)时,new.target等于Rectangle。Class本质上是一个特殊的构造函数,它只能被new调用,所以new.target始终在class的构造函数内被定义。不同的场景下,new.target的取值也不同:

class Rectangle {
    constructor(length, width) {
        console.log(new.target === Rectangle);
        this.length = length;
        this.width = width;
    }
}

class Square extends Rectangle {
    constructor(length) {
        super(length, length)
    }
}

// new.target等于Square
var obj = new Square(3);      // 输出false

上述代码中创建Square实例时,Square类调用Rectangle的构造函数,所以Rectangle构造函数内的new.target等于Square。这种机制可以支持构造函数根据调用方式的不同,改变自身的行为模式。比如,利用new.target的工作原理可以创建抽象类(即不能被直接实例化的类):

// 抽象类
class Shape {
    constructor() {
        if (new.target === Shape) {
            throw new Error("This class cannot be instantiated directly.")
        }
    }
}

class Rectangle extends Shape {
    constructor(length, width) {
        super();
        this.length = length;
        this.width = width;
    }
}

var x = new Shape();                // throws error

var y = new Rectangle(3, 4);        // no error
console.log(y instanceof Shape);    // true

上述代码中,new Shape()会抛出错误,因为Shape类的构造函数不允许new.target等于Shape。抽象类Shape不能被实例化,但是可以作为基类由派生类继承。

总结

ES6制订了class的正式规范,使JavaScript语言的编程思想更加接近其他面向对象语言。Class并不仅仅是ES5经典继承模式的语法规范,还增加了一系列强大的新功能。

Class机制建立在原型继承的基础上,非静态方法被赋予构造函数的prototype,静态方法直接赋予构造函数本身。Class的所有方法都是不可枚举的,这一点与内置对象的属性行为是一致的。另外,class只能作为构造函数使用,也就是只能被new调用,而不能作为常规函数执行。

Class继承机制允许从class、函数,甚至表达式生成派生类。这种机制可以提供多种途径和模式来创建一个新的class。并且,继承机制同样适用于内置对象(比如Array)。

Class被执行的方式不同,class构造函数内的new.target的取值也不同,利用这个机制可以满足一些特殊的需求。比如创建一个不能被实例化但是可以被继承的抽象类。

总之,class是JavaScript语言非常重要的模块,它提供了更加功能化的机制以及更加简洁的语法,使自定义类型的创建过程更加安全统一。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

你不知道的javaScript笔记(3)

对象 对象可以通过两种形式定义: 声明形式和构造形式 声明形式语法: var myObj = {key:value} 构造形式语法: var myObj = n...

1835
来自专栏猿学

猿学-深入理解Java中的反射机制

JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性;这种动态获取信息以及动态调用对...

330
来自专栏coding for love

JS原生引用类型解析2-Array类型

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1142
来自专栏锦小年的博客

python学习笔记2.4-数据结构之列表和元组

python语言中包含的数据结构比较简单,除了简单的变量以外,还有列表(元组)、字典、集合。对于数据结构的操作一般包含四种:增、删、查、改。本文主要介绍列表(l...

1919
来自专栏有趣的Python

6-Java基础语法-数组之一维数组

局部变量和数组的默认值问题: 局部变量是没有默认值的,如果没有初始化,是内存中的随机值。而数组是有默认值的0的,因为数组本身是对象。

1343
来自专栏你不就像风一样

深入理解Java中的反射机制

JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性;这种动态获取信息以及动态调用对...

842
来自专栏专注 Java 基础分享

反射的基本原理

1523
来自专栏微信公众号:Java团长

Java基础之反射(非常重要)

(使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码))

933
来自专栏老马说编程

(84) 反射 / 计算机程序的思维逻辑

上节介绍完了并发,从本节开始,我们来探讨Java中的一些动态特性,包括反射、类加载器、注解和动态代理等。利用这些特性,可以以优雅的方式实现一些灵活和通用的功能,...

2418
来自专栏前端知识分享

第196天:js---调用函数的五种方式

1122

扫码关注云+社区