ES6學習總結（三）

不一樣於其餘面嚮對象語言，ES6之前的JavaScript中中沒有class類的概念，主要是經過原型的方式來實現繼承，JavaScript中引入了原型鏈，而且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另外一個對象的方法和屬性，JavaScript中原型繼承的關鍵是將一個實例的原型對象指向另外一個實例，所以前一個實例即可以得到後一個實例原型對象的屬性和方法，例如：

function Father(){
  this.age=30;
}
Father.prototype.work=function(){
  return "hard work";
}
function Child(){
  this.age=10;
}
//將child的原型指向Father構造函數的實例
Child.prototype=new Father();

Child.prototype.play=function(){
  return "play";                
}

var child=new Child();

console.log(child.play()) // play
console.log(child.work()) // work

看完了上面的JavaScript典型的原型繼承，要回到ES6上面了，ES6中引入了類class 的概念，其實是語法糖，不少都與構造函數相關，先看個例子：

// var Man =class{ 這麼寫也是能夠的
class Man{
  constructor(age) {
    this.age=age;
  }
  grow(){
    return this.age+1;
  }
}
var cala=new Man(22);
console.log(cala.grow()); // 23

上面是一個簡單的ES6寫class的例子，能夠看到的是，用class關鍵字定義類，裏面的constructor指的是構造函數，在構造函數中定義私有屬性，而後接着定義了一個grow方法，最後經過new關鍵字來實例化一個對象

在JavaScript中定義類和定義函數很類似，不過二者仍是有些不一樣，函數聲明能夠提高，可是類聲明則不行

var cala=new Man();
class Man{} // Man is not defined

ES6中的類使用 extends建立子類，每一個類裏面都會有一個constructor構造函數，實例化的時候必須用new關鍵字來調用類的構造函數，一個構造函數能夠經過super來調用另外一個構造函數

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

class Cala extends Man{
  constructor(age){
    super(age);
  }
  grow(){
    return this.age+1;
  }
}

var cala=new Cala(22);
console.log(cala.grow()) // 23

ES6中的class支持類支持在原型上定義訪問器get，set屬性

class Man{
  constructor(age) {
    this.age=age;
  }
  get getAge(){
    return this.age;
  }
  set setAge(age){
    this.age=age;
  }
}
var cala=new Man(22);
console.log(cala.getAge) // 22

cala.setAge=33;
console.log(cala.getAge) // 33

ES6的class中支持靜態方法，用關鍵字static來定義，熟悉面向類與對象的童鞋大多知道，靜態方法屬於類自己，是經過類來調用，不能經過實例來調用

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

console.log(Man.work()); // hard work

var cala=new Man(22);
console.log(cala.work()); // cala.work is not a function

結合上面JavaScript典型的原型繼承和下面的ES6的類，能夠看出在使用new關鍵字實例化對象的時候，其實是調用了prototype上的構造函數，ES6的class本質就是語法糖，對於傳統的寫法來講，也是能夠在ES6中適用的，類上的方法其實也就至關於定義在prototype上面