javascript基礎語法——詞法結構

前面的話

　　javascript是一門簡單的語言，也是一門複雜的語言。說它簡單，是由於學會使用它只需片刻功夫；而說它複雜，是由於要真正掌握它則須要數年時間。實際上，前端工程師很大程度上就是指javascript工程師。前端入門容易精通難，說的是前端，更指的是javascript。本文是javascript基礎語法的第一篇——詞法結構。詞法結構是一套基礎性規則，用來描述如何使用javascript來編寫程序

 

與java關係

　　關於javascript有這樣一個說法，java和javascript的關係是雷鋒和雷鋒塔的關係。那到底有沒有關係呢

　　javascript最開始的名字是LiveScript，後來選擇javascript做爲其正式名稱的緣由，大概是想讓它聽起來有系出名門的感受。除了語法看起來和java相似以外，javascript和java是徹底不一樣的兩種編程語言

　　程序設計語言分爲解釋型和編譯型兩大類。java或C++等語言須要一個編譯器。編譯器是一種程序，可以把用java等高級語言編寫出來的源代碼翻譯爲直接在計算機上執行的文件。解釋型程序設計語言不須要編譯器——它們僅須要解釋器，瀏覽器中的javascript解釋器將直接讀入源代碼並執行

　　java在理論上幾乎能夠部署在任何環境，但javascript卻傾向於只應用在web瀏覽器。並且，在javascript語言中，函數是一種獨立的數據類型，採用基於原型對象（prototype）的繼承鏈，javascript語法要比Java自由得多

　　基本上，JavaScript這個名字的原意是「很像Java的腳本語言」

 

定義

　　javascript是一門動態的、弱類型的解釋型編程語言，很是適合面向對象和函數式的編程風格。javascript的語法源自java，它的一等函數來自scheme，它的基於原型的繼承來自self

　　javascript用來加強頁面動態效果，實現頁面與用戶之間的實時、動態交互

　　javascript由三部分組成：ECMAScript、DOM和BOM

　　[1]ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲計算機制造商協會）

　　[2]DOM(Document Object Model)文檔對象模型，提供訪問和操做網頁內容的方法和接口

　　[3]BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和接口

 

大小寫敏感

　　關於javascript這門語言，再怎麼強調都不爲過的特性是大小寫敏感。javascript中的關鍵字、變量、函數名和全部的標識符都必須採起一致的大小寫形式

//'online'、'Online'、'OnLine'、'ONLINE'是四個不一樣的變量名

　　[注意]HTML並不區分大小寫(儘管XHTML區分大小寫)。許多客戶端javascript對象和屬性與它們表示的HTML標籤和屬性同名。在HTML中，這些標籤和屬性名可使用大寫也可使用小寫，而在javascript中則必須是小寫。例如，在HTML中設置事件處理程序時，onclick屬性能夠寫成onClick，但在javascript代碼中，必須使用小寫的onclick

 

保留字(ReservedWord)

　　和其餘任何編程語言同樣，javascript保留了一些標識符爲本身所用。這些保留字不能用作普通的標識符。因爲好多參考書的誤導，貌似保留字和關鍵字是分開的，其實並非，關鍵字只是保留字的一部分。保留字包括關鍵字、將來保留字、空字面量和布爾值字面量

保留字 ReservedWord ::
   Keyword
   FutureReservedWord
   NullLiteral
   BooleanLiteral

關鍵字

    break      do         instanceof        typeof
    case       else       new               var
    catch      finally    return            void
    continue   for        switch            while
    debugger   function   this              with
    default    if         throw             delete
    in         try

將來保留字

　　下列詞被用做建議擴展關鍵字，所以保留，以便將來可能採用這些擴展

    class      enum       extends       super
    const      export     import

ECMAScript3版本

　　以上是ECMAScript5的保留字，但在ECMAScript3版本中的保留字並不同，若但願代碼能在基於ECMAScript3實現的解釋器上運行的話，應該避免使用如下保留字做爲標識符

abstract boolean byte char class constdouble enum export extends final float
goto implements import int interfacelong native package private protected
public short  static super synchronized throw transient volatile 

預約義變量和函數

　　此外，javascript預約義了不少全局變量和函數，應該避免把它們的名字用作標識符名

arguments Array Boolean Date decodeURI decodeURIComponent encodeURI
encodeURIComponent Error eval EvalError Function Infinity isFinite
isNaN JSON Math NaN Number Object parseFloat parseInt RangeError
ReferenceError RegExp String SyntaxError TypeError undefined URIError

 

註釋(Comment)

　　不是全部語句都須要javascript解釋器去解釋並執行。有時須要在腳本中寫一些僅供本身參考或提醒本身的信息，並但願javascript解釋器能直接忽略掉這些信息，這類信息就是註釋

　　註釋能有效幫助瞭解代碼流程，在代碼中它們扮演生活中便條的角色，能夠幫助咱們弄清楚腳本到底幹了什麼

　　[注意]註釋必定要精確地描述代碼，沒有用的註釋比沒有註釋還要糟糕

　　有多種方式能夠在javascript腳本中插入註釋，包括單行註釋、多行註釋和HTML風格的註釋

【1】單行註釋以兩個斜槓開頭

//單行註釋

