es6中的class

546669204 發(fā)布于2019-08-23 11:42 / 1421人閱讀

摘要：和大多數(shù)瀏覽器的實(shí)現(xiàn)中，每一個對象都有屬性除外，指向?qū)?yīng)的構(gòu)造函數(shù)的屬性。作為構(gòu)造函數(shù)的語法糖，同時有屬性和屬性，因為存在兩條繼承鏈。

前言

es6的class其實(shí)是構(gòu)造函數(shù)的語法糖，但是又有區(qū)別，下面來詳細(xì)分析下class

定義

先來看下class的定義的代碼

   class Point{
     constructor(){}
     toString(){}
   }
   var p = new Point()
   p.constructor === Point.prototype.contructor//true
   Object.keys(Point.prototype)//[]
   Object.getOwnPropertyNames(Point.prototype)//["constructor","toString"]

區(qū)別

在類的實(shí)例上調(diào)用方法，就是調(diào)用類的原型上的方法,但是類內(nèi)部的方法是不可枚舉的，構(gòu)造函數(shù)的方法是可枚舉的（是否可被for...in遍歷，object.keys）,構(gòu)造函數(shù)可以遍歷除contructor之外的方法

constructor是類默認(rèn)的方法，通過new生成實(shí)例時自動調(diào)用該方法，如果沒有被顯示定義，這個方法會被自動創(chuàng)建。

類只能通過new生成實(shí)例對象，如果像直接調(diào)用class會報錯。

類的所有實(shí)例共享一個原型對象
p2.__proto__ === p1.__proto__;//true
這也就意味著可以通過實(shí)例的__proto__屬性為class添加方法，不推薦使用，因為會影響到其他實(shí)例

class不存在變量提升，這個和繼承有關(guān)，必須保證子類在父類之后定義

類和模塊內(nèi)部默認(rèn)都是使用嚴(yán)格模式

class可以自定義原生數(shù)據(jù)結(jié)構(gòu)（Array,String等）的子類，這是es5無法做到的，因為es5是先新建子類的this，再將父類的屬性添加到子類上，由于父類的內(nèi)部屬性子類無法獲取，導(dǎo)致無法繼承原生的構(gòu)造函數(shù)

繼承

子類必須在constructor中調(diào)用super方法，否則新建實(shí)例會報錯，因為子類沒有自己的this，而是繼承了父類的this,這和es5中的繼承不一樣，
因為es5中的繼承是先創(chuàng)造子類的實(shí)例對象this，再將父類的方法添加到this上（parent.call(this)）,es6中是先繼承父類的實(shí)例對象this，然后再用子類的構(gòu)造函數(shù)修改this。如果子類沒有定義constructor，那么這個方法會被默認(rèn)添加。
在子類的構(gòu)造函數(shù)中，只有調(diào)用super關(guān)鍵字之后，才可使用this關(guān)鍵字，否則會報錯，因為子類實(shí)例的構(gòu)建基于對父類實(shí)例的加工，只有super方法才能返回父類的實(shí)例。

prototype和__proto__
大多數(shù)瀏覽器的es5實(shí)現(xiàn)中，每一個對象都有__proto__屬性（IE8除外），指向?qū)?yīng)的構(gòu)造函數(shù)的prototype屬性。class作為構(gòu)造函數(shù)的語法糖，同時有prototype屬性和__proto__屬性，因為存在兩條繼承鏈。

子類的__proto__屬性表示構(gòu)造函數(shù)的繼承，總是指向父類

子類prototype屬性的__proto__屬性表示方法的繼承，總是指向父類的prototype屬性

class的靜態(tài)方法

如果在一個方法前加上static關(guān)鍵字，就表示該方法不會被實(shí)例繼承，而是直接通過類調(diào)用，成為‘靜態(tài)方法’。
看下代碼

class Foo{
  static classMethod(){}
}
Foo.classMethod();
class Bar extends Foo(){
   static classMethod(){
       return super.classMethod()
   }
}
Bar.classMethod();

上面Foo類有靜態(tài)方法classMethod，只能通過Foo.classMethod調(diào)用，不可通過實(shí)例調(diào)用，否則會報錯，父類的靜態(tài)方法可被子類繼承。

class的靜態(tài)屬性

靜態(tài)屬性是指class本身的屬性，即class.propname，而不是定義在實(shí)例對象（this）上的屬性。