ES6知识点-class类

Posted 2021-03-23 xuzhengguo

3.7Class类

3.7.1class 声明

• ES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

• ES6 的class可以看作只是一个语法糖（指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。）

• Class不存在变量提升（hoist）

  class Person{
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }       // 方法之间不加逗号隔开,否则报错     
    sum(){        // 方法前面不用加function
        var sum=this.x+this.y;
      return sum
    }
  }

• 方法之间不加逗号隔开,否则报错

• 里面有一个constructor方法，这就是构造方法。通过new命令生成对象实例时，自动调用该方法。而this关键字则代表实例对象。

• 构造函数的prototype属性，在ES6的“类”上面继续存在。所有的方法还是在prototype属性上。

  类的方法内部如果含有 this，它默认指向类的实例。

3.7.2类的实例对象

• 使用new命令，生成类的实例对象。
• 类的所有实例共享一个原型对象
• 可以通过实例的 proto 属性为Class添加方法

// 报错
var p= Person(2, 3);
// 正确
var p= new Person(2, 3);

//类的所有实例共享一个原型对象
var p1 = new Person(2,3);
var p2 = new Person(3,2);
p1.__proto__ === p2.__proto__         // true

//可以通过实例的 __proto__ 属性为Class添加方法
class Person{
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }       
  sum(){        
      var sum=this.x+this.y;
      return sum
  }
}
p1= new Person()
p1.__proto__.newF= function () { return '这里是新创建的方法' };        // 给类添加一个新方法 newF
console.log(  p1.newF() )        // 这里是新创建的方法

3.7.3class的继承

• Class之间可以通过extends关键字实现继承

• 继承父类后要添加自己的属性和方法

• 子类必须在constructor方法中调用super方法，且必须出现在 this 之前。否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。

  class childPerson extends Person{}
  //该类通过extends关键字，继承了Person类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Person类
  
  //继承父类后添加自己的属性和方法
  class childPerson extends Person {
    constructor(x, y, color) {
      super(x, y);         // 调用父类的constructor(x, y)
      this.color = color;
    }
    toString() {
      return this.color + ' ' + super.toString();         // 调用父类的toString()
    }
  }

3.7.4super关键字

• 既可以当作函数使用，也可以当作对象使用。

  • 第一种情况，super作为函数调用时，代表父类的构造函数。
    • ES6 要求，子类的构造函数必须执行一次super函数。
  • 第二种情况，super作为对象时，指向父类的原型对象

  class A {}
  class B extends A {
    constructor() {        // 构造函数
      super();    // 作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。
    }
  }
  
  class B extends A {
    constructor() {
      super();
      console.log(super.p());     // 作为对象，指向父类的p方法；由于super指向父类的原型对象，所以定义在父类实例上的方法或属性是无法通过super调用的。
        //说简单点，就是只能调用静态方法，不需要实例化的方法。
    }
  }

3.7.5class静态方法

• 类相当于实例的原型，所有在类中定义的方法都会被实例继承。

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

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

• 静态方法也是可以从super对象上调用的。

  class Foo {
    static classMethod() {
      return 'hello';
    }
  }
  Foo.classMethod()         // 'hello'           直接类调用
  var foo = new Foo();      // 创建一个实例
  foo.classMethod()        // 报错内容: foo.classMethod is not a function        实例调用报错