摘要：，微軟發(fā)布，同時(shí)發(fā)布了，該語言模仿同年發(fā)布的。，公司在瀏覽器對(duì)抗中沒落，將提交給國(guó)際標(biāo)準(zhǔn)化組織，希望能夠成為國(guó)際標(biāo)準(zhǔn)，以此抵抗微軟。同時(shí)將標(biāo)準(zhǔn)的設(shè)想定名為和兩類。，尤雨溪發(fā)布項(xiàng)目。，正式發(fā)布，并且更名為。，發(fā)布，模塊系統(tǒng)得到廣泛的使用。

作為程序員，技術(shù)的落實(shí)與鞏固是必要的，因此想到寫個(gè)系列，名為 why what or how 每篇文章試圖解釋清楚一個(gè)問題。

這次的 why what or how 主題：什么是 JavaScript ？

JavaScript - 一種解釋性腳本語言

解釋性腳本語言：一類不具備開發(fā)操作系統(tǒng)的能力，而是只用來編寫控制其他大型應(yīng)用程序的“腳本”，但其內(nèi)容的的執(zhí)行不需要提前編譯的語言。通常作為別的程序的輸入。

JavaScript，是一種用于描述網(wǎng)頁(yè)邏輯，處理網(wǎng)頁(yè)業(yè)務(wù)的解釋性腳本語言，純文本，其內(nèi)容作為瀏覽器的輸入，瀏覽器負(fù)責(zé)解釋編譯運(yùn)行其內(nèi)容。

目前 JavaScript 也成功被應(yīng)用于服務(wù)端，服務(wù)端的 JavaScript 用于描述業(yè)務(wù)邏輯，其內(nèi)容作為 node 的輸入， node 負(fù)責(zé)解釋編譯運(yùn)行其內(nèi)容。

JavaScript 是伴隨著瀏覽器出現(xiàn)的一門特殊的語言，特殊在哪呢？ JavaScript 是唯一一門所有瀏覽器都支持的腳本語言，也就說如果你的 WEB 程序想在客戶端做點(diǎn)事，就一定會(huì)用到 JavaScript 。別看現(xiàn)在 JavaScript 炙手可熱，但它最開始出現(xiàn)卻僅為了驗(yàn)證表單。

1990 - 1994，雖然各種瀏覽器開始出現(xiàn)，但瀏覽器僅用作數(shù)據(jù)展示，并沒有客戶端邏輯存在。

1994，Netscape 公司計(jì)劃實(shí)現(xiàn)一種瀏覽器腳本語言進(jìn)行一些簡(jiǎn)單的表單驗(yàn)證。

1995，Netscape 公司雇傭了程序員 Brendan Eich 開發(fā)這種網(wǎng)頁(yè)腳本語言。

1995.5，Brendan Eich 用了 10 天，設(shè)計(jì)完成了這種語言的第一版。取名為：Mocha。

1995.9，Netscape 公司將該語言改名為 LiveScript。

1995.12，Netscape 與 Sun 公司聯(lián)合發(fā)布了 JavaScript 語言。

1996.3，Navigator 2.0 瀏覽器正式內(nèi)置了 JavaScript 腳本語言。

1996.8，微軟發(fā)布 Internet Explorer 3.0 ，同時(shí)發(fā)布了 JScript ，該語言模仿同年發(fā)布的 JavaScript。

1996.11，Netscape 公司在瀏覽器對(duì)抗中沒落，將 JavaScript 提交給國(guó)際標(biāo)準(zhǔn)化組織 ECMA ，希望 JavaScript 能夠成為國(guó)際標(biāo)準(zhǔn)，以此抵抗微軟。

1997.7，ECMAScript 1.0 發(fā)布。ECMAScript 是一種標(biāo)準(zhǔn)，而 JavaScript 是該標(biāo)準(zhǔn)的一種實(shí)現(xiàn)。

1997.10，Internet Explorer 4.0 發(fā)布，其中的 JScript 基于 ECMAScript 1.0 實(shí)現(xiàn)。

1999，IE 5 部署了 XMLHttpRequest 接口，允許 JavaScript 發(fā)出 HTTP 請(qǐng)求，為后來 Ajax 應(yīng)用創(chuàng)造了條件。

