淺析ES6新特性 —— Class

前言

類語法是ES6中新增的一個亮點特性，下文簡單對類的使用進行簡要說明（僅做爲我的層面的理解）

js傳統模式實例化對象方法——prototype

在JavaScript中，實例化一個對象的傳統使用方法是經過構造函數。
以下示例：

function Count(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
}
//構造函數
Count.prototype.number = function(){
    console.log(this.num1,this.num2);
}
//實例化對象
var count = new Count(1,2);
count.number(1,3);

ES6新特性——使用Class（類）實例化對象

ES6引入了Class(類)這一律念，能夠經過class關鍵字，定義類。
以下示例：

//定義類
class Count{

    //構造方法
    constructor(x,y){
        //this表示實例對象
        this.x = x;
        this.y = y;
    }
    
    //非靜態方法，能夠直接用實例.方法名來訪問
    sum(x,y){
        let sum = x+y;
        console.log('sum is :',sum)
    }
    
    //靜態方法，須要經過構造器或者類才能訪問的到
    static sub(x,y){
        let sub = x - y;
        console.log('sub is :',sub);
    }
}

var count = new Count();

//非靜態方法，能夠直接訪問
count.sum(1,2);                         // sum is :3

//靜態方法：
//（1）實例對象.constructor.方法名
count.constructor.sub(5,1);             // sub is :4

//（2）類名.方法名
Count.sub(5,1);                         // sub is :4

count.hasOwnProperty('x');              // 定義在this上，是實例對象自身的屬性true
count.hasOwnProperty('y');              // true
count.hasOwnProperty('sum');            // 定義在原型對象上，false
count._proto_.hasOwnProperty('sum');    // true

經過以上的小實例，總結下面幾點:

• 定義「類」的方法時，不用加function關鍵字。
• 方法之間不要加逗號，加了會報錯。
• 類中必需要有constructor方法，若沒有顯示定義，則一個空的會被添加。
• 類必須使用new調用。不然報錯，這是類和構造函數的一個主要區別。
• 類中使用static關鍵字聲明的方法，須要經過構造函數constructor或者使用類名才能夠訪問的到。
• 靜態方法，實例對象不能直接訪問。可是父類的靜態方法，子類能夠繼承。
• 非靜態方法，能夠直接經過「實例對象.方法名」訪問。
• 實例自身的屬性，除非顯示定義在this對象上，不然都是定義在原型上（即class上）。

其實，ES6的類，能夠看做是構造函數的另一種寫法。<br/>

class B{}
var b = new B();
typeof B;               //`function`
typeof  B === B.prototype.constructor                   //true
typeof  b.constructor === B.prototype.constructor      //true

對比ES6和ES5，有如下相同點

• 類的數據類型就是函數，類自己就指向構造函數。
• 在類的實例上調用方法，就是調用原型上的方法。

再來看ES6與ES5的不一樣點

因爲類的方法都定義在prototype上面，那麼咱們可使用Object.assign方法給類一次添加多個方法。prototype的constructor方法，直接指向「類」自己，這和ES5的行爲是有區別的。另外，類內部全部定義的方法，都是不可枚舉的，而ES5中，prototype上的方法都是可枚舉的。
示例以下：

//ES5
function Test(){}
Test.prototype.log = function(){}
var test = new Test();

Object.keys(Test.prototype);    //列舉出給定對象自身可枚舉屬性(不包括原型上的屬性)   
//['log']

Object.getOwnPropertyNames(Test.prototype);      //列舉出給定對象全部自身屬性的名稱（包括不可枚舉屬性但不包括Symbol值做爲名稱的屬性）  
//['prototype','log']



//ES6
class Test2{
    toValue(){}
}
var test2 = new Test2();

Object.keys(Test2.prototype);
//[]

Object.getOwnPropertyNames(Test2.prototype);
//['constructor','toValue'];

Class的靜態方法

類中所定義的方法，都會被實例繼承，若是在一個方法前，加上 static關鍵字，那該靜態方法不會被實例繼承，而是直接經過類來調用的。

class Foo{
    static addMethod(){
        console.log(this);
        console.log('hello class');
        this.
    }
}

//直接經過類來調用
Foo.addMethod();        //Foo ,  hello class

//實例不會繼承靜態方法，因此調用會報錯
var foo = new Foo();
foo.addMethod();    //TypeError:foo.addMethod is not a function

注意：

• 若是static靜態方法包含this關鍵字，這個this指的是類，而不是實例。
• 靜態方法能夠與非靜態方法同名。
• 父類的靜態方法，能夠被子類繼承。
• 靜態方法能夠從super對象上調用。

待續……