ES6 类

类相关知识点简述

类就是对象，this默认指向实例 (this是函数专有的)

constructor 构造函数用来实例构造公共属性的，constructor方法默认返回实例对象（即this），this默认指向实例，new时默认调用

静态方法 static

类的方法默认都会被实例继承，加上static既不会被实例继承，类直接调用，实例无法调用

class A {
    static classMethod() {
        return 'hello';
    }
}
A.classMethod();
console.log(A.classMethod());
// 'hello'
const a = new A();
a.classMethod();
// TypeError:

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

父类的方法，静态方法，都可以被子类继承

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

B.classMethod() // 'hello'

静态属性

写法是在实例属性的前面，加上static关键字。

继承

父类的属性和方法都能被继承

super （做函数调用）

子类的this必须通过父类来构造，子类构造器中调用super函数,代表父类的构造函数,就相当于在子类里调用父类构造器为子类生成this，super参数为啥，就会继承父类this上的该属性,如果不调用super方法，子类就得不到this对象

class A {
    constructor() {
        this.a = 89;
    }
    sum() {
        console.log(12431);
    }
}

class B extends A {
    // constructor参数为this上接受的属性名
    constructor(a, b, c) {
        super(a); // 父类帮助子类生成this，并继承A的a属性
        // this.a = a; // 也可以再定义a属性，会覆盖继承的a属性
        this.c = c; // 子类自己定义的属性
    }
    lb() {
        console.log(this.a, this.b, this.c);
    }
}
const xxx = new B(1, 2, 3);
xxx.lb(); // 89 undefined 3
xxx.sum(); // 12431

super （做对象调用）在普通方法中，this指向父类的原型对象； 在静态方法中，指向父类。

对象调用，就是相当于把父类的方法定义在子类里面，属于子类了，然后在子类里面调用，this指向为子类本身，而不是子类的实例。

普通方法 （super指向父类的原型对象）

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2 指向A.prototype
  }
}
let b = new B();

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

class A {
  constructor() {
    this.p = 2; // p是父类A实例的属性
  }
}
class B extends A {
  m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined

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

class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();

---

静态方法 （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

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

• 作为函数调用，代表父类的构造函数
• 作为对象调用，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。