1999.12，ECMAScript 3.0 版發(fā)布，得到了瀏覽器廠商的廣泛支持。

2005，Ajax 方法（Asynchronous JavaScript and XML）正式誕生，Google Maps 項(xiàng)目大量采用該方法，促成了 Web 2.0 時(shí)代的來臨。

2006，jQuery 函數(shù)庫(kù)誕生，作者為 John Resig。jQuery 統(tǒng)一了不同瀏覽器操作 DOM 的不同實(shí)現(xiàn)，被廣泛使用，極大降低了 JavaScript 語言的應(yīng)用成本，推動(dòng)了語言的流行。

2007.10，ECMAScript 4.0 草案發(fā)布，對(duì) 3.0 版做了大幅升級(jí)，但由于改動(dòng)幅度過大，遭到了各大瀏覽器廠商的反對(duì)。

2008.7，各大廠商對(duì) ECMAScript 4.0 版本的開發(fā)分歧太大，ECMA 開會(huì)決定，中止 ECMAScript 4.0 的開發(fā)，對(duì)其中一些已經(jīng)改善的部分發(fā)布為 ECMAScript 3.1。不久之后就改名為 ECMAScript 5。

2008，由 google 開發(fā)的 V8 編譯器誕生。極大提高了 JavaScript 的性能，為之后 node 的誕生打下了基礎(chǔ)。

2009，Node.js 項(xiàng)目誕生，創(chuàng)始人為 Ryan Dahl，JavaScript 正式應(yīng)用于服務(wù)端，以其極高的并發(fā)進(jìn)入人們的視野。

2009.12，ECMAScript 5.0 正式發(fā)布。同時(shí)將標(biāo)準(zhǔn)的設(shè)想定名為 JavaScript.next 和 JavaScript.next.next 兩類。

2010，NPM 和 RequireJS 出現(xiàn)，標(biāo)準(zhǔn)著 JavaScript 進(jìn)入模塊化。

2011.6，ECMAscript 5.1 發(fā)布，并且成為 ISO 國(guó)際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）。

2012，單頁(yè)面應(yīng)用程序框架（single-page app framework）開始崛起，AngularJS 項(xiàng)目出現(xiàn)。

2012，所有主要瀏覽器都支持 ECMAScript 5.1 的全部功能。

2012，微軟發(fā)布 TypeScript 語言。為 JavaScript 添加了類型系統(tǒng)。

2013，ECMA 正式推出 JSON 的國(guó)際標(biāo)準(zhǔn)，這意味著 JSON 格式已經(jīng)變得與 XML 格式一樣重要和正式了。

2013.2，Grunt.js 前端構(gòu)建化工具發(fā)布，前端進(jìn)入自動(dòng)化開發(fā)階段。

2013.5，Facebook 發(fā)布 UI 框架庫(kù) React。

2013.8, Gulp.js 3.0 前端構(gòu)建工具發(fā)布，js 自動(dòng)化開發(fā)變得簡(jiǎn)單起來。

2014，尤雨溪發(fā)布 VUE 項(xiàng)目。

2015.3，Facebook 公司發(fā)布了 React Native 項(xiàng)目，將 React 框架移植到了手機(jī)端，用來開發(fā)手機(jī) App。

2015.3，babel 5.0 發(fā)布，ES6 代碼正式引用于開發(fā)，而不需要考慮兼容問題。

2015.6，ECMAScript 6 正式發(fā)布，并且更名為 ECMAScript 2015。

2015.6，Mozilla 在 asm.js 的基礎(chǔ)上發(fā)布 WebAssembly 項(xiàng)目。

2015.9，Webpack 1.0 發(fā)布，模塊系統(tǒng)得到廣泛的使用。

2016.6，ECMAScript 2016（ES7） 標(biāo)準(zhǔn)發(fā)布。

2017.6，ECMAScript 2017（ES8） 標(biāo)準(zhǔn)發(fā)布，引入了 async 函數(shù)，使得異步操作的寫法出現(xiàn)了根本的變化。

2017.11，所有主流瀏覽器全部支持 WebAssembly，這意味著任何語言都可以編譯成 JavaScript，在瀏覽器中運(yùn)行。

