精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
ES6 學習筆記

介紹

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

ECMAScript 6 的新特性

箭頭(Arrow)

=> 是function的簡寫形式,支持expressionstatement 兩種形式。同時一點很重要的是它擁有詞法作用域的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中,模塊將作為重要的組成部分被添加進來。模塊的功能主要由 exportimport 組成.每一個模塊都有自己單獨的作用域,模塊之間的相互調用關系是通過 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';
本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
JS類型判斷typeof PK {}.toString.call(obj)
15 個你應該知道的JavaScript 對象基礎知識
JS原型鏈常見面試題分析
誠之和:如何掌握前端JavaScript中的class類
干貨 | 快速讀懂 JS 原型鏈
一篇文章告訴你JavaScript 如何實現繼承
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 郧西县| 东莞市| 达尔| 灵寿县| 巍山| 青冈县| 汝州市| 平遥县| 封丘县| 卓尼县| 祁阳县| 临澧县| 黄山市| 海门市| 建德市| 克山县| 红河县| 海林市| 建昌县| 茌平县| 扎兰屯市| 沙雅县| 文水县| 烟台市| 南安市| 曲靖市| 桐庐县| 广东省| 永登县| 司法| 天祝| 定兴县| 兴宁市| 五指山市| 教育| 新野县| 邯郸市| 西乡县| 洛阳市| 博野县| 汕头市|