Class 的基本语法

类的由来

JavaScript 语言中，生成实例对象的传统方法是通过构造函数

function Point(x, y) {
  this.x = x;
  this.y = y;
}
​
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
​
var p = new Point(1, 2);

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
​
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

constructor 方法

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

class Point {
}
​
// 等同于
class Point {
  constructor() {}
}

类的实例

生成类的实例的写法，与 ES5 完全一样，也是使用new命令

class Point {
  // ...
}
​
// 报错
var point = Point(2, 3);
​
// 正确
var point = new Point(2, 3);

注意点

不存在提升

类不存在变量提升（hoist），这一点与 ES5 完全不同

Class属性与方法

### 实例方法

通过类的实例对象调用方法

```js
class People{
    say(){
        console.log("Hello");
    }
}
var p = new People();
p.say()
```

### 实例属性

实例属性指的是类的实例对象可调用的属性

```js
class People{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(this.name,this.age);
    }
}
var p = new People("iwen",20);
p.say()
console.log(p.name,p.age);
```

### 静态方法

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

```js
class Person {
    static classMethod() {
        console.log("Hello");
    }
}

Person.classMethod() // Hello

var p = new Person();
p.classMethod() // p.classMethod is not a function
```

> **温馨提示**
>
> 注意，如果静态方法包含`this`关键字，这个`this`指的是类，而不是实例。

```js
class People {
    static getSay() {
        this.say();
    }
    static say() {
        console.log('hello');
    }
    say() {
        console.log('world');
    }
}
People.getSay() // hello
```

### 静态属性

静态属性指的是 Class 本身的属性，即`Class.propName`

```js
class People{}
People.status = "等待"
console.log(People.status);
 

class People {
    static getSay() {
        this.say();
    }
    static say() {
        console.log('hello');
    }
    say() {
        console.log('world');
    }
}
People.getSay()

结果：//  hello

Class 的继承

### 基础用法

Class 可以通过`extends`关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多

```js
class Point {
}

class ColorPoint extends Point {
}
```

ES6 规定，子类必须在`constructor()`方法中调用`super()`，否则就会报错，这是因为子类自己的`this`对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用`super()`方法，子类就得不到自己的`this`对象

```js
class Point {
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    getPoint(){
        console.log(this.x,this.y);
    }
}
class ColorPoint extends Point {
    constructor(x,y,z){
        super(x,y)
        this.z = z;
    }
}
let cp = new ColorPoint(10,20,30)
cp.getPoint();
```