2018.6，ECMAScript 2018（ES9） 標(biāo)準(zhǔn)發(fā)布。

2019.6，ECMAScript 2019（ES10） 標(biāo)準(zhǔn)發(fā)布。

...

縱觀發(fā)展歷史，很容易就能發(fā)現(xiàn)其中幾個(gè)關(guān)鍵點(diǎn)的出現(xiàn)，極大的促進(jìn)了 JavaScript 的發(fā)展。

XMLHttpRequest 接口的出現(xiàn)，JavaScript 開始有了與服務(wù)器溝通的能力，誕生了 ajax ，同時(shí)也促進(jìn)了 RestFul API 的發(fā)展。

jQuery 函數(shù)庫(kù)誕生，極大的降低了網(wǎng)頁(yè)開發(fā)成本。

V8 的出現(xiàn)，降低了 JavaScript 消耗的資源，加快了編譯速度，復(fù)雜的 JavaScript 程序開始出現(xiàn)。

Node.js 項(xiàng)目誕生，JavaScript 開始應(yīng)用在服務(wù)端。

NPM 和 RequireJS 出現(xiàn)，JavaScript 正式進(jìn)入模塊化。

Grunt Gulp Webpack 這些自動(dòng)化構(gòu)建工具的出現(xiàn)，極大的降低了開發(fā)成本，統(tǒng)一了各種內(nèi)容的構(gòu)建方式。

Babel 的出現(xiàn)徹底讓前端程序員放開了手腳，毫無顧忌的使用 ES6 而無須擔(dān)心平臺(tái)的兼容性問題。

Angular React Vue 的出現(xiàn)了，進(jìn)一步降低了網(wǎng)頁(yè)開發(fā)成本，單頁(yè)應(yīng)用開始出現(xiàn)。

ECMAScript 6 標(biāo)準(zhǔn)的公布以及實(shí)現(xiàn)，彌補(bǔ)了 JavaScript 的語言缺陷，JavaScript 更好用了。

直到目前，JavaScript 已經(jīng)成為了 GitHub 上最熱門的語言，從前端到后端在到桌面，都有 JavaScript 的身影，但 JavaScript 語言本身的內(nèi)容并不多，那么 JavaScript 語言本身都有哪些內(nèi)容？

JavaScript 的語法，這里僅羅列一些概念，具體的可以查看JavaScript開發(fā)文檔。

在 JavaScript 中所有的數(shù)據(jù)都有類型，如下所示：

在 JavaScript 中數(shù)據(jù)類型除了可以按照上述的分類方式，還可以簡(jiǎn)單的分為：基本數(shù)據(jù)類型（除了 Object 的其他類型）和引用類型（Object），這和變量的存儲(chǔ)方式有關(guān)，這里不過于深入，但 JavaScript 數(shù)據(jù)是如何存儲(chǔ)的？之后會(huì)寫，請(qǐng)持續(xù)關(guān)注~

運(yùn)算符

算術(shù) + - * / ** % ++ --

比較 > >= < <= == != === !==

布爾運(yùn)算 ! || && ?:

二進(jìn)制運(yùn)算 | & ~ ^ << >> >>>

在進(jìn)行算術(shù)、比較、布爾運(yùn)算時(shí)，會(huì)出現(xiàn)類型轉(zhuǎn)換，會(huì)有一些怪異的表現(xiàn)，那么 JavaScript 是如何進(jìn)行類型轉(zhuǎn)換的？之后會(huì)寫，請(qǐng)持續(xù)關(guān)注~

流程

for(let i = 0; i < n; i++){ ... }

for(let key in obj){ ... }

for(let value of array){ ... }

while(true){ ... }

do{ ... }while(true)

if(true){ ... }else if(true){ ... }else{ ... }

switch(a){ case() ... }

和大多數(shù)的語言一樣，都有類似的流程語句。僅需要注意 for...of 循環(huán)即可。

聲明

常量 - const

變量 - let or var（不建議使用）

同步函數(shù) - function

異步函數(shù) - async function

Generator 函數(shù) - function*

