详解ES6中的class

文章首发于我的博客前端

class

class是一个语法糖，其底层仍是经过 构造函数 去建立的。因此它的绝大部分功能，ES5 均可以作到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。git

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    return this.name;
}

const xiaoming = new Person('小明', 18);
console.log(xiaoming);
复制代码

上面代码用ES6的class实现，就是下面这样es6

class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    sayName() {
      return this.name;
    }
}
const xiaoming = new Person('小明', 18)
console.log(xiaoming);
// { name: '小明', age: 18 }

console.log((typeof Person));
// function
console.log(Person === Person.prototype.constructor);
// true
复制代码

constructor方法，这就是构造方法，this关键字表明实例对象。类的数据类型就是函数，类自己就指向构造函数。github

定义类的时候，前面不须要加 function, 并且方法之间不须要逗号分隔，加了会报错。编程

类的全部方法都定义在类的prototype属性上面。微信

class A {
    constructor() {}
    toString() {}
    toValue() {}
}
// 等同于
function A () {
    // constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};
复制代码

在类的实例上面调用方法，其实就是调用原型上的方法。markdown

let a = new A();
a.constructor === A.prototype.constructor // true
复制代码

constructor 方法

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

class A {
}

// 等同于
class A {
  constructor() {}
}
复制代码

constructor方法默认返回实例对象（即this），彻底能够指定返回另一个对象。oop

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

console.log((new A()) instanceof A);
// false
复制代码

类的实例

实例的属性除非显式定义在其自己（即定义在this对象上），不然都是定义在原型上（即定义在class上）。学习

注意：

class不存在变量提高

new A(); // ReferenceError
class A {}
复制代码

由于 ES6 不会把类的声明提高到代码头部。这种规定的缘由与继承有关，必须保证子类在父类以后定义。

{
  let A = class {};
  class B extends A {}
}
复制代码

上面的代码不会报错，由于 B继承 A的时候，A已经有了定义。可是，若是存在 class提高，上面代码就会报错，由于 class 会被提高到代码头部，而let命令是不提高的，因此致使 B 继承 A 的时候，Foo尚未定义。

this的指向类的方法内部若是含有this，它默认指向类的实例。可是，必须很是当心，一旦单独使用该方法，极可能报错。

静态方法

类至关于实例的原型，全部在类中定义的方法，都会被实例继承。若是在一个方法前，加上 static 关键字，就表示该方法不会被实例继承，而是直接经过类来调用，这就称为"静态方法"。

class A {
    static classMethod() {
        return 'hello';
    }
}
A.classMethod();
console.log(A.classMethod());
// 'hello'

const a = new A();
a.classMethod();
// TypeError: a.classMethod is not a function
复制代码

A 类的classMethod 方法前有 static关键字，代表这是一个静态方法，能够在 A 类上直接调用，而不是在实例上调用在实例a上调用静态方法，会抛出一个错误，表示不存在改方法。

若是静态方法包含this关键字，这个this指的是类，而不是实例。

class A {
    static classMethod() {
      this.baz();
    }
    static baz() {
      console.log('hello');
    }
    baz() {
      console.log('world');
    }
}
A.classMethod();
// hello
复制代码

静态方法classMethod调用了this.baz，这里的this指的是A类，而不是A的实例，等同于调用A.baz。另外，从这个例子还能够看出，静态方法能够与非静态方法重名。

父类的静态方法，能够被子类继承。

class A {
    static classMethod() {
        console.log('hello');
    }
}

class B extends A {}

B.classMethod() // 'hello'
复制代码

静态属性

静态属性指的是 Class 自己的属性，即Class.propName，而不是定义在实例对象（this）上的属性。写法是在实例属性的前面，加上static关键字。

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}
复制代码

继承

Class 能够经过extends关键字实现继承

class Animal {}
class Cat extends Animal { };
复制代码

上面代码中定义了一个 Cat 类，该类经过 extends关键字，继承了 Animal 类中全部的属性和方法。可是因为没有部署任何代码，因此这两个类彻底同样，等于复制了一个Animal类。下面，咱们在Cat内部加上代码。

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}
复制代码

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

子类必须在 constructor 方法中调用 super 方法，不然新建实例就会报错。这是由于子类本身的this对象，必须先经过父类的构造函数完成塑造，获得与父类一样的实例属性和方法，而后再对其进行加工，加上子类本身的实例属性和方法。若是不调用super方法，子类就得不到this对象。

