ES6+ class中代碼的真正樣子

PascalXie 發布于2019-08-20 15:11 / 3395人閱讀

摘要：一用定義一個空類在中在中結論這個結果很清晰，原來中的類在中也是定義一個構造函數，然后返回出來。

這篇文章用代碼對比的方式解釋ES6中的類如果用我們熟悉的ES5來看是什么樣的。

一、用class定義一個空類
在ES6中：

class Person { 

}

在ES5中：

var Person = (function () {
    function Person() {
    }
    return Person;
}());

結論：這個結果很清晰，原來ES6中的class類在ES5中也是定義一個構造函數，然后返回出來。

二、定義屬性
在ES6中：

class Person { 
  
  constructor(name,age) { 
    this.name = name;    //在constructor中定義屬性
  }

  age = age;    //直接定義屬性

}

在ES5中：

var Person = (function () {

    function Person(name, age) {
        this.age = age;    //在es6中定義的屬性都在這里，而且傳值也沒問題
        this.name = name;
    }
    return Person;
    
}());

結論：在ES6中定義的屬性，不管直接在class中定義，還是在constructor中都可以，但是在constructor中定義屬性才是推薦寫法，畢竟ES6轉ES5也并不是100%合理。

三、定義方法
在ES6（傳統寫法、箭頭函數寫法）

class Person { 

  Run() {    //傳統形式的函數寫法
    this;
  }

  eat = () => {    //es6中的箭頭函數寫法
    this;
  }

}

在ES5中：

var Person = (function () {

    function Person() {
        var _this = this;
        this.eat = function () {    //箭頭寫法直接掛到Person的this下
            _this;
        };
    }
    Person.prototype.Run = function () {    //傳統寫法則掛到prototype中定義
        this;
    };
    
    return Person;
}());

結論：這里不僅展示了在方法的定義，還比較了在ES6中傳統函數和箭頭函數的區別，傳統函數的this和es5函數的this指向完全一樣，但箭頭函數的this指向的是它外層對象的作用域，這里不細說，想了解請點這里。

四、static關鍵字
在ES7中：

class Person {

  static name = "Jack";    //對屬性使用static

  static run() {     //對傳統函數使用static
    console.log(22)
  }

  static see = () => {    //對箭頭函數使用static
    
  }
};

在ES5中：

var Person = (function () {
    function Person() {
    }
    Person.run = function () {
        console.log(22);
    };
    return Person;
}());

Person.name = "Jack";
Person.see = function () {};

結論：在class中，如果在屬性或方法前使用static關鍵字，則可以在外部訪問，訪問方式是Person.xxx或Person.xxx()

GPU云服務器云服務器 es6中的class es6class asp中代碼縮進網絡機柜樣子

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

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

[零基礎學python]永遠強大的函數

摘要：萊布尼茲所指的函數現在被稱作可導函數，數學家之外的普通人一般接觸到的函數即屬此類。中文的函數一詞由清朝數學家李善蘭譯出。前面提供的維基百科中的函數詞條，里面可以做一個概覽。函數，對于人類來講，能夠發展到這個數學思維層次，是一個飛躍。可以說，它的提出，直接加快了現代科技和社會的發展，不論是現代的任何科技門類，乃至于經濟學、政治學、社會學等，都已經普遍使用函數。下面一段來自維基百科（...

cangck_X 2019-07-24 17:34 評論0 收藏0
基于 Babel 的 npm 包最小化設置

摘要：翻譯瘋狂的技術宅原文本文首發微信公眾號歡迎關注，每天都給你推送新鮮的前端技術文章本文描述了通過生成包的最小設置。是用于轉換的預設。有關這兩個屬性的更多信息設置多平臺包。表示使用上一節中的配置。結論以上是通過創建包最小庫的方法。翻譯：瘋狂的技術宅原文：http://2ality.com/2017/07/npm... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都...

琛ｈ。 2019-08-23 15:39 評論0 收藏0
Babel 7 轉碼的正確姿勢

摘要：轉碼的配置是每位前端童鞋在日常工作中都會遇到的。簡單點來說就是在轉碼過程中，對于一些新語法，都會抽象一個個小的函數，在轉碼過程中完成替換。以上即是我總結的轉碼姿勢，如果對本篇有疑問或建議，歡迎在這里提出。 Babel 轉碼的配置是每位前端童鞋在日常工作中都會遇到的。剛開始我也是在網上搜索各種配置方法，升級到 Babel 7 的時候又折騰了一把，所以決定把自己的心得和理解記錄下來，希望能...

JohnLui 2019-08-26 14:01 評論0 收藏0
JS每日一題：函數式編程中代碼組合(compose)如何理解?

摘要：期函數式編程中代碼組合如何理解定義顧名思義，在函數式編程中，就是將幾個有特點的函數拼湊在一起，讓它們結合，產生一個嶄新的函數代碼理解一個將小寫轉大寫的函數一個在字符后加的函數將兩個函數組合起來這里假設我們實現了每日一題每日一題顯示結果里上面 20190315期函數式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數式編程中，Compose就是將幾個有特點的函數拼湊在...

Kaede 2019-08-23 16:08 評論0 收藏0
PHP后端組織項目結構的思考

摘要：介紹下一個新項目，后端該如何從零去搭建。我們先假設這個項目由兩部組成提供給站點使用的提供給運營人員使用的管理后臺。因此通過回顧，我們得出我們的后端項目需要一個的層次，來存放業務邏輯。這是后端開發者從零做一個移動應用的后端部分第二篇。介紹下一個新項目，后端該如何從零去搭建。我們先假設這個項目由兩部組成提供給wap站點、app使用的api；提供給運營人員使用的管理后臺。整個...

cikenerd 2019-06-28 13:23 評論0 收藏0