ok，JavaScript 的基礎(chǔ)知識(shí)就差不多也就這些，這里僅是羅列，并不過多的深入，有興趣或是不了解的可以在JavaScript 教程，進(jìn)行學(xué)習(xí)。

何為標(biāo)準(zhǔn)庫(kù)？

在了解 JavaScript 發(fā)展史后，我們都知道，EcmaScript 是 JavaScript 語言實(shí)現(xiàn)的標(biāo)準(zhǔn)，標(biāo)準(zhǔn)除了規(guī)定基本的語法外，還定義了一些列 JavaScript 執(zhí)行環(huán)境應(yīng)該有的對(duì)象或是函數(shù)，這些與語法無關(guān)的其他內(nèi)容，就被稱為標(biāo)準(zhǔn)庫(kù)。標(biāo)準(zhǔn)庫(kù)主要包含以下內(nèi)容（一些已廢棄或不推薦使用的就不羅列了）：

全局函數(shù)

eval()

isFinite()

isNaN()

parseFloat()

parseInt()

decodeURI()

decodeURIComponent()

encodeURI()

encodeURIComponent()

...

全局對(duì)象

Number

String

Boolean

Symbol

Object

Function

Error

Math

Date

RegExp

Array

Map

Set

JSON

Promise

Generator

GeneratorFunction

AsyncFunction

Proxy

Reflect

WebAssembly

...

具體內(nèi)容可以點(diǎn)擊查看，這里僅是羅列出一些常用的函數(shù)以及對(duì)象，一些對(duì)象如果不操作視頻、音頻、圖像等內(nèi)容也用不到，這里就不寫了。

JavaScript 作為一門解釋性腳本語言，其內(nèi)容只能作為別的程序的輸入，而這個(gè)別的程序，就是宿主環(huán)境。那么宿主環(huán)境為 JavaScript 提供了什么呢？

語法支持，宿主環(huán)境最重要的就是需要知道 JavaScript 文本內(nèi)容到底干了什么。

標(biāo)準(zhǔn)庫(kù)支持， JavaScript 代碼會(huì)使用 EcmaScript 所規(guī)定的標(biāo)準(zhǔn)庫(kù)，因此必須實(shí)現(xiàn)。

環(huán)境實(shí)現(xiàn)，不同的宿主環(huán)境為了實(shí)現(xiàn)不同的功能，會(huì)提供了不同的實(shí)現(xiàn)，比如瀏覽器上的 BOM 和 DOM，node 上的 fs path 等模塊。

作為 JavaScript 最重要的宿主環(huán)境，JavaScript 攜手已經(jīng)走過了將近 20 年，瀏覽器因?yàn)?JavaScript 而大放異彩，JavaScript 也因?yàn)闉g覽器露出鋒芒。

瀏覽器為 JavaScript 提供語法和標(biāo)準(zhǔn)庫(kù)支持外，還實(shí)現(xiàn)了兩大類 API：DOM（Document Object Model） 和 BOM（Browser Object Model）。

DOM

DOM（Document Object Model） - 文檔對(duì)象模型。

不同于 EcmaScript，DOM 的規(guī)范化組織為 W3C，也就是說 DOM 其實(shí)是 HTML 標(biāo)準(zhǔn)化的一部分，因此 HTML5 最新標(biāo)準(zhǔn)涵蓋一些 DOM API 是正常的。查看 W3C DOM 的最新規(guī)范Document Object Model。

那么何為文檔對(duì)象模型？

我們都知道 HTML 可以簡(jiǎn)單的理解為標(biāo)簽的嵌套，嵌套的標(biāo)簽形成了樹狀結(jié)構(gòu)。DOM 將該樹狀結(jié)構(gòu)提煉成了 JavaScript 中的一個(gè)對(duì)象 document 通過該對(duì)象，JavaScript 就擁有了操作文檔中某個(gè)標(biāo)簽的能力，從而改變標(biāo)簽的結(jié)構(gòu)，樣式，內(nèi)容監(jiān)聽標(biāo)簽的事件等等。

DOM 涉及的 API 很多，但其 API 都有一個(gè)特點(diǎn)，以 標(biāo)簽 打頭，比如 body.addEventListener document.getElementsByTagName 等等，可以通過以下內(nèi)容進(jìn)行學(xué)習(xí)：

