ES6 學習筆記

alogy 發布于2019-08-21 10:33 / 466人閱讀

摘要：類的屬性和屬性在上一篇面向對象編程中我們已經了解到一個實例化對象會有一個指向構造函數的屬性。子類的屬性，表示構造函數的繼承，總是指向父類。完成構造函數繼承的實質如下第二條對原型鏈完成方法的繼承，實質如下另外還有還有三種特殊情況。

介紹

ECMAScript 6 在接下來的一段時間內將成為 ECMAScript的一個標準。這個標準預計在今年的時候就會被簽署，不管在Github,還是在很多社區，javascript愛好者已經早已開始擁抱變化，享受ES6 帶來的美好,這篇文章將介紹ES6的一些新特性。由于ES6 還沒有很好地被瀏覽器支持，所以這篇文章的ES6代碼將使用 Babel 進行編譯。

ECMAScript 6 的新特性 箭頭（Arrow）

=> 是function的簡寫形式，支持expression 和 statement 兩種形式。同時一點很重要的是它擁有詞法作用域的this值，幫你很好的解決this的指向問題，這是一個很酷的方式，可以幫你減少一些代碼的編寫，先來看看它的語法。

([param] [, param]) => {
   statements
}

param => expression

然后再來看看例子，以及babel 編譯后的結果。

ES6:

babel編譯后結果：

類（class）

