es6的class类与继承

2,461 阅读2分钟

什么是class类

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。 class 的本质是 function。 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

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

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

类声明

class Example {
    constructor(a) {
        this.a = a;
    }
}

注意:

不可重复声明。

类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。

类中方法不需要 function 关键字。

方法间不能加分号。

类的实例

生成类的实例的写法,与 ES5 完全一样,也是使用new命令。前面说过,如果忘记加上new,像函数那样调用Class,将会报错。


constructor 方法

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

class A {
}

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

上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor()方法。 constructor()方法默认返回实例对象(即this),完全可以指定返回另外一个对象。

class A {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

class继承

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

  • getter / setter
  • getter 不可单独出现
  • getter 与 setter 必须同级出现
  • extends 通过 extends 实现类的继承。
class Child extends Father { ... }
  • super 子类 constructor 方法中必须有 super ,且必须出现在 this 之前。

Mixin 模式的实现

Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。它的最简单实现如下。

const a = {
  a: 'a'
};
const b = {
  b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}