什么是 DOM?

DOM 概述

BOM

BOM（Browser Object Model） - 瀏覽器對(duì)象模型。

BOM 其實(shí)到目前還沒有一個(gè)規(guī)范化組織來制定標(biāo)準(zhǔn)，因此各個(gè)瀏覽器的實(shí)現(xiàn)完全按照自己的標(biāo)準(zhǔn)來，MDN 上也沒有專門的介紹頁(yè)面，說實(shí)話有點(diǎn)慘，但雖然沒有標(biāo)準(zhǔn)，各個(gè)瀏覽器實(shí)現(xiàn)的 API 卻基本相同。

BOM 可以簡(jiǎn)單的理解為瀏覽器實(shí)現(xiàn)了一套 API 使得 JavaScript 能與瀏覽器進(jìn)行交互。相關(guān)的 API 全部放在 window 對(duì)象下。

window 對(duì)象主要包含以下對(duì)象：

document - 對(duì) DOM 的引用

frames - 對(duì)當(dāng)前頁(yè)面中的 iframe 的引用

history - 瀏覽器瀏覽記錄相關(guān) API

location - 瀏覽器地址相關(guān) API

localStorage - 本地?cái)?shù)據(jù)存儲(chǔ)

sessionStorage - 會(huì)話級(jí)別的數(shù)據(jù)存儲(chǔ)

navigator - 瀏覽器導(dǎo)航信息相關(guān) API

screen - 屏幕信息

Node 作為 JavaScript 服務(wù)端的宿主環(huán)境，除了提供了語法和標(biāo)準(zhǔn)庫(kù)的支持外，還實(shí)現(xiàn)了一系列的模塊，每個(gè)模塊都有具體的作用，具體可以查看Node 官方文檔。

其實(shí)異步的編程模式是不容易被應(yīng)用在服務(wù)端的，或者說服務(wù)端更偏向于同步模式。

服務(wù)端的極大多數(shù)代碼都需要運(yùn)行在一個(gè)同步的環(huán)境下，比如數(shù)據(jù)庫(kù)的查找，文件的讀取，請(qǐng)求結(jié)果的讀取等等，如果在都將邏輯寫在異步的回調(diào)中，代碼將變得的難以解讀，而且代碼編寫也會(huì)變得復(fù)雜起來。比如需要安裝順序讀取 10 次外部接口的數(shù)據(jù)，同步模式下，只要按照順序從前往后寫即可，而異步模式只能嵌套加嵌套（或者 Promise.then ）不僅寫出來的代碼難以讀懂，代碼也難以維護(hù)。

但是為什么 Node 還是大熱呢？個(gè)人感覺有以下幾個(gè)原因：

前端自動(dòng)化打包的出現(xiàn)。

雖然異步模式不適合服務(wù)端，但卻極其符合請(qǐng)求的過程：請(qǐng)求觸發(fā)任務(wù)。

主線程僅分發(fā)任務(wù)，而不需要處理讀取文件，數(shù)據(jù)庫(kù)等耗時(shí)邏輯，不會(huì)導(dǎo)致程序堵塞，并發(fā)量可以達(dá)到很高。

其數(shù)據(jù)結(jié)構(gòu)與前端需要的結(jié)構(gòu)一致（原生支持 JSON）。

語法靈活，直接操作數(shù)據(jù)，屏蔽或是添加一些字段，處理一些前置邏輯。

簡(jiǎn)單，包括環(huán)境搭建簡(jiǎn)單，啟動(dòng)簡(jiǎn)單程，序編寫簡(jiǎn)單，還有 NPM 上各種庫(kù)。

ES8 AsyncFunction 異步函數(shù)的出現(xiàn)，將異步模式的寫法向同步寫法趨近。代碼編寫變得簡(jiǎn)單起來。

前端人直接上手？

對(duì)于第 8 點(diǎn)，我持中立態(tài)度。大前端的概念層出不窮，我想大家需要冷靜冷靜，不妨上手寫個(gè) Node 程序，感受下前端異步編程是否真正的適合服務(wù)端？還有服務(wù)端雖然環(huán)境統(tǒng)一，但涉及的概念極多，雖然可能在自己寫的小項(xiàng)目中并不會(huì)涉及，但是真正使用卻是會(huì)用到的，所以對(duì)于 Node 能做什么，我的理解如下：