class Animal { /* ... */ }

class Cat extends Animal {
  constructor() {
  }
}

let cp = new Cat();
// ReferenceError
复制代码

Cat 继承了父类 Animal，可是它的构造函数没有调用super方法，致使新建实例报错。

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

class Cat extends Animal {

}
// 等同于

class Cat extends Animal {
    constructor(...args) {
        super(...args);
    }
}
复制代码

另外一个须要注意的地方是，es5 的构造函数在调用父构造函数前能够访问 this, 但 es6 的构造函数在调用父构造函数(即 super)前不能访问 this。

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

class B extends A {
  constructor(x, y, name) {
    this.name = name; // ReferenceError
    super(x, y);
    this.name = name; // 正确
  }
}
复制代码

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

父类的静态方法，也会被子类继承。

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world
复制代码

super

super这个关键字，既能够看成函数使用，也能够看成对象使用

super做为函数调用

super做为函数调用时，表明父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}

class B extends A {
  constructor() {
    super();
  }
}
复制代码

子类B的构造函数之中的super()，表明调用父类的构造函数。这是必须的，不然 JavaScript 引擎会报错。

注意，super虽然表明了父类A的构造函数，可是返回的是子类B的实例，即super内部的this指的是B的实例，所以super()在这里至关于A.prototype.constructor.call(this)。

class A {
  constructor() {
    // new.target 指向正在执行的函数
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B
复制代码

在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。

super做为对象调用

在普通方法中，指向父类的原型对象； 在静态方法中，指向父类。

super对象在普通函数中调用

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调用的。

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就能够取到。

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能够取到它的值。

super对象在静态方法中调用

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

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

const child = new Child();
child.myMethod(2); // instance 2
复制代码

上面代码中，super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。

另外，在子类的静态方法中经过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。

class A {
  constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}

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

B.x = 3;
B.m() // 3
复制代码

上面代码中，静态方法B.m里面，super.print指向父类的静态方法。这个方法里面的this指向的是B，而不是B的实例。

总结

class是一个语法糖，其底层仍是经过 构造函数 去建立的。
类的全部方法都定义在类的prototype属性上面。
静态方法：在方法前加static，表示该方法不会被实例继承，而是直接经过类来调用。
静态属性：在属性前加static，指的是 Class 自己的属性，而不是定义在实例对象（this）上的属性。
es5 的构造函数在调用父构造函数前能够访问 this, 但 es6 的构造函数在调用父构造函数(即 super)前不能访问 this。
super
- 做为函数调用，表明父类的构造函数
- 做为对象调用，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

再来几道题检查一下

1. 下面代码输出什么

class Person {
  constructor(name) {
    this.name = name
  }
}

const member = new Person("John")
console.log(typeof member)
复制代码

答案：object

解析：类是构造函数的语法糖，若是用构造函数的方式来重写Person类则将是：

function Person() {
  this.name = name
}
复制代码

经过new来调用构造函数，将会生成构造函数Person的实例，对实例执行typeof关键字将返回"object"，上述状况打印出"object"。

2. 下面代码输出什么

class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor
    return this.newColor
  }

  constructor({ newColor = 'green' } = {}) {
    this.newColor = newColor
  }
}

const freddie = new Chameleon({ newColor: 'purple' })
freddie.colorChange('orange')
复制代码

答案：TypeError

解析： colorChange 是一个静态方法。静态方法被设计为只能被建立它们的构造器使用（也就是 Chameleon），而且不能传递给实例。由于 freddie 是一个实例，静态方法不能被实例使用，所以抛出了 TypeError 错误。

3.下面代码输出什么

class Person {
  constructor() {
    this.name = "Lydia"
  }
}

Person = class AnotherPerson {
  constructor() {
    this.name = "Sarah"
  }
}

const member = new Person()
console.log(member.name)
复制代码

答案："Sarah"

解析：咱们能够将类设置为等于其余类/函数构造函数。在这种状况下，咱们将Person设置为AnotherPerson。这个构造函数的名字是Sarah，因此新的Person实例member上的name属性是Sarah。

其余

最近发起了一个100天前端进阶计划，主要是深挖每一个知识点背后的原理，欢迎关注微信公众号「牧码的星星」，咱们一块儿学习，打卡100天。