摘要：類的數(shù)據(jù)類型就是函數(shù)，類本身就指向構(gòu)造函數(shù)。另一個(gè)需要注意的地方是，在子類的構(gòu)造函數(shù)中，只有調(diào)用之后，才可以使用關(guān)鍵字，否則會(huì)報(bào)錯(cuò)。

以前只有全局變量以及函數(shù)內(nèi)部的局部變量，所以以前的局部變量只能定義在函數(shù)里面，但是現(xiàn)在不是了，可以通過let關(guān)鍵字來定義局部變量。同時(shí)通過const關(guān)鍵字來定義常量，定義后的基本類型數(shù)據(jù)是不能改變的，但是定義的是引用類型的變量的話，還是可以改變的。

1.箭頭函數(shù)，在回調(diào)中很有作用，箭頭函數(shù)永遠(yuǎn)是匿名的

2.this在箭頭函數(shù)中的使用：在嵌套函數(shù)中，碰到setInterval, setTimeout等定時(shí)器函數(shù)時(shí)，this會(huì)發(fā)生漂移，指向windows（global對(duì)象），以前我們要將this緩存[var self = this;]()或者通過[(){}.bind(this]())來改變this的內(nèi)部函數(shù)的指向，但是有了箭頭函數(shù)后，再也不用更擔(dān)心這個(gè)問題了；

3.函數(shù)默認(rèn)參數(shù)，以前的函數(shù)默認(rèn)參數(shù) [var a = a || []]();但是ES6支持了函數(shù)的默認(rèn)參數(shù)；

4.rest參數(shù)[...](),rest參數(shù)是沒有指定變量名的參數(shù)數(shù)組，而arguments是所有參數(shù)的集合。而且arguments參數(shù)不是一個(gè)真正的數(shù)組，而rest參數(shù)是一個(gè)真的數(shù)組，可以調(diào)用sort和map方法。可以告別arguments參數(shù)了；

...可以用于函數(shù)的調(diào)用，數(shù)組字面量，以及對(duì)象的展開（ES7）.

用反引號(hào)標(biāo)識(shí)。它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。模板字符串中嵌入變量，需要將變量名寫在${}之中。

// 字符串中嵌入變量

var name = "Bob", time = "today";
Hello {name}, how are you {time}?

解構(gòu)方法可以很快的從數(shù)組或者對(duì)象中提取變量，可以用一個(gè)表達(dá)式讀取整個(gè)解構(gòu)；

JavaScript是原型繼承的，但聲明起來卻很怪，所有提供了一個(gè)原型鏈的class語法糖。通過class關(guān)鍵字定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。constructor方法是類的默認(rèn)方法，通過new命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法。一個(gè)類必須有constructor方法，如果沒有顯式定義，一個(gè)空的constructor方法會(huì)被默認(rèn)添加。

注意，定義“類”的方法的時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了。另外，方法之間不需要逗號(hào)分隔，加了會(huì)報(bào)錯(cuò)。類的數(shù)據(jù)類型就是函數(shù)，類本身就指向構(gòu)造函數(shù)。

Class之間可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悰]有自己的this對(duì)象，而是繼承父類的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對(duì)象。另一個(gè)需要注意的地方是，在子類的構(gòu)造函數(shù)中，只有調(diào)用super之后，才可以使用this關(guān)鍵字，否則會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悓?shí)例的構(gòu)建，是基于對(duì)父類實(shí)例加工，只有super方法才能返回父類實(shí)例。

super這個(gè)關(guān)鍵字，既可以當(dāng)作函數(shù)使用，第一種情況，super作為函數(shù)調(diào)用時(shí)，代表父類的構(gòu)造函數(shù)。第二種情況，super作為對(duì)象時(shí)，指向父類的原型對(duì)象。可以采用super(). + 方法名字來調(diào)用父類的方法。

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

1.首先推出Require.js的AMD規(guī)范，Node.js誕生后，隨之而來的是CommonJS格式，后來的browerify，知道es6推出了模塊化，對(duì)模塊化進(jìn)行了支持；

es6模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。通過as取別名。