作為前端開發(fā)的自動(dòng)化工具，webpack gulp 等，語法一致，都能看懂，無非增加了一些文件讀取，字符串解析。

爬蟲，抓取一些自己敢興趣的東西。對(duì)于自己的小程序，放開了手做，數(shù)據(jù)量不大，怎么整都行。

數(shù)據(jù)預(yù)處理，在大型項(xiàng)目中，作為請(qǐng)求中轉(zhuǎn)站的存在，返回更加適合前端的數(shù)據(jù)，或是將前端過來的數(shù)據(jù)更加適合后端程序，也就是數(shù)據(jù)映射。在往后交給專業(yè)的后端大佬們即可，我們就不管了。

Electron 作為一個(gè)跨平臺(tái)的 GUI 工具，使用 Chromium 和 Node 構(gòu)建，實(shí)現(xiàn)了使用 JavaScript 開發(fā)桌面應(yīng)用程序，也可以算是一個(gè) JavaScript 的宿主環(huán)境，但其實(shí)相當(dāng)于實(shí)現(xiàn)了一個(gè)瀏覽器， JavaScript 也被分為兩部分，這兩部分的宿主環(huán)境分別為 Node 和瀏覽器。具體可以查看Electron 官網(wǎng)。

不管 JavaScript 程序的運(yùn)行在 Node 端還是運(yùn)作在瀏覽器端，都是以單線程的形式運(yùn)行在宿主環(huán)境下，那么 JavaScript 是如何處理多任務(wù)的呢？

異步 + Event Loop

簡(jiǎn)單描述下：JavaScript 會(huì)調(diào)用宿主環(huán)境提供的 API 處理不同的任務(wù)（這些任務(wù)運(yùn)行在別的線程）并設(shè)置這些任務(wù)的回調(diào)，當(dāng)這些任務(wù)完成時(shí)，會(huì)在事件隊(duì)列中放入任務(wù)對(duì)應(yīng)的回調(diào)，而 JavaScript 主線程會(huì)不斷的去處理事件隊(duì)列中的任務(wù)，這個(gè)過程就被稱為 Event Loop。

由于這個(gè)過程并不在 ECMAScript 所規(guī)定的規(guī)范中，因此不同的宿主環(huán)境實(shí)現(xiàn)是有區(qū)別的，具體可以查看我之前寫的文章：

瀏覽器下的 Event Loop

Node 下的 Event Loop

每種語言都有自己的特點(diǎn)，JavaScript 也不例外，下面就談?wù)?JavaScript 令人著迷，或是苦惱的地方。

每種編程語言都需要處理數(shù)據(jù)和變量的關(guān)系，JavaScript 也不例外。但作為腳本，它需要運(yùn)行在一個(gè)特定的宿主環(huán)境，那么這個(gè)宿主環(huán)境儲(chǔ)存了 JavaScript 運(yùn)行時(shí)產(chǎn)生的所有數(shù)據(jù)，又由于閉包的存在，使得這些數(shù)據(jù)能改被各種各樣的變量所引用，而 JavaScript 中變量又是無類型的，各種奇奇怪怪的賦值方式，會(huì)導(dǎo)致各種奇奇怪怪的結(jié)果，這可以定義為復(fù)雜，但也可以定義為靈活。熟悉它你可以暢游在 JavaScript 的世界中，笑談程序；而霸王硬上弓，卻會(huì)陷入無盡的 bug 中。

那么 JavaScript 中數(shù)據(jù)是如何存儲(chǔ)的？請(qǐng)持續(xù)關(guān)注 ~ 爭(zhēng)取說清楚。

作用域大家都很熟悉，由雙大括號(hào)產(chǎn)生（ES6+），內(nèi)層變量可以引用到外層變量，而外層變量卻對(duì)內(nèi)層變量無能為力。但函數(shù)的閉包卻打破了這層限制，可以讓外部程序有了改變或獲取內(nèi)部變量的能力，同時(shí)由于數(shù)據(jù)存儲(chǔ)的原因，外部程序在一定情況下甚至對(duì)內(nèi)部變量可以為所欲為。

