初识ES6 class类

class类的简单理解

其实，es6的class类可以看做一个语法糖，他的绝大部分功能都能用es5做到，新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。

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);
console.log(p.toString()) //3

• 上面的es5构造函数用class改写就是下面这样

// 定义类的方法时，前面不需要加function保留字，方法之间也不要加逗号，加了会报错
class Point {
// constructor是一个构造函数用来接收参数。如果没有参数的话，可以不写，但是浏览器会默认加上
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
  toString(){
   return this.x + this.y;
  }
}
var p = new Point(1, 2)
console.log(p.toString()) //3

1. 类的继承

• 通过super关键字进行

class Child extends Point{
    constructor(name){
        // 可以继承并修改父类的实例属性 且一定要放在this之前，传参就会修改父类的属性
        super()
        this.name = name
    }
}

2. 类的静态方法

• 通过static关键字定义 且只能在类上使用（不能在实例上使用）

class Point{
    constructor(name){
        // 可以继承并修改父类的实例属性 且一定要放在this之前
        super()
        this.name = name
    }
    // 静态方法
    static tell(){
       console.log(this.name)
    }
}

3. 类的静态属性

• 静态属性跟定义静态方法不一样，没有关键字，但是也只能在类上使用

class Point(){
  
}
Point.type = 'class'

4. 类的getter和setter

• getter和setter其实是一个很难理解的概念，可以理解为就是对象中的get和set

 class Point{
    constructor(name){
        this.name = name
    }
    // 这是一个属性 不是一个方法(不要理解错了)
    get getName(){
        return this.name
    }
    // 如果两个名字一样 调用的时候会自己判断用哪个属性
    set getName(val){
        this.name = val
    }
}
let instance = new Point('桃子')
// 触发getter
console.log(instance.name)
// 触发setter
console.log(instance.name = '阿狸')

参考阮一峰大神的《ES6标准入门》，部分文字已做引用处理。