es6中的class

546669204 發布于2019-08-23 11:42 / 1414人閱讀

摘要：和大多數瀏覽器的實現中，每一個對象都有屬性除外，指向對應的構造函數的屬性。作為構造函數的語法糖，同時有屬性和屬性，因為存在兩條繼承鏈。

前言

es6的class其實是構造函數的語法糖，但是又有區別，下面來詳細分析下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"]

區別

在類的實例上調用方法，就是調用類的原型上的方法,但是類內部的方法是不可枚舉的，構造函數的方法是可枚舉的（是否可被for...in遍歷，object.keys）,構造函數可以遍歷除contructor之外的方法

constructor是類默認的方法，通過new生成實例時自動調用該方法，如果沒有被顯示定義，這個方法會被自動創建。

類只能通過new生成實例對象，如果像直接調用class會報錯。

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

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

類和模塊內部默認都是使用嚴格模式

class可以自定義原生數據結構（Array,String等）的子類，這是es5無法做到的，因為es5是先新建子類的this，再將父類的屬性添加到子類上，由于父類的內部屬性子類無法獲取，導致無法繼承原生的構造函數

繼承

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

prototype和__proto__
大多數瀏覽器的es5實現中，每一個對象都有__proto__屬性（IE8除外），指向對應的構造函數的prototype屬性。class作為構造函數的語法糖，同時有prototype屬性和__proto__屬性，因為存在兩條繼承鏈。

子類的__proto__屬性表示構造函數的繼承，總是指向父類

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

class的靜態方法

如果在一個方法前加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類調用，成為‘靜態方法’。
看下代碼

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

上面Foo類有靜態方法classMethod，只能通過Foo.classMethod調用，不可通過實例調用，否則會報錯，父類的靜態方法可被子類繼承。

class的靜態屬性

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

class Foo{}
Foo.prop = 1;
Foo.prop //1

上面的方法可以讀、寫Foo類的靜態屬性prop,但是es6中規定，class中只有靜態方法，沒有靜態屬性

new.target屬性

es6為new命令引入了new.target屬性，返回new命令所作用的構造函數，如果構造函數不是通過new命令調用的，那么new.target會返回undefined，因此這個屬性可以判斷構造函數是如何被調用的

云服務器 GPU云服務器 es6中的class es6class es6中的promise ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97352.html

ES6 探秘：Classes

摘要：中的同名的實際上就是我們在的原型繼承中使用的構造函數，所以中的是對中的構造函數的一種包裝。我們發現，在中設定的屬性被放在的構造函數中，而方法則以鍵值對的形式傳入一個函數中。大家是不是對這種繼承模式似曾相識呢對了，這就是所謂的構造函數竊取。 ES6中增加了一些新特性，但從底層的角度來說，只是一些語法糖。但是就我個人來說，如果不了解這些語法糖的本質，是用不安心的。那我們要如何揭開這些語法糖...

caoym 2019-08-19 17:33 評論0 收藏0
ES6+ class中代碼的真正樣子

摘要：一用定義一個空類在中在中結論這個結果很清晰，原來中的類在中也是定義一個構造函數，然后返回出來。這篇文章用代碼對比的方式解釋ES6中的類如果用我們熟悉的ES5來看是什么樣的。一、用class定義一個空類在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 評論0 收藏0
ES6 class繼承與super關鍵詞深入探索

摘要：請看對應版本干了什么可知，相當于以前在構造函數里的行為。這種寫法會與上文中寫法有何區別我們在環境下運行一下，看看這兩種構造函數的有何區別打印結果打印結果結合上文中關于原型的論述，仔細品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統面向對象語言的class寫法，ES6發布之后，Babel迅速跟進，廣大開發者也很快喜歡上ES6帶...

jubincn 2019-08-26 10:58 評論0 收藏0
ES6學習總結（三）

摘要：不同于其他面向對象語言，以前的中中沒有類的概念，主要是通過原型的方式來實現繼承，中引入了原型鏈，并且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另一個對象的方法和屬性，中原型繼承的關鍵是將一個實例的原型對象指向另一個實例，因此前一不同于其他面向對象語言，ES6以前的JavaScript中中沒有class類的概念，主要是通過原型的方式來實現繼承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 評論0 收藏0
如何繼承Date對象？由一道題徹底弄懂JS繼承。

摘要：前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。倘若用的是中文搜索。所以最終的實例對象仍然能進行正常的原型鏈回溯，回溯到原本的所有原型方法這樣通過一個巧妙的欺騙技巧，就實現了完美的繼承。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 20180201更新：修改用詞描述，如組合寄生式改成寄生組合式，修改多處筆誤（感謝@Yao Ding的...

sunnyxd 2019-08-22 13:50 評論0 收藏0