那么 到底何為作用域？閉包在這里扮演的什么角色？請(qǐng)持續(xù)關(guān)注 ~

JavaScript 是一種函數(shù)先行的語言，表現(xiàn)在代碼上為：可以直接定義 function 或是直接將 function 賦值給某個(gè)變量。

函數(shù)，何為函數(shù)？函數(shù)可以理解為一種行為，一段過程，或是一個(gè)任務(wù)，而這些都有一個(gè)顯著的特點(diǎn)，有起始點(diǎn)和終點(diǎn)。對(duì)應(yīng)到函數(shù)上即為入?yún)⒑头祷刂?，在面向?qū)ο缶幊瘫淮笏列麄鞯那闆r下，函數(shù)式編程卻在發(fā)揮著獨(dú)特的魅力，以其自然清晰簡(jiǎn)潔的編程方式，吸引著眾人的眼光。

函數(shù)式編程式一個(gè)極大的內(nèi)容，什么是函數(shù)式編程光解釋是沒有用的，只有自己親自上手體驗(yàn)一把才能感受到它的魅力。

有興趣的朋友可以翻閱JS 函數(shù)式編程指南。

前面說到，JavaScript 是一種函數(shù)先行的語言，那么 JavaScript 就不能面向?qū)ο罅?？錯(cuò)！ES6 class 語法的出現(xiàn)，標(biāo)志著 JavaScript 完全是能夠面向?qū)ο蟮摹２榭唇?jīng)過 babel 轉(zhuǎn)碼后的 ES5 兼容代碼，可以清楚的知道 class 僅僅只是一個(gè)語法糖，不然如何進(jìn)行轉(zhuǎn)碼呢？而面向?qū)ο髮?shí)現(xiàn)的關(guān)鍵是 JavaScript 的另外一個(gè)特點(diǎn)：原型鏈（prototype）。

那么 何為原型鏈（prototype）？原型又是什么？請(qǐng)持續(xù)關(guān)注 ~ 爭(zhēng)取說清楚。

談到 this 相信大部分面向?qū)ο缶幊陶Z言的 coder 都很熟悉，常常出現(xiàn)在對(duì)象所屬的方法中，JavaScript 表現(xiàn)出來的行為和這些語言一致，但其本質(zhì)卻是極大的不同，因?yàn)樵诿恳粋€(gè)函數(shù)下都有 this 的存在，那么 this 到底是什么？其所代表的又是什么內(nèi)容？這和 JavaScript 的數(shù)據(jù)存儲(chǔ)有點(diǎn)關(guān)系，因此在不弄懂?dāng)?shù)據(jù)存儲(chǔ)前，this 往往難以預(yù)測(cè)。

this 到底是如何取值的，在 JavaScript 中數(shù)據(jù)是如何存儲(chǔ)的？中會(huì)有提到，請(qǐng)持續(xù)關(guān)注 ~

已經(jīng)說了函數(shù)，為何還要多帶帶寫個(gè)箭頭函數(shù)？相信大家對(duì)于箭頭函數(shù)的理解僅僅在簡(jiǎn)化的正常函數(shù)上，但箭頭函數(shù)和用 function 聲明的函數(shù)是有區(qū)別的，試想想，在 VUE 文檔中是否有這么一句話：XXX 只接受 function。這個(gè) function 不代表箭頭函數(shù)。那么箭頭函數(shù)到底是什么？和普通函數(shù)又有什么區(qū)別？什么情況下該使用箭頭函數(shù)呢？

請(qǐng)看之后的文章：什么是箭頭函數(shù)？

JavaScript 語言的特點(diǎn)還有很多，ES6 ~ ES10 陸陸續(xù)續(xù)更新不少內(nèi)容，包括 Promise Proxy Iterator Generator async 等很多內(nèi)容，這些都是語言上的更新，具體的使用查看文檔即可。

ECMAScript 6 入門。

當(dāng)然也推薦推薦之前在看《ECMAScript 6 入門》時(shí)，寫下的筆記ecmascript6。歡迎查閱~~

