摘要：，微軟發布，同時發布了，該語言模仿同年發布的。，公司在瀏覽器對抗中沒落，將提交給國際標準化組織，希望能夠成為國際標準，以此抵抗微軟。同時將標準的設想定名為和兩類。，尤雨溪發布項目。，正式發布，并且更名為。，發布，模塊系統得到廣泛的使用。

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

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

JavaScript - 一種解釋性腳本語言

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

JavaScript，是一種用于描述網頁邏輯，處理網頁業務的解釋性腳本語言，純文本，其內容作為瀏覽器的輸入，瀏覽器負責解釋編譯運行其內容。

目前 JavaScript 也成功被應用于服務端，服務端的 JavaScript 用于描述業務邏輯，其內容作為 node 的輸入， node 負責解釋編譯運行其內容。

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

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

1994，Netscape 公司計劃實現一種瀏覽器腳本語言進行一些簡單的表單驗證。

1995，Netscape 公司雇傭了程序員 Brendan Eich 開發這種網頁腳本語言。

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

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

1995.12，Netscape 與 Sun 公司聯合發布了 JavaScript 語言。

1996.3，Navigator 2.0 瀏覽器正式內置了 JavaScript 腳本語言。

1996.8，微軟發布 Internet Explorer 3.0 ，同時發布了 JScript ，該語言模仿同年發布的 JavaScript。

1996.11，Netscape 公司在瀏覽器對抗中沒落，將 JavaScript 提交給國際標準化組織 ECMA ，希望 JavaScript 能夠成為國際標準，以此抵抗微軟。

1997.7，ECMAScript 1.0 發布。ECMAScript 是一種標準，而 JavaScript 是該標準的一種實現。

1997.10，Internet Explorer 4.0 發布，其中的 JScript 基于 ECMAScript 1.0 實現。

1999，IE 5 部署了 XMLHttpRequest 接口，允許 JavaScript 發出 HTTP 請求，為后來 Ajax 應用創造了條件。

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

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

2006，jQuery 函數庫誕生，作者為 John Resig。jQuery 統一了不同瀏覽器操作 DOM 的不同實現，被廣泛使用，極大降低了 JavaScript 語言的應用成本，推動了語言的流行。

2007.10，ECMAScript 4.0 草案發布，對 3.0 版做了大幅升級，但由于改動幅度過大，遭到了各大瀏覽器廠商的反對。

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

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

2009，Node.js 項目誕生，創始人為 Ryan Dahl，JavaScript 正式應用于服務端，以其極高的并發進入人們的視野。

2009.12，ECMAScript 5.0 正式發布。同時將標準的設想定名為 JavaScript.next 和 JavaScript.next.next 兩類。

2010，NPM 和 RequireJS 出現，標準著 JavaScript 進入模塊化。

2011.6，ECMAscript 5.1 發布，并且成為 ISO 國際標準（ISO/IEC 16262:2011）。

2012，單頁面應用程序框架（single-page app framework）開始崛起，AngularJS 項目出現。

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

2012，微軟發布 TypeScript 語言。為 JavaScript 添加了類型系統。

2013，ECMA 正式推出 JSON 的國際標準，這意味著 JSON 格式已經變得與 XML 格式一樣重要和正式了。

2013.2，Grunt.js 前端構建化工具發布，前端進入自動化開發階段。

2013.5，Facebook 發布 UI 框架庫 React。

2013.8, Gulp.js 3.0 前端構建工具發布，js 自動化開發變得簡單起來。

2014，尤雨溪發布 VUE 項目。

2015.3，Facebook 公司發布了 React Native 項目，將 React 框架移植到了手機端，用來開發手機 App。

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

2015.6，ECMAScript 6 正式發布，并且更名為 ECMAScript 2015。

2015.6，Mozilla 在 asm.js 的基礎上發布 WebAssembly 項目。

2015.9，Webpack 1.0 發布，模塊系統得到廣泛的使用。

2016.6，ECMAScript 2016（ES7） 標準發布。

2017.6，ECMAScript 2017（ES8） 標準發布，引入了 async 函數，使得異步操作的寫法出現了根本的變化。

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

2018.6，ECMAScript 2018（ES9） 標準發布。

2019.6，ECMAScript 2019（ES10） 標準發布。

...

縱觀發展歷史，很容易就能發現其中幾個關鍵點的出現，極大的促進了 JavaScript 的發展。

XMLHttpRequest 接口的出現，JavaScript 開始有了與服務器溝通的能力，誕生了 ajax ，同時也促進了 RestFul API 的發展。

jQuery 函數庫誕生，極大的降低了網頁開發成本。

V8 的出現，降低了 JavaScript 消耗的資源，加快了編譯速度，復雜的 JavaScript 程序開始出現。

Node.js 項目誕生，JavaScript 開始應用在服務端。

NPM 和 RequireJS 出現，JavaScript 正式進入模塊化。

Grunt Gulp Webpack 這些自動化構建工具的出現，極大的降低了開發成本，統一了各種內容的構建方式。

