Class类的使用及方法

由于本人对Class类的印象不是很深，在此整理一篇博文记录并与大家分享。

Class使用及定义

在js代码中我们经常使用构造函数生成实例对象：

function Obj(i, j) {
  this.i = i;
  this.j = j;
}
 
Point.prototype.toString = function () {
  return '(' + this.i + ', ' + this.j + ')';
};
var p = new Obj(1, 2);

这种写法与Java,c++差异巨大，ES6提供了接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过Class关键字，就可以定义类。

上面的代码用 ES6 的Class改写，就是如下代码

class Obj{
  //构造方法
  constructor(i, j) {
    this.i = i;
    this.j = j;
  }
 
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

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

静态方法（类的方法。加static）

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

StaticState 类的 staticMethod 方法前有 static 关键字，表明该方法是一个静态方法，可以直接在 StaticState 类上调用（StaticState.staticMethod()），而不是在 StaticState 类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

class StaticState{
    static staticMethod(){
        return 'hello'
    }
}
console.log(StaticState.staticMethod()) // 输出hello

var foo=new StaticState();
foo.staticMethod()
//TypeError: foo.staticMethod is not a function

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

class StaticState{
    static staticMethod(){
        this.baz()
    }
    static baz() {
        console.log('hello');
    }
    baz() {
        console.log('world');
    }
}
console.log(StaticState.staticMethod())

静态方法 staticMethod 调用了 this.baz，这里的 this 指的是 StaticState 类，而不是 StaticState 的实例，等同于调用 StaticState.baz。

静态属性（类的属性，加static）

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性法的前面，加上static关键字。

class MyClass {
  static myStaticProp = 42;
 
  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

实例属性

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。

class IncreasingCounter {
  constructor() {
    this.initial = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this.initial;
  }
  increment() {
    this.initial++;
  }
}

上面代码中，实例属性this.initial定义在constructor()方法里面。另一种写法是，这个属性也可以定义在类的最顶层，其他都不变。

class Counter {
  initial = 0;
  get value() {
    console.log('Getting the current value!');
    return this.initial;
  }
  increment() {
    this.initial++;
  }
}

实例方法

class A{
    a(){
        console.log("Hello World E!");
    }
}
var a=new A();
a.a()//输出Hello World E!

super

Class的继承子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

类的继承

• 继承就是子类拥有父类的各种属性和方法
• 那什么是类？这里的JS的类即是函数，能产生对象的东西就是类。