JavaScript 的模塊化由 RequireJs（AMD）開啟，終結(jié)于 ES6（Module）規(guī)范，中間經(jīng)歷了 SeaJS（CMD）和 Node（CommonJS）。目前常用的為 CommonJS（Node）和 Module（ES6 + Babel），其他的我們可以略過。

CommonJS 為 Node 端的模塊系統(tǒng)，內(nèi)置 3 個(gè)變量 require exports 和 module。通過 require 引入模塊，exports 對(duì)外導(dǎo)出，module 保存該模塊的信息。如下所示

"use strict";

var x = 5;
function addx (value){
    console.log( x + value );
}

exports.addx = addx;

相信大家都知道，導(dǎo)出還有一種寫法

module.exports.addx = addx;
// or
module.exports = { addx };

其實(shí)只要知道 module.exports === exports // true，那么一切就解釋的通了，exports 僅為 module.exports 的一個(gè)引用，但是以下寫法是有問題的

exports = { addx };

出現(xiàn)問題的原因是 exports 只是一個(gè)引用，如果重新賦值的話會(huì)導(dǎo)致該變量引用到另一個(gè)數(shù)據(jù)上，這樣的結(jié)果就是 module.exports === exports // false，而模塊的信息是以 module 為標(biāo)準(zhǔn)的，因此就變成了無導(dǎo)出。那如果究其原因到底為什么會(huì)發(fā)生引用變化，可以查看 JavaScript 中數(shù)據(jù)是如何存儲(chǔ)的？雖然還沒寫，但肯定會(huì)寫的。

Module 為 ES6 推出的模塊化規(guī)范，目的在于統(tǒng)一各種不同的規(guī)范，由 import 導(dǎo)入 export 導(dǎo)出。如下所示

import { stat, exists, readFile } from "fs";

export const a = "100"; 
// or
const a = "100";
export {
    a
}

常見的導(dǎo)入語句有

import { xxx } from "a"; - 從 a 中導(dǎo)出 xxx 的屬性或方法，數(shù)據(jù)由 a 的 export 導(dǎo)出

import { xxx as yyy } from "a"; - 從 a 中導(dǎo)出 xxx 的屬性或方法并重命名為 yyy，數(shù)據(jù)由 a 的 export 導(dǎo)出

import xxx from "a"; - 從 a 中導(dǎo)出默認(rèn)值，并賦值為 xxx，數(shù)據(jù)由 a 的 export default 導(dǎo)出

常見的導(dǎo)出語句有

export const a = 1; - 導(dǎo)出一個(gè)常量，名字為 a 值為 1

export { a }; - 導(dǎo)出名字為 a 的屬性或方法，其值為作用域中變量 a 的值

export { a : b }; - 導(dǎo)出名字為 a 的屬性或方法，其值為作用域中變量 b 的值，其上為 export { a : a } 的縮寫

export default a; - 導(dǎo)出默認(rèn)值，其值為作用域中變量 a 的值

export default 1; - 導(dǎo)出默認(rèn)值，其值為 1

常見的錯(cuò)誤導(dǎo)出語句

export a;

export default const a = 1;

以上是常見的錯(cuò)誤導(dǎo)出語句，如何避免？只要記住以下規(guī)則即可：

export 導(dǎo)出的值，必須要有名字，const 或 let 這些聲明語句規(guī)定了該值的名字，{a: b}，也規(guī)定了名字。

export default 僅導(dǎo)出值，因此不需要有特殊的方式規(guī)定名字。

慣例，問幾個(gè)問題

什么是解釋性腳本語言？

EMCAScript 與 JavaScript 是什么關(guān)系？

JavaScript 都有哪些數(shù)據(jù)類型？

JavaScript 的流程控制語句與運(yùn)算符都有哪些？

JavaScript 的語言特點(diǎn)是什么？

JavaScript 模塊是如何定義的？

JavaScript語言的歷史

什么是 JavaScript？

在瀏覽器中使用ES6的模塊功能 import 及 export

JavaScript 標(biāo)準(zhǔn)庫(kù)

該系列所有問題由 minimo 提出，愛你喲~~~