## 一、概述 ### 1.1 誕生 JavaScript 因為互聯網而生，緊跟著瀏覽器的出現而問世。 * 1992年底，美國國家超級電腦應用中心（NCSA）開始開發一個獨立的瀏覽器，叫做 Mosaic。這是人類歷史上第一個瀏覽器，從此網頁可以在圖形界面的窗口瀏覽。 * 1994年10月，NCSA 的一個主要程序員 Marc Andreessen 聯合風險投資家 Jim Clark，成立了 Netscape。這家公司的方向，就是在 Mosaic 的基礎上，開發面向普通用戶的新一代的瀏覽器 Netscape Navigator。 * 1994年12月，Navigator 發布了1.0版，公司很快發現，Navigator 瀏覽器需要一種可以嵌入網頁的腳本語言，用來控制瀏覽器行為。 * 那一年，正逢 Sun 公司的 Java 語言問世，市場推廣活動非常成功。Netscape 公司決定與 Sun 公司合作，瀏覽器支持嵌入 Java 小程序（后來稱為 Java applet）。但是，瀏覽器腳本語言是否就選用 Java，則存在爭論。后來，還是決定不使用 Java，但是要求腳本語言的語法要接近 Java，并且可以支持 Java 程序。 * 1995年，Netscape 公司雇傭了程序員 Brendan Eich 開發這種網頁腳本語言。Brendan Eich 只用了10天，就設計完成了這種語言的第一版。 * 1995年12月，Netscape 公司與 Sun 公司（Java 語言的發明者和所有者）達成協議，后者允許將這種語言叫做 JavaScript。這樣一來，Netscape 公司可以借助 Java 語言的聲勢，而 Sun 公司則將自己的影響力擴展到了瀏覽器。 * 1996年3月，Navigator 2.0 瀏覽器正式內置了 JavaScript 腳本語言。 ### 1.2 JavaScript 能做什么？ JavaScript 的發明目的，就是作為瀏覽器的內置腳本語言，為網頁開發者提供操控瀏覽器的能力。它是目前唯一一種通用的瀏覽器腳本語言，所有瀏覽器都支持。它可以讓網頁呈現各種特殊效果，為用戶提供良好的互動體驗。 目前，全世界幾乎所有網頁都使用 JavaScript。如果不用，網站的易用性和使用效率將大打折扣，無法成為操作便利、對用戶友好的網站。 對于一個互聯網開發者來說，如果你想提供漂亮的網頁、令用戶滿意的上網體驗、各種基于瀏覽器的便捷功能、前后端之間緊密高效的聯系，JavaScript 是必不可少的工具。 ### 1.3 JavaScript 與 ECMAScript 的關系 1996年8月，微軟模仿 JavaScript 開發了一種相近的語言，取名為JScript，首先內置于IE 3.0。Netscape 公司面臨喪失瀏覽器腳本語言的主導權的局面。 1996年11月，Netscape 公司決定將 JavaScript 提交給國際標準化組織 ECMA（European Computer Manufacturers Association），希望 JavaScript 能夠成為國際標準，以此抵抗微軟。ECMA 的39號技術委員會（Technical Committee 39）負責制定和審核這個標準，成員由業內的大公司派出的工程師組成。該委員會定期開會，所有的郵件討論和會議記錄，都是公開的。 1997年7月，ECMA 組織發布262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript。這個版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript，一方面是由于商標的關系，Java 是 Sun 公司的商標，根據一份授權協議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 已經被 Netscape 公司注冊為商標，另一方面也是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利于保證這門語言的開放性和中立性。因此，ECMAScript 和 JavaScript 的關系是，前者是后者的規格，后者是前者的一種實現。在日常場合，這兩個詞是可以互換的。 ## 二、基本語法 ### 2.1 語句 JavaScript 程序的執行單位為行（line），也就是一行一行地執行。一般情況下，每一行就是一個語句。語句（statement）是為了完成某種任務而進行的操作，比如下面就是一行賦值語句。 ``` var a = 1 + 3; ``` 這條語句先用`var`命令，聲明了變量`a`，然后將`1 + 3`的運算結果賦值給變量`a`。 `1 + 3`叫做表達式（expression），指一個為了得到返回值的計算式。語句和表達式的區別在于，前者主要為了進行某種操作，一般情況下不需要返回值；后者則是為了得到返回值，一定會返回一個值。 語句以分號結尾，一個分號就表示一個語句結束。多個語句可以寫在一行內。 ~~~ var a = 1 + 3 ; var b = 'abc'; ~~~ ### 2.2 變量 變量是對“值”的具名引用。變量就是為“值”起名，然后引用這個名字，就等同于引用這個值。變量的名字就是變量名。 ~~~ var a = 1; ~~~ 上面的代碼先聲明變量`a`，然后在變量`a`與數值1之間建立引用關系，稱為將數值1“賦值”給變量`a`。以后，引用變量名`a`就會得到數值1。最前面的`var`，是變量聲明命令。它表示通知解釋引擎，要創建一個變量`a`。 變量的聲明和賦值，是分開的兩個步驟，上面的代碼將它們合在了一起，實際的步驟是下面這樣。 ~~~ var a; a = 1; ~~~ 如果只是聲明變量而沒有賦值，則該變量的值是`undefined`。`undefined`是一個特殊的值，表示“無定義”。 ### 2.3 標識符 標識符（identifier）指的是用來識別各種值的合法名稱。最常見的標識符就是變量名，以及后面要提到的函數名。 標識符有一套命名規則，不符合規則的就是非法標識符。JavaScript 引擎遇到非法標識符，就會報錯。 簡單說，標識符命名規則如下。 * 第一個字符，可以是任意 Unicode 字母（包括英文字母和其他語言的字母），以及美元符號（`$`）和下劃線（`_`）。 * 第二個字符及后面的字符，除了 Unicode 字母、美元符號和下劃線，還可以用數字`0-9`。 > JavaScript 有一些保留字，不能用作標識符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。 ### 2.4 注釋 源碼中被 JavaScript 引擎忽略的部分就叫做注釋，它的作用是對代碼進行解釋。JavaScript 提供兩種注釋的寫法：一種是單行注釋，用`//`起頭；另一種是多行注釋，放在`/*`和`*/`之間。 ``` // 這是單行注釋 /* 這是 多行 注釋 */ ``` 此外，由于歷史上 JavaScript 可以兼容 HTML 代碼的注釋，所以`<!--`和`-->`也被視為合法的單行注釋。 ### 2.5 條件語句 JavaScript 提供`if`結構和`switch`結構，完成條件判斷，即只有滿足預設的條件，才會執行相應的語句。 #### 2.5.1 if 結構 `if`結構先判斷一個表達式的布爾值，然后根據布爾值的真偽，執行不同的語句。所謂布爾值，指的是 JavaScript 的兩個特殊值，`true`表示真，`false`表示`偽`。 ~~~ if (布爾值) 語句; // 或者 if (布爾值) 語句; ~~~ 上面是`if`結構的基本形式。需要注意的是，“布爾值”往往由一個條件表達式產生的，必須放在圓括號中，表示對表達式求值。如果表達式的求值結果為`true`，就執行緊跟在后面的語句；如果結果為`false`，則跳過緊跟在后面的語句。 ~~~ if (m === 3) m = m + 1; ~~~ 上面代碼表示，只有在`m`等于3時，才會將其值加上1。 這種寫法要求條件表達式后面只能有一個語句。如果想執行多個語句，必須在`if`的條件判斷之后，加上大括號，表示代碼塊（多個語句合并成一個語句）。 ~~~ if (m === 3) { m += 1; } ~~~ #### 2.5.2 if...else 結構 `if`代碼塊后面，還可以跟一個`else`代碼塊，表示不滿足條件時，所要執行的代碼。 ~~~ if (m === 3) { // 滿足條件時，執行的語句 } else { // 不滿足條件時，執行的語句 } ~~~ 上面代碼判斷變量`m`是否等于3，如果等于就執行`if`代碼塊，否則執行`else`代碼塊。 對同一個變量進行多次判斷時，多個`if...else`語句可以連寫在一起。 ~~~ if (m === 0) { // ... } else if (m === 1) { // ... } else if (m === 2) { // ... } else { // ... } ~~~ #### 2.5.3 switch 結構 多個`if...else`連在一起使用的時候，可以轉為使用更方便的`switch`結構。 ~~~ switch (fruit) { case "banana": // ... break; case "apple": // ... break; default: // ... } ~~~ 上面代碼根據變量`fruit`的值，選擇執行相應的`case`。如果所有`case`都不符合，則執行最后的`default`部分。需要注意的是，每個`case`代碼塊內部的`break`語句不能少，否則會接下去執行下一個`case`代碼塊，而不是跳出`switch`結構。 ~~~ var x = 1; switch (x) { case 1: console.log('x 等于1'); case 2: console.log('x 等于2'); default: console.log('x 等于其他值'); } // x等于1 // x等于2 // x等于其他值 ~~~ 上面代碼中，`case`代碼塊之中沒有`break`語句，導致不會跳出`switch`結構，而會一直執行下去。正確的寫法是像下面這樣。 ~~~ switch (x) { case 1: console.log('x 等于1'); break; case 2: console.log('x 等于2'); break; default: console.log('x 等于其他值'); } ~~~ ### 2.6 循環語句 循環語句用于重復執行某個操作，它有多種形式。 #### 2.6.1 while 循環 `While`語句包括一個循環條件和一段代碼塊，只要條件為真，就不斷循環執行代碼塊。 ~~~ while (條件) { 語句; } ~~~ 下面是`while`語句的一個例子。 ~~~ var i = 0; while (i < 100) { console.log('i 當前為：' + i); i = i + 1; } ~~~ 上面的代碼將循環100次，直到`i`等于100為止。 #### 2.6.2 for 循環 `for`語句是循環命令的另一種形式，可以指定循環的起點、終點和終止條件。它的格式如下。 ~~~ for (初始化表達式; 條件; 遞增表達式) 語句 // 或者 for (初始化表達式; 條件; 遞增表達式) { 語句 } ~~~ `for`語句后面的括號里面，有三個表達式。 * 初始化表達式（initialize）：確定循環變量的初始值，只在循環開始時執行一次。 * 條件表達式（test）：每輪循環開始時，都要執行這個條件表達式，只有值為真，才繼續進行循環。 * 遞增表達式（increment）：每輪循環的最后一個操作，通常用來遞增循環變量。