ES6总结 class

ES6 class 的本质就是原型继承，class只是语法糖 目的是让我们用更简洁明了的语法创建对象及处理相关的继承

javascript传统做法是当生成一个对象实例，需要定义构造函数，然后通过new的方式完成

function Person(name){
  this.name = name
}
Person.prototype.run = function () {
  console.log("run")
}
var per = new Person("Jack")

ES6的类，可以看作构造函数的另一种写法

class Person {
  //这是 class 中的构造器 用来接收参数, new 这个类的时候,会先执行构造器中的代码
  constructor(name){
    this.name = name // this 代表的是实例对象 
  }
  run(){
    console.log("run")
  }
}
var per = new Person("Jack")
// 类中定义的方法都是直接挂载到 prototype 上的
per.__proto__.hasOwnProperty('run') // true

ES6类的 静态属性/静态方法

class Person {
  constructor(name){
    this.name = name
  }
  // 定义 静态方法 使用 static 关键字修饰, 静态方法可以直接在类上调用
  static sing(){
    console.log("sing")
  }
}
// 定义静态属性 ---目前 只有这种写法可行 因为 ES6 明确规定 class 内部只有静态方法 没有静态属性, es7提案 可以使用static定义静态属性
Person.info = "info";

Person.info; // info
Person.sing(); // sing

ES6类的 extents 继承

// 父类
class Person {
  // name 是他们共有的属性,可以将name提取到同一个父类中
  constructor(name){
    this.name = name
  }
}

class Chinese extends Person{
}
var c = new Chinese("小明")
c // {name: "小明"}

class American extends Person{
}
var a = new American("Jack")
a // {name: "Jack"}

为子类添加独有的属性

class Person {
  constructor(name){
    this.name = name
  }
}

class Chinese extends Person{
  // super()是一个函数 相当于是父类的构造器, 在子类的构造器中一定要优先调用super()方法, 
  constructor(name, IDNumber){
    super(name) //将共有的属性传递给父类
    this.IDNumber = IDNumber //为自己添加独有的属性
  }
}

var c = new Chinese("小明","1321456******")
c // {name: "小明", IDNumber: "1321456******"}

class American extends Person{
}

var a = new American("Jack","2542456******")
a // American {name: "Jack"}

单例模式
创建多个实例时构造函数只执行一次

class DB {
  static getInstance() {
     // 首次调用时创建实例 new DB() 并挂载到 静态属性上, 第二次直接返回
    if (!DB.instance) {
      DB.instance = new DB();
    }
    return DB.instance;
  }
  constructor() {
    console.log('实例化会触发构造函数！')
    this.connect();
  }
  connect() {
    console.log('连接数据库！')
  }
  find() {
    console.log('查询数据库！')
  }
}

//d1会进入构造函数；实例化d2和d3则不会
var d1 = DB.getInstance();
var d2 = DB.getInstance();
var d3 = DB.getInstance();