JavaScript的es6的class使用

zgbgx 發布于2019-08-22 13:34 / 1892人閱讀

摘要：記錄的學習筆記，在回答別人的問題時發現自己的的理解誤差很大的在沒有帶來的的時候，我們編寫的時候很多時候會通過構造函數和原型鏈來添加方法屬性，實現的功能。而是看成是構造函數的寫法。等同于類的實例對象就像使用構造函數一樣使用命令來創建一個實例。

記錄class的學習筆記，在回答別人的問題時發現自己的的理解誤差很大

javascript的class

在沒有es6帶來的class的時候，我們編寫JavaScript的時候很多時候會通過構造函數和原型鏈來添加方法屬性，實現class的功能。

// Box是一個構造器
function Box(color) {
    this.type = "circle";
    this.color = color;
}

// 我們可以通過prototype的方式來加一條實例方法
Person.prototype.hello = function() {
    console.log("hello " + this.color);
}

// 對于私有屬性(Static method)，我們當然不能放在原型鏈上了。我們可以直接放在構造函數上面
Person.fn = function() {
    console.log("static");
};
//通過new來創建
var circle = new Box("red");

但是在es6的規范中，可以使用class語法，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class改寫，就是下面這樣。

class Box {
    constructor(color) {
        this.color = color;
        this.type="corcle"
    }
    hello() {
        console.log("hello " + this.name);
    }
    static fn() {
        console.log("static");
    };
}

上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。

需要注意：
1.class內的方法不需要 function關鍵字，直接把函數定義放進去了就可以了。
2.另外，方法之間不需要逗號分隔，加了會報錯。
3.class內部默認是嚴格模式，
需要注意這個和JavaScript中的對象寫法是不一樣的。而是看成是構造函數的寫法。而且目前使用typeof來判斷class的類型的時候返回的結果是function。

constructor方法

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

class Box {
}

// 等同于
class Box {
  constructor() {}
}

類的實例對象

就像使用構造函數一樣使用new命令來創建一個實例。如果忘記加上new，像函數那樣調用Class，將會報錯。

class Box{...}
var circle = new Box();

class的實例對象就和普通的對象類似，都是可以看過是通過new一個構造函數生成的，

這里有幾個問題需要注意：

class表達式就像函數表達式一樣，可以把class來賦值給變量，
class不存在變量提升，內部默認嚴格模式
暫時沒有標準的支持私有方法和私有屬性
this的指向是class實例對象，需要注意如果在外多帶帶調用方法時需要小心this的指向
Generator函數前面添加*即可

靜態屬性和方法 靜態方法

類相當于實例的原型，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態方法”。
注意，如果靜態方法包含this關鍵字，這個this指的是類，而不是實例。

靜態屬性

ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性。所以應該這樣書寫一個靜態屬性：

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

下面是錯誤的舉一反三：

// 以下兩種寫法目前都無效
class Foo {
  // 寫法一
  prop: 2

  // 寫法二
  static prop: 2
}

Foo.prop // undefined

新提案中的靜態屬性、實例屬性

不過目前已經有了新的提案來支持類的靜態屬性和實例屬性，

實例屬性

類的實例屬性可以用等式，寫入類的定義之中。

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}

靜態屬性

類的靜態屬性只要在上面的實例屬性寫法前面，加上static關鍵字就可以了。

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

GPU云服務器云服務器 es6中的class es6class javascript的使用 js標簽的class

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

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

[譯] 在你學習 React 之前必備的 JavaScript 基礎

摘要：前言在理想的狀態下，你可以在深入了解之前了解和開發的所有知識。繼承另一個類的類，通常稱為類或類，而正在擴展的類稱為類或類。這種類型的組件稱為無狀態功能組件。在你有足夠的信心構建用戶界面之后，最好學習。原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 寫在前面為了不浪費大家的寶貴時間，在開...

Chaz 2019-08-23 17:54 評論0 收藏0
ES6學習總結（三）

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

baoxl 2019-08-21 11:55 評論0 收藏0
JavaScript 五十問——從源碼分析 ES6 Class 的實現機制

摘要：防止類的構造函數以普通函數的方式調用。這個函數的主要作用是通過給類添加方法，其中將靜態方法添加到構造函數上，將非靜態的方法添加到構造函數的原型對象上。 Class是ES6中新加入的繼承機制，實際是Javascript關于原型繼承機制的語法糖，本質上是對原型繼承的封裝。本文將會討論：1、ES6 class的實現細2、相關Object API盤點3、Javascript中的繼承實現方案盤點...

LeexMuller 2019-08-23 14:38 評論0 收藏0
從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續篇 - 你的對象班（class）里來的？

摘要：這是因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：你們要非得看，我也攔不住，但是至少得準備個支持ES6的Chrome瀏覽器吧？溫馨提示-再續：ES6簡直了，放著不用簡直令人發指！書接上回，即便是程序員，也還是能夠通過自己的努力辛辛苦苦找到合適對象的，見前文《javascript對象不完全...

incredible 2019-08-21 18:41 評論0 收藏0