ES6 引入了class（類），讓javascript的面向對象編程變得更加容易清晰和容易理解。類只是基于原型的面向對象模式的語法糖。

  class Animal {
    // 構造方法，實例化的時候將會被調用，如果不指定，那么會有一個不帶參數的默認構造函數.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型對象上的屬性
    toString() {
      console.log("name:" + this.name + ",color:" + this.color);

    }
  }
   
 var animal = new Animal("dog","white");
 animal.toString();

 console.log(animal.hasOwnProperty("name")); //true
 console.log(animal.hasOwnProperty("toString")); // false
 console.log(animal.__proto__.hasOwnProperty("toString")); // true

 class Cat extends Animal {
  constructor(action) {
    // 子類必須要在constructor中指定super 方法，否則在新建實例的時候會報錯.
    // 如果沒有置頂consructor,默認帶super方法的constructor將會被添加、
    super("cat","white");
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new Cat("catch")
 cat.toString();
 
 // 實例cat 是 Cat 和 Animal 的實例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

類的 prototype 屬性和 __proto__ 屬性

在上一篇 javascript面向對象編程中我們已經了解到一個實例化對象會有一個 __proto__ 指向構造函數的 prototype 屬性。在 class 中。同時具有 __proto__ 和 prototype 兩個屬性，存在兩條繼承鏈。

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

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

  class Cat extends Animal {}
  console.log(Cat.__proto__ === Animal); // true
  console.log(Cat.prototype.__proto__ === Animal.prototype); // true

我們先來看第一條 Cat.__proto__ === Animal 這條原型鏈。完成構造函數繼承的實質如下：

 class Cat extends Animal {
   construcotr() {
     return Animal.__proto__.call(this);
  }
 }

第二條對原型鏈 Cat.prototype.__proto__ === Animal.prototype 完成方法的繼承，實質如下：

 Cat.prototype.__proto__ = Animal.prototype

另外還有還有三種特殊情況。

 class A extends Object {}
 console.log(A.__proto__ === Object); // true
 console.log(A.prototype.__proto__ === Object.prototype);

A繼承Object，A的__prototype__ 指向父類Object. A的 prototype.__proto__ 指向父類Object的prototype。

從上篇文章中的函數對象的原型中我們可以了解到，函數是一種特殊的對象，所有函數都是 Function 的實例。

 class Cat {}
 console.log(Cat.__proto__ === Function.prototype); //true
 console.log(Cat.prototype.__proto__ === Object.prototype); //true

由于Cat不存在任何繼承，就相當于一個普通函數，由于函數都是Function 的實例，所以 Cat.__proto__指向 Function.prototype. 第二條繼承鏈指向父類（Function.prototype）的prototype屬性，所以 Cat.prototype.__proto__ === Object.prototype. Cat調用后會返回Object實例，所以 A.prototype.__proto__ 指向構造函數（Object）的prototype。

 class Cat extends null {};
 console.log(Cat.__proto__ === Function.prototype); // true;
 console.log(Cat.prototype.__proto__ === null); //true

Cat是一個普通函數，所以繼承 Function.prototype .第二條繼承鏈不繼承任何方法，所以 Cat.prototype.__proto__ == null.

Module

到目前為止,javascript (ES5及以前) 還不能支持原生的模塊化，大多數的解決方案都是通過引用外部的庫來實現模塊化。比如遵循CMD規范的 Seajs 和AMD的 RequireJS 。在ES6中，模塊將作為重要的組成部分被添加進來。模塊的功能主要由 export 和 import 組成.每一個模塊都有自己多帶帶的作用域，模塊之間的相互調用關系是通過 export 來規定模塊對外暴露的接口，通過import來引用其它模塊提供的接口。同時還為模塊創造了命名空間，防止函數的命名沖突。

export,import 命令

  //test.js
  export var name = "Rainbow"

ES6將一個文件視為一個模塊，上面的模塊通過 export 向外輸出了一個變量。一個模塊也可以同時往外面輸出多個變量。

 //test.js
 var name = "Rainbow";
 var age = "24";
 export {name, age};

定義好模塊的輸出以后就可以在另外一個模塊通過import引用。

  //index.js
 import {name, age} from "./test.js"

整體輸入，module指令

 //test.js
  
  export function getName() {
    return name;
  }
  export function getAge(){
   return age;
  }

通過 import * as 就完成了模塊整體的導入。

 import * as test form "./test.js";

通過指令 module 也可以達到整體的輸入。

 module test from "test.js";
 test.getName();

export default

不用關系模塊輸出了什么，通過 export default 指令就能加載到默認模塊，不需要通過花括號來指定輸出的模塊,一個模塊只能使用 export default 一次

  // default 導出
  export default function getAge() {} 
 
  // 或者寫成
  function getAge() {}
  export default getAge;

  // 導入的時候不需要花括號
  import test from "./test.js";

一條import 語句可以同時導入默認方法和其它變量.

  import defaultMethod, { otherMethod } from "xxx.js";

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

es6學習筆記-頂層對象_v1.0_byKL

摘要：學習筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰 es6學習筆記-頂層對象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對象頂層對象，在瀏覽器環境指的是window對象，在Node指的是gl...

Meils 2019-08-21 11:31 評論0 收藏0
ES6學習筆記

摘要：本筆記為閱讀阮老師的文章自己的總結，僅作自用，感謝阮老師的技術分享。字符串的遍歷器接口新增判斷字符串的包含情況返回值，表示是否找到了字符串。返回值表示參數字符串是否在原字符串的頭部。本筆記為閱讀http://es6.ruanyifeng.com/ 阮老師的文章自己的總結，僅作自用，感謝阮老師的技術分享。 1.超過uFFFF的字符ES5無法正確顯示，會顯示成前面的uFFFF的碼點符號加...

zxhaaa 2019-08-26 11:58 評論0 收藏0
《深入理解ES6》筆記——導讀

摘要：最近買了深入理解的書籍來看，為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序，作為一個粉絲，還是挺看好這本書能給我帶來一個新的升華，而且本書的作者也非常厲害。使用ES6開發已經有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語法介紹。最近買了《深入理解ES6》的書籍來看，為什么學習ES6這么久還要買這本書呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 評論0 收藏0
React學習筆記3：用es2015（ES6）重寫CommentBox

摘要：新搭建的個人博客，本文地址學習筆記用重寫在一開始的時候配置中我們就加入了的支持，就是下面的配置，但之前的學習筆記都使用的完成，所以專門作一篇筆記，記錄使用完成創建相關文件修改，增加該入口文件修改，引入該文件做個簡單的測試，看下瀏覽器全部用來新搭建的個人博客，本文地址：React學習筆記3：用es2015（ES6）重寫CommentBox在一開始的時候webpack配置中我們就加入了e...

selfimpr 2019-08-19 17:30 評論0 收藏0
ES6零基礎教學_解析彩票項目-學習筆記（一）

摘要：彩票項目實戰學習記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業務邏輯，自動構建系統，模擬數據和真實數據接口處理。彩票項目實戰學習記錄（一）完整走了一遍課程，覺得還不錯。總結: es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。完整還原了項目開發的代碼設計和開發過...

blastz 2019-08-22 13:52 評論0 收藏0