成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript的es6的class使用

zgbgx / 1900人閱讀

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

記錄class的學習筆記，在回答別人的問題時發(fā)現(xiàn)自己的的理解誤差很大

javascript的class

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

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

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

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

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

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

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

需要注意：
1.class內(nèi)的方法不需要 function關(guān)鍵字，直接把函數(shù)定義放進去了就可以了。   
2.另外，方法之間不需要逗號分隔，加了會報錯。
3.class內(nèi)部默認是嚴格模式，
需要注意這個和JavaScript中的對象寫法是不一樣的。而是看成是構(gòu)造函數(shù)的寫法。而且目前使用typeof來判斷class的類型的時候返回的結(jié)果是function。
constructor方法 
constructor方法是類的默認方法，通過new命令生成對象實例時，自動調(diào)用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。
class Box {
}

// 等同于
class Box {
  constructor() {}
}
類的實例對象

就像使用構(gòu)造函數(shù)一樣使用new命令來創(chuàng)建一個實例。如果忘記加上new，像函數(shù)那樣調(diào)用Class，將會報錯。

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

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

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


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

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

靜態(tài)屬性

ES6 明確規(guī)定，Class 內(nèi)部只有靜態(tài)方法，沒有靜態(tài)屬性。所以應(yīng)該這樣書寫一個靜態(tài)屬性：

class Foo {
}

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

下面是錯誤的舉一反三：

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

  // 寫法二
  static prop: 2
}

Foo.prop // undefined
新提案中的靜態(tài)屬性、實例屬性

不過目前已經(jīng)有了新的提案來支持類的靜態(tài)屬性和實例屬性，

實例屬性

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

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}
靜態(tài)屬性

類的靜態(tài)屬性只要在上面的實例屬性寫法前面，加上static關(guān)鍵字就可以了。

class MyClass {
  static myStaticProp = 42;

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92376.html

相關(guān)文章

  • [譯] 在你學習 React 之前必備的 JavaScript 基礎(chǔ)

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

    Chaz 評論0 收藏0

  • ES6學習總結(jié)（三）

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

    baoxl 評論0 收藏0

  • JavaScript 五十問——從源碼分析 ES6 Class 的實現(xiàn)機制

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

    LeexMuller 評論0 收藏0

  • 從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續(xù)篇 - 你的對象班（class）里來的？

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

    incredible 評論0 收藏0

發(fā)表評論

0條評論

zgbgx

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<