export {firstName, lastName, year};
import {firstName, lastName, year} from "./profile";

function setName(element) {
  element.textContent = firstName + " " + lastName;
}

各種方案層出不窮，JavaScript不斷發(fā)展，導(dǎo)致很多性能無法普及，babel提供了JavaScript多用途編譯器。讓你可以開心的使用ES6.

Babel通過安裝插件（plugin）或者預(yù)設(shè)（preset，就是一組設(shè)定好的插件）來編譯代碼。創(chuàng)建一個(gè).babelrc文件。

{
  "presets":[],
    "plugins":[]
}

首先要明白兩個(gè)概念：模塊（module）和組件（component）,模塊是指的語言層面的，在前端大多數(shù)指的是一個(gè)JavaScript模塊，往往變現(xiàn)為一個(gè)JavaScript文件，以及其對(duì)外暴露的一些屬性和方法。組件更偏向于業(yè)務(wù)層面，往往是一個(gè)獨(dú)立功能的實(shí)現(xiàn)，比如一個(gè)下拉菜單，文本編輯器，路由系統(tǒng)等。一個(gè)組件往往包括其所需的所有資源，包括邏輯js,樣式css，模板html（template），甚至圖片和文字。

1.全局變量+命名空間：

避免污染全局作用域，模塊內(nèi)部通常用匿名自執(zhí)行函數(shù)。問題多多：（1）依賴全局變量，污染全局變量的同時(shí)，不安去.（2）依賴約定的命名空間，不可靠。（3）要手動(dòng)管理并控制執(zhí)行，容易出錯(cuò)，在上線前要手動(dòng)合并一些模塊

2.AMD+CommonJs

解決時(shí)上述的問題，全局下定義require和define，不需要其他變量

通過文件路徑或模塊聲明來定義模塊

依賴與加載都是由加載器完成，提供了打包工具自動(dòng)分析依賴并合并

3.ES6模塊化

JavaScript帶來了自己的模塊化方案，相比AMD/CommonJS,功能更強(qiáng)大，引用和暴露的方式更多樣，支持復(fù)雜的靜態(tài)分析，使構(gòu)建工具更細(xì)粒度地移除模塊實(shí)現(xiàn)中的無用代碼。

1.基于命名空間的多入口文件

基于前面的第一種模塊化方案，不同資源手動(dòng)導(dǎo)入，最典型的就是jQuery插件；

2.基于模塊的多入口文件

隨著前端模塊化方案的流行，組件也趨于AMD這樣的規(guī)范，把組件也暴露為一個(gè)模塊。一個(gè)AMD模塊的JavaScript，一個(gè)CSS(Less,Sass)模塊的樣式，以及其他資源。

3.單JavaScript入口的組件

這是現(xiàn)在比較流行的方案，借助browerify、webpack這樣的打包工具，允許我們將一般的資源當(dāng)做JavaScript模塊來對(duì)待。并一致的加載進(jìn)來。

4.Web Component

這是組件化里的國家隊(duì)，與2011年提出，但是還處于不溫不火的狀態(tài)，主要包括自定義元素（Custom Element）、HTML模板（HTML Template）、Shadow DOM、HTML 的引入（HTML Import）

1.包管理工具

用來安裝、管理和分享JavaScript包，同時(shí)自動(dòng)處理多個(gè)包之間的依賴。主要有包管理工具，Bower、Component、Spm、以及Node.js的親兒子npm;

2.任務(wù)流工具

在前端項(xiàng)目中會(huì)遇到各種各樣的任務(wù)，比如壓縮合并代碼、驗(yàn)證代碼格式、測試代碼、監(jiān)視文件等等，執(zhí)行這些方法不可能每次都去手動(dòng)寫這些命令，非常麻煩，接觸Linux的肯定會(huì)想到shell腳本?，F(xiàn)在前端比較流行的有Grunt和Gulp兩個(gè)；

3.模塊打包工具

主要有bundler和webpack兩個(gè)，webpack作為后起之秀，它支持AMD、CommonJS類型，通過loader機(jī)制也可以使用ES6的模塊格式，正向一個(gè)全能型構(gòu)建工具發(fā)展。