es6中的 class

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

class 的简单介绍

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

class 的定义

1
2
3
4
5
6
7
8
9
10
11

class Point {
constructor(x, y) {
    this.x = x;
    this.y = y;
}

toString() {
    return '(' + this.x + ', ' + this.y + ')';
}
}

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Point，对应 ES6 的Point类的构造方法。

class 的使用

1
2
3
4
5
6
7
8
9

class Bar {
doStuff() {
    console.log('stuff');
}
}

var b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

constructor 方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

1
2
3
4
5
6
7
class Point {
}

// 等同于
class Point {
constructor() {}
}

constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。

1
2
3
4
5
6
7
8
class Foo {
constructor() {
    return Object.create(null);
}
}

new Foo() instanceof Foo
// false

上面代码中，constructor函数返回一个全新的对象，结果导致实例对象不是Foo类的实例。

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型.通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型.

类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

1
2
3
4
5
6
7
8
class Foo {
constructor() {
    return Object.create(null);
}
}

Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'

取值函数（getter）和存值函数（setter）

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MyClass {
constructor() {
    // ...
}
get prop() {
    return 'getter';
}
set prop(value) {
    console.log('setter: '+value);
}
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

上面代码中，prop属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。

存值函数和取值函数是设置在属性的 Descriptor 对象上的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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"
);

"get" in descriptor  // true
"set" in descriptor  // true

上面代码中，存值函数和取值函数是定义在html属性的描述对象上面，这与 ES5 完全一致。

class 的继承

简介

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

1
2
3
4
5
6
7
8
9
10
class ColorPoint extends Point {
constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
}

toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}

上面代码中，constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

1
2
3
4
5
6
7
8
9
10


class Point { /* ... */ }

class ColorPoint extends Point {
constructor() {
}
}

let cp = new ColorPoint(); // ReferenceError

上面代码中，ColorPoint继承了父类Point，但是它的构造函数没有调用super方法，导致新建实例时报错。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。

1
2
3
4
5
6
7
8
9
class ColorPoint extends Point {
}

// 等同于
class ColorPoint extends Point {
constructor(...args) {
    super(...args);
}
}

另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Point {
constructor(x, y) {
    this.x = x;
    this.y = y;
}
}

class ColorPoint extends Point {
constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
}
}

上面代码中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的。

下面是生成子类实例的代码。

1
2
3
4
5

let cp = new ColorPoint(25, 8, 'green');

cp instanceof ColorPoint // true
cp instanceof Point // true

上面代码中，实例对象cp同时是ColorPoint和Point两个类的实例，这与 ES5 的行为完全一致。

Object.getPrototypeOf()

Object.getPrototypeOf方法可以用来从子类上获取父类。

Object.getPrototypeOf(ColorPoint) === Point
// true

因此，可以使用这个方法判断，一个类是否继承了另一个类。

super 关键字

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

  • 第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。
    1
    2
    3
    4
    5
    6
    7
        class A {}

        class B extends A {
        constructor() {
            super();
        }
    }
    上面代码中，子类B的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。

注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。

1
2
3
4
5
6
7
8
9
10
11
12
class A {
constructor() {
    console.log(new.target.name);
}
}
class B extends A {
constructor() {
    super();
}
}
new A() // A
new B() // B

上面代码中，new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。

作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

1
2
3
4
5
6
7
class A {}

class B extends A {
m() {
    super(); // 报错
}
}

上面代码中，super()用在B类的m方法之中，就会造成语法错误。

  • 第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class A {
    p() {
        return 2;
    }
    }

    class B extends A {
    constructor() {
        super();
        console.log(super.p()); // 2
    }
    }

    let b = new B();
    上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。

这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class A {
constructor() {
    this.p = 2;
}
}

class B extends A {
get m() {
    return super.p;
}
}

let b = new B();
b.m // undefined

上面代码中，p是父类A实例的属性，super.p就引用不到它。

如果属性定义在父类的原型对象上，super就可以取到。

1
2
3
4
5
6
7
8
9
10
11
class A {}
A.prototype.x = 2;

class B extends A {
constructor() {
    super();
    console.log(super.x) // 2
}
}

let b = new B();

上面代码中，属性x是定义在A.prototype上面的，所以super.x可以取到它的值。

ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class A {
constructor() {
    this.x = 1;
}
print() {
    console.log(this.x);
}
}

class B extends A {
constructor() {
    super();
    this.x = 2;
}
m() {
    super.print();
}
}

let b = new B();
b.m() // 2

上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()内部的this指向子类B的实例，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)。

由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class A {
constructor() {
    this.x = 1;
}
}

class B extends A {
constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
}
}

let b = new B();

上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。

如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。

如果在一个方法前， 加上static关键字， 就表示该方法不会被实例继承， 而是直接通过类来调用， 这就称为“ 静态方法”。父类的静态方法， 可以被子类继承。
例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
      //非静态方法,需要实例化来调用方法
      class Foo {
          classMethod() {
              return 'hello';
          }
      }
      class Bar extends Foo {
          classMethod() {
              return super.classMethod() + ', too';
          }
      }
      let bar= new Bar()

      bar.classMethod(); // hello,too
      Bar.classMethod();//TypeError: Bar.classMethod is not a function



      //静态方法,直接从 class 调用方法,实例化以后无法调用方法
      class Foo {
   static classMethod() {
return 'hello';
       }
      }
      class Bar extends Foo {
          static classMethod() {
              return super.classMethod() + ', too';
          }
      }
      Bar.classMethod(); //hello,too

      let bar = new Bar;
      bar.classMethod(); //TypeError: bar.classMethod is not a function

thank u !