Babel 的出現徹底讓前端程序員放開了手腳，毫無顧忌的使用 ES6 而無須擔心平臺的兼容性問題。

Angular React Vue 的出現了，進一步降低了網頁開發成本，單頁應用開始出現。

ECMAScript 6 標準的公布以及實現，彌補了 JavaScript 的語言缺陷，JavaScript 更好用了。

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

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

在 JavaScript 中所有的數據都有類型，如下所示：

在 JavaScript 中數據類型除了可以按照上述的分類方式，還可以簡單的分為：基本數據類型（除了 Object 的其他類型）和引用類型（Object），這和變量的存儲方式有關，這里不過于深入，但 JavaScript 數據是如何存儲的？之后會寫，請持續關注~

運算符

算術 + - * / ** % ++ --

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

布爾運算 ! || && ?:

二進制運算 | & ~ ^ << >> >>>

在進行算術、比較、布爾運算時，會出現類型轉換，會有一些怪異的表現，那么 JavaScript 是如何進行類型轉換的？之后會寫，請持續關注~

流程

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() ... }

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

聲明

常量 - const

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

同步函數 - function

異步函數 - async function

Generator 函數 - function*

ok，JavaScript 的基礎知識就差不多也就這些，這里僅是羅列，并不過多的深入，有興趣或是不了解的可以在JavaScript 教程，進行學習。

何為標準庫？

在了解 JavaScript 發展史后，我們都知道，EcmaScript 是 JavaScript 語言實現的標準，標準除了規定基本的語法外，還定義了一些列 JavaScript 執行環境應該有的對象或是函數，這些與語法無關的其他內容，就被稱為標準庫。標準庫主要包含以下內容（一些已廢棄或不推薦使用的就不羅列了）：

全局函數

eval()

isFinite()

isNaN()

parseFloat()

parseInt()

decodeURI()

decodeURIComponent()

encodeURI()

encodeURIComponent()

...

全局對象

Number

String

Boolean

Symbol

Object

Function

Error

Math

Date

RegExp

Array

Map

Set

JSON

Promise

Generator

GeneratorFunction

AsyncFunction

Proxy

Reflect

WebAssembly

...

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

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

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

標準庫支持， JavaScript 代碼會使用 EcmaScript 所規定的標準庫，因此必須實現。

環境實現，不同的宿主環境為了實現不同的功能，會提供了不同的實現，比如瀏覽器上的 BOM 和 DOM，node 上的 fs path 等模塊。

作為 JavaScript 最重要的宿主環境，JavaScript 攜手已經走過了將近 20 年，瀏覽器因為 JavaScript 而大放異彩，JavaScript 也因為瀏覽器露出鋒芒。

瀏覽器為 JavaScript 提供語法和標準庫支持外，還實現了兩大類 API：DOM（Document Object Model） 和 BOM（Browser Object Model）。

DOM

DOM（Document Object Model） - 文檔對象模型。

不同于 EcmaScript，DOM 的規范化組織為 W3C，也就是說 DOM 其實是 HTML 標準化的一部分，因此 HTML5 最新標準涵蓋一些 DOM API 是正常的。查看 W3C DOM 的最新規范Document Object Model。

那么何為文檔對象模型？

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

DOM 涉及的 API 很多，但其 API 都有一個特點，以 標簽 打頭，比如 body.addEventListener document.getElementsByTagName 等等，可以通過以下內容進行學習：

什么是 DOM?

DOM 概述

BOM

BOM（Browser Object Model） - 瀏覽器對象模型。

BOM 其實到目前還沒有一個規范化組織來制定標準，因此各個瀏覽器的實現完全按照自己的標準來，MDN 上也沒有專門的介紹頁面，說實話有點慘，但雖然沒有標準，各個瀏覽器實現的 API 卻基本相同。

BOM 可以簡單的理解為瀏覽器實現了一套 API 使得 JavaScript 能與瀏覽器進行交互。相關的 API 全部放在 window 對象下。

window 對象主要包含以下對象：

document - 對 DOM 的引用

frames - 對當前頁面中的 iframe 的引用

history - 瀏覽器瀏覽記錄相關 API

location - 瀏覽器地址相關 API

localStorage - 本地數據存儲

sessionStorage - 會話級別的數據存儲

navigator - 瀏覽器導航信息相關 API

screen - 屏幕信息

Node 作為 JavaScript 服務端的宿主環境，除了提供了語法和標準庫的支持外，還實現了一系列的模塊，每個模塊都有具體的作用，具體可以查看Node 官方文檔。

其實異步的編程模式是不容易被應用在服務端的，或者說服務端更偏向于同步模式。

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

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

前端自動化打包的出現。

雖然異步模式不適合服務端，但卻極其符合請求的過程：請求觸發任務。

主線程僅分發任務，而不需要處理讀取文件，數據庫等耗時邏輯，不會導致程序堵塞，并發量可以達到很高。

其數據結構與前端需要的結構一致（原生支持 JSON）。

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

簡單，包括環境搭建簡單，啟動簡單程，序編寫簡單，還有 NPM 上各種庫。

ES8 AsyncFunction 異步函數的出現，將異步模式的寫法向同步寫法趨近。代碼編寫變得簡單起來。

