ES6-class关键字

class 关键字

es6 新增了 class 关键字，这是 es6 的新语法，用来实现 es6 中面向对象编程；可以通过该关键字来定义类。

class不存在变量提升，所以需要先定义再使用。

ES5:

// 定义一个构造函数
function Person(name, age) {
    this.name = name
    this.age = age
}
// 创建 preson 实例
var person= new Person('小白', 16)
console.log(preson)

ES6:

语法：

class name {
 // ...
}

示例：

// 定义一个类
class Person {
    // 类的构造方法；不管写不写，类在 new 时都会被调用，构造方法默认返回 this
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 不需要使用 , 逗号
    // 类的一般方法，不需要使用 “function” 关键字；方法定义在实例对象的原型上
    say() {
        console.log()
    }
    // 定义静态属性
    // 静态属性
    static info = { name: '小白', age: 16 }  
}

let per = new Person('小白', 16)
// 打印实例
console.log(per)
// 不能通过实例访问静态属性
console.log(per.info)

constructor

constructor：类的构造方法，通过 new 生成对象实例时，会自动调用该方法。

• constructor 方法如果没有显式定义，会隐式生成一个 constructor 方法
• constructor 方法默认返回实例对象this，但是也可以指定 constructor 方法返回一个全新的对象，让返回的实例对象不是该类的实例
• constructor 外声明的属性都是定义在原型上的，可以称为原型属性

static

static 关键字可用于定义静态属性；静态属性可以通过类名直接访问；

实例属性：只能通过类的实例，来访问的属性 ；

静态方法挂载到构造器上，通过类名来访问；

实例方法挂载到原型上，每一个 new 的实例对象都可以使用这些实例方法

extends 关键字

extends关键字用来创建一个普通类或者内建对象的子类；该类继承了父类的所有属性和方法，父类的属性和方法默认添加到子类的原型上。

语法：

class ChildClass extends ParentClass { ... }

• ChildClass 子类
• PrentClass 父类

super

super 这个关键字，既可以当作函数使用，也可以当作对象使用。当作函数使用时，super 代表父类的构造函数，并在子类中执行 Parent.apply(this)，从而将父类实例对象的属性和方法，添加到子类的 this 上面

子类必须在其 constructor 方法中显示调用 super 方法；只有调用 super 之后，才可以使用 this 关键字（子类没有自己的 this 对象），否则会报错

super() 只能用在子类的 constructor 方法之中，用在其他地方同样会报错

示例：

// 创建一个类作为父类
class Parent {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  say() {
    console.log('say')
  }
  // 静态属性
  static info = {nick: '熊熊'}
}
// 通过 extends 创建子类
class Chinese extends Parent {
  constructor(name, age, gender) {
    // 调用 super 方法，这个 super 表示父类中 constructor 的引用
    // 将子类 constructor 的 name，age 通过 super 传给父类中的 name 和 age 属性
    super(name, age)
    this.gender = gender
  }
}
// 创建实例对象
let p1 = new Chinese('熊二', 18, 'boy')
// 打印实例
console.log(p1)

// 子类可以继承父类的所有，子类都能继承到
console.log(Chinese.info)