【2】多行註釋又叫塊級註釋，以一個斜槓和一個星號/*開頭，以一個星號和一個斜槓*/結尾

/*
    這是一個多行註釋
 */

　　[注意]塊級註釋/**/能夠跨行書寫，但不能嵌套，不然會報錯

//報錯
/*
註釋1
/*
註釋1.1
 */
 */

　　[注意]塊級註釋/**/中的那些字符也可能出如今正則表達式字面量裏，因此塊級註釋對於被註釋的代碼塊來講是不安全的

/*
    var rm_a = /a*/.match(s);
*/

【3】HTML風格的註釋僅僅適用於單行註釋，其實javascript解釋器對<!--的處理和對//的處理是同樣的

<!-- 這是javascript中的註釋

　　若是在HTML文檔中，還須要以-->來結束註釋

<!-- 這是HTML中的註釋 -->

　　但javascript不要求這麼作，它會把-->視爲註釋內容的一部分

　　[注意]HTML容許上面這樣的註釋跨越多行，但這種註釋的每行都必須在開頭加上"<!--"來做爲標誌

<!-- 我是註釋1
<!-- 我是註釋2
<!-- 我是註釋3

　　由於javascript解釋器在處理這種風格的註釋時與HTML作法不一樣，爲避免發生混淆，最好不要在javascript腳本中使用HTML風格的註釋

 

空白(WhiteSpace)

　　空白一般沒有意義，有時候必需要用它來分隔字符序列，不然它們就會被合併成一個符號

var that = this;

　　var和that之間的空白是不能移除的，但其餘的空白能夠移除

　　javascript會忽略程序中標識(token)之間的空格。多數狀況下，javascript一樣會忽略換行符。因爲能夠在代碼中隨意使用空格和換行，所以能夠採用整齊、一致的縮進來造成統一的編碼風格，從而提升代碼的可讀性

//經過增長空白字符，提升代碼可讀性
for(var i = 1; i < 10; i++){
    //
}

　　javascript將以下這些識別爲空白字符WhiteSpace

\u0009    水平製表符         <TAB>
\u000B    垂直製表符         <VT>
\u000C    換頁符            <FF>
\u0020    空格符            <SP>
\u00A0    非中斷空格符       <NBSP>
\uFEFF    字符序標記

　　javascript將以下字符識別爲行終止符LineTerminator

\u000A    換行符        <LF>
\u000D    回車符        <CR>
\u2028    行分隔符      <LS>
\u2029    段落分割符     <PS>

 

可選的分號

　　javascript使用分號;將語句分隔開，這對加強代碼的可讀性和整潔性是很是重要的

　　有些地方能夠省略分號，有些地方則不能省略分號

//兩條語句用兩行書寫，第一個分號能夠省略
a = 3;
b = 4;
//兩條語句用一行書寫，第一個分號不能省略
a = 3; b = 4;

　　但javascript並非在全部換行處都填補分號，只有在缺乏了分號就沒法正確解析代碼時，javascript纔會填補分號。換句話說，若是當前語句和隨後的非空格字符不能當成一個總體來解析的話，javascript就在當前語句行結束處填補分號

var a
a
=
3
console.log(a)

　　javascript將其解析爲:

var a;
a = 3;
console.log(a);

　　這種語句的分隔規則會致使一些意想不到的情形

var y = x + f
(a+b).toString

　　javascript將其解析爲:

var y = x + f(a+b).toString

　　所以，爲了能讓上述代碼解析成兩條不一樣的語句，必須手動填寫行尾的顯式分號

　　一般來說，若是一條語句以'('、'['、'/'、'+'、'-'等符號開始，那麼它極有可能和前一條語句合一塊兒解析

兩個例外

　　若是當前語句和下一行語句沒法合併解析，javascript會在第一行後填補分號，這是通用規則，但有兩個例外

　　【1】第一個例外是涉及return、break、continue、throw語句的場景中。若是這四個關鍵字後緊跟着換行，javascript會在換行處填補分號

return
true;

　　javascript將其解析爲:

return;true;

　　而代碼的本意是:

return true;

　　【2】第二個例外是在涉及++和--運算符時，若是將其用做後綴表達式，它和表達式應該同一行。不然，行尾將填補分號，同時++或--將做爲下一行代碼的前綴操做符並與之一塊兒解析

x
++
y

　　javascript將其解析爲:

x;++y;

　　而代碼的本意是:

x++;y;

　　雖然分號不是必須的，但最好不要省略它，由於加上分號能夠避免不少錯誤，代碼行結尾處沒有分號會致使壓縮錯誤。加上分號也會在某些狀況下增進代碼的性能，由於這樣解析器就沒必要再花時間推測應該在哪裏插入分號了

 

參考資料

【1】 ES5/詞法 https://www.w3.org/html/ig/zh/wiki/ES5/lexical
【2】 阮一峯Javascript標準參考教程——語法概述 http://javascript.ruanyifeng.com/grammar/basic.html
【3】 W3School-Javascript高級教程——ECMAScript語法 http://www.w3school.com.cn/js/pro_js_syntax.asp【4】《javascript權威指南(第6版)》第2章 詞法結構【5】《javascript高級程序設計(第3版)》第3章 基本概念【6】《javascript語言精粹(修訂版)》第2章 語法【7】《javascript DOM編程藝術(第2版)》第2章 Javascript語法