前端人直接上手？

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

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

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

數據預處理，在大型項目中，作為請求中轉站的存在，返回更加適合前端的數據，或是將前端過來的數據更加適合后端程序，也就是數據映射。在往后交給專業的后端大佬們即可，我們就不管了。

Electron 作為一個跨平臺的 GUI 工具，使用 Chromium 和 Node 構建，實現了使用 JavaScript 開發桌面應用程序，也可以算是一個 JavaScript 的宿主環境，但其實相當于實現了一個瀏覽器， JavaScript 也被分為兩部分，這兩部分的宿主環境分別為 Node 和瀏覽器。具體可以查看Electron 官網。

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

異步 + Event Loop

簡單描述下：JavaScript 會調用宿主環境提供的 API 處理不同的任務（這些任務運行在別的線程）并設置這些任務的回調，當這些任務完成時，會在事件隊列中放入任務對應的回調，而 JavaScript 主線程會不斷的去處理事件隊列中的任務，這個過程就被稱為 Event Loop。

由于這個過程并不在 ECMAScript 所規定的規范中，因此不同的宿主環境實現是有區別的，具體可以查看我之前寫的文章：

瀏覽器下的 Event Loop

Node 下的 Event Loop

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

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

那么 JavaScript 中數據是如何存儲的？請持續關注 ~ 爭取說清楚。

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

那么 到底何為作用域？閉包在這里扮演的什么角色？請持續關注 ~

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

函數，何為函數？函數可以理解為一種行為，一段過程，或是一個任務，而這些都有一個顯著的特點，有起始點和終點。對應到函數上即為入參和返回值，在面向對象編程被大肆宣傳的情況下，函數式編程卻在發揮著獨特的魅力，以其自然清晰簡潔的編程方式，吸引著眾人的眼光。

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

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

前面說到，JavaScript 是一種函數先行的語言，那么 JavaScript 就不能面向對象了？錯！ES6 class 語法的出現，標志著 JavaScript 完全是能夠面向對象的。查看經過 babel 轉碼后的 ES5 兼容代碼，可以清楚的知道 class 僅僅只是一個語法糖，不然如何進行轉碼呢？而面向對象實現的關鍵是 JavaScript 的另外一個特點：原型鏈（prototype）。

那么 何為原型鏈（prototype）？原型又是什么？請持續關注 ~ 爭取說清楚。

談到 this 相信大部分面向對象編程語言的 coder 都很熟悉，常常出現在對象所屬的方法中，JavaScript 表現出來的行為和這些語言一致，但其本質卻是極大的不同，因為在每一個函數下都有 this 的存在，那么 this 到底是什么？其所代表的又是什么內容？這和 JavaScript 的數據存儲有點關系，因此在不弄懂數據存儲前，this 往往難以預測。

this 到底是如何取值的，在 JavaScript 中數據是如何存儲的？中會有提到，請持續關注 ~

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

請看之后的文章：什么是箭頭函數？

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

ECMAScript 6 入門。

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

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

CommonJS 為 Node 端的模塊系統，內置 3 個變量 require exports 和 module。通過 require 引入模塊，exports 對外導出，module 保存該模塊的信息。如下所示

"use strict";

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

exports.addx = addx;

相信大家都知道，導出還有一種寫法

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

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

exports = { addx };

出現問題的原因是 exports 只是一個引用，如果重新賦值的話會導致該變量引用到另一個數據上，這樣的結果就是 module.exports === exports // false，而模塊的信息是以 module 為標準的，因此就變成了無導出。那如果究其原因到底為什么會發生引用變化，可以查看 JavaScript 中數據是如何存儲的？雖然還沒寫，但肯定會寫的。

Module 為 ES6 推出的模塊化規范，目的在于統一各種不同的規范，由 import 導入 export 導出。如下所示

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

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

常見的導入語句有

import { xxx } from "a"; - 從 a 中導出 xxx 的屬性或方法，數據由 a 的 export 導出

import { xxx as yyy } from "a"; - 從 a 中導出 xxx 的屬性或方法并重命名為 yyy，數據由 a 的 export 導出

import xxx from "a"; - 從 a 中導出默認值，并賦值為 xxx，數據由 a 的 export default 導出

常見的導出語句有

export const a = 1; - 導出一個常量，名字為 a 值為 1

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

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

export default a; - 導出默認值，其值為作用域中變量 a 的值

export default 1; - 導出默認值，其值為 1

常見的錯誤導出語句

export a;

export default const a = 1;

以上是常見的錯誤導出語句，如何避免？只要記住以下規則即可：

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

export default 僅導出值，因此不需要有特殊的方式規定名字。

慣例，問幾個問題

什么是解釋性腳本語言？

EMCAScript 與 JavaScript 是什么關系？

JavaScript 都有哪些數據類型？

JavaScript 的流程控制語句與運算符都有哪些？

JavaScript 的語言特點是什么？

JavaScript 模塊是如何定義的？

JavaScript語言的歷史

什么是 JavaScript？

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

JavaScript 標準庫

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