淺談JavaScript的語言特性
前言
在JavaScript中，作用域、上下文、閉包、函數等算是精華中的精華了。對于初級JSer來說，是進階必備。對于前端攻城師來說，只有靜下心來，理解了這些精華，才能寫出優雅的代碼。
本文旨在總結容易忘記的重要知識，不會講基本的概念。如果對基本知識不太熟悉，就去翻下《JavaScript權威指南》吧~
參考文章如下(建議讀者朋友用chrome看這些文章吧，不然的話會錯過很多精彩哦~)：
http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
語言特性
函數表達式
先看代碼段：
- var f = function foo(){
- return typeof foo; // foo是在內部作用域內有效
- };
- // foo在外部用于是不可見的
- typeof foo; // "undefined"
- f(); // "function"
這里想說一點的就是，在函數表達式中的foo，只能在函數內部引用，外面是不能引用的。
json
很多JavaScript開發人員都錯誤地把JavaScript對象字面量(Object Literals)稱為JSON對象(JSON Objects)。 JSON是設計成描述數據交換格式的，它也有自己的語法，這個語法是JavaScript的一個子集。
{ “prop”: “val” } 這樣的聲明有可能是JavaScript對象字面量，也有可能是JSON字符串，取決于什么上下文使用它。如果是用在string上下文(用單引號或雙引 號引住，或者從text文件讀取)的話，那它就是JSON字符串，如果是用在對象字面量上下文中，那它就是對象字面量。
- // 這是JSON字符串
- var foo = '{ "prop": "val" }';
- // 這是對象字面量
- var bar = { "prop": "val" };
還有一點需要知道的是，JSON.parse用來將JSON字符串反序列化成對象，JSON.stringify用來將對象序列化成JSON字符串。老版本的瀏覽器不支持這個對象，但你可以通過json2.js來實現同樣的功能。
原型
- function Animal (){
- // ...
- }
- function cat (){
- // ...
- }
- cat.prototype = new Animal();//這種方式會繼承構造函數里面的。
- cat.prototype = Animal.prototype;//這種方式不會繼承構造函數里面的。
- //還有一個重要的細節需要注意的就是一定要維護自己的原型鏈,新手總會忘記這個！
- cat.prototype.constructor = cat;
如果我們徹底改變函數的prototype屬性（通過分配一個新的對象），那原始構造函數的引用就是丟失，這是因為我們創建的對象不包括constructor屬性：
- function A() {}
- A.prototype = {
- x: 10
- };
- var a = new A();
- alert(a.x); // 10
- alert(a.constructor === A); // false!
讓我們一起看下MDN上關于constructor的解釋吧：prototype：Returns a reference to the Object function that created the instance’s prototype.因此，對函數的原型引用需要手工恢復：
- function A() {}
- A.prototype = {
- constructor: A,
- x: 10
- };
- var a = new A();
- alert(a.x); // 10
- alert(a.constructor === A); // true
然而，提交prototype屬性不會影響已經創建對象的原型（只有在構造函數的prototype屬性改變的時候才會影響到)，就是說新創建的對象才有有新的原型，而已創建對象還是引用到原來的舊原型（這個原型已經不能被再被修改了）。
- function A() {}
- A.prototype.x = 10;
- var a = new A();
- alert(a.x); // 10
- A.prototype = {
- constructor: A,
- x: 20
- y: 30
- };
- // 對象a是通過隱式的[[Prototype]]引用從原油的prototype上獲取的值
- alert(a.x); // 10
- alert(a.y) // undefined
- var b = new A();
- // 但新對象是從新原型上獲取的值
- alert(b.x); // 20
- alert(b.y) // 30
因此，“動態修改原型將影響所有的對象都會擁有新的原型”是錯誤的，新原型僅僅在原型修改以后的新創建對象上生效。這里的主要規則是：對象的原型是對象的創建的時候創建的，并且在此之后不能修改為新的對象，如果依然引用到同一個對象，可以通過構造函數的顯式prototype引用，對象創建以后，只能對原型的屬性進行添加或修改。
變量對象
在函數執行上下文中，VO(variable object)是不能直接訪問的，此時由活動對象(activation object)扮演VO的角色。 活動對象是在進入函數上下文時刻被創建的，它通過函數的arguments屬性初始化。arguments屬性的值是Arguments對象：
- function foo(x, y, z) {
- // 聲明的函數參數數量arguments (x, y, z)
- alert(foo.length); // 3
- // 真正傳進來的參數個數(only x, y)
- alert(arguments.length); // 2
- // 參數的callee是函數自身
- alert(arguments.callee === foo); // true
- }
當進入執行上下文(代碼執行之前)時，VO里已經包含了下列屬性：1. 函數的所有形參(如果我們是在函數執行上下文中)；
1.所有函數聲明(FunctionDeclaration, FD)；
2.所有變量聲明(var, VariableDeclaration)；
另一個經典例子：
- alert(x); // function
- var x = 10;
- alert(x); // 10
- x = 20;
- function x() {};
- alert(x); // 20
根據規范函數聲明是在當進入上下文時填入的; 在進入上下文的時候還有一個變量聲明“x”，那么正如我們在上面所說，變量聲明在順序上跟在函數聲明和形式參數聲明之后，而且在這個進入上下文階段，變量聲明不會干擾VO中已經存在的同名函數聲明或形式參數聲明。變量相對于簡單屬性來說，變量有一個特性(attribute)：{DontDelete},這個特性的含義就是不能用delete操作符直接刪除變量屬性。
- a = 10;
- alert(window.a); // 10
- alert(delete a); // true
- alert(window.a); // undefined
- var b = 20;
- alert(window.b); // 20
- alert(delete b); // false
- alert(window.b); // still 20。b is variable,not property!
- var a = 10; // 全局上下文中的變量
- (function () {
- var b = 20; // function上下文中的局部變量
- })();
- alert(a); // 10
- alert(b); // 全局變量 "b" 沒有聲明.
this
在一個函數上下文中，this由調用者提供，由調用函數的方式來決定。如果調用括號()的左邊是引用類型的值，this將設為引用類型值 的base對象（base object），在其他情況下（與引用類型不同的任何其它屬性），這個值為null。不過，實際不存在this的值為null的情況，因為當this的值 為null的時候，其值會被隱式轉換為全局對象。
- (function () {
- alert(this); // null => global
- })();
在這個例子中，我們有一個函數對象但不是引用類型的對象（它不是標示符，也不是屬性訪問器），相應地，this值最終設為全局對象。
- var foo = {
- bar: function () {
- alert(this);
- }
- };
- foo.bar(); // Reference, OK => foo
- (foo.bar)(); // Reference, OK => foo
- (foo.bar = foo.bar)(); // global
- (false || foo.bar)(); // global
- (foo.bar, foo.bar)(); // global
問題在于后面的三個調用，在應用一定的運算操作之后，在調用括號的左邊的值不在是引用類型。
1.***個例子很明顯———明顯的引用類型，結果是，this為base對象，即foo。
2.在第二個例子中，組運算符并不適用，想想上面提到的，從引用類型中獲得一個對象真正的值的方法，如GetValue。相應的，在組運算的返回中———我們得到仍是一個引用類型。這就是this值為什么再次設為base對象，即foo。
3.第三個例子中，與組運算符不同，賦值運算符調用了GetValue方法。返回的結果是函數對象（但不是引用類型），這意味著this設為null，結果是global對象。
4.第四個和第五個也是一樣——逗號運算符和邏輯運算符（OR）調用了GetValue 方法，相應地，我們失去了引用而得到了函數。并再次設為global。
正如我們知道的，局部變量、內部函數、形式參數儲存在給定函數的激活對象中。
- function foo() {
- function bar() {
- alert(this); // global
- }
- bar(); // the same as AO.bar()
- }
活動對象總是作為this返回，值為null——（即偽代碼的AO.bar()相當于null.bar()）。這里我們再次回到上面描述的例子，this設置為全局對象。
#p#
作用域鏈
通過函構造函數創建的函數的scope屬性總是唯一的全局對象。
一個重要的例外，它涉及到通過函數構造函數創建的函數。
- var x = 10;
- function foo() {
- var y = 20;
- function barFD() { // 函數聲明
- alert(x);
- alert(y);
- }
- var barFn = Function('alert(x); alert(y);');
- barFD(); // 10, 20
- barFn(); // 10, "y" is not defined
- }
- foo();
還有：
- var x = 10, y = 10;
- with ({x: 20}) {
- var x = 30, y = 30;
- //這里的 x = 30 覆蓋了x = 20；
- alert(x); // 30
- alert(y); // 30
- }
- alert(x); // 10
- alert(y); // 30
在進入上下文時發生了什么？標識符“x”和“y”已被添加到變量對象中。此外，在代碼運行階段作如下修改：
x = 10, y = 10;
對象{x:20}添加到作用域的前端;
在with內部，遇到了var聲明，當然什么也沒創建，因為在進入上下文時，所有變量已被解析添加;
在第二步中，僅修改變量“x”，實際上對象中的“x”現在被解析，并添加到作用域鏈的最前端，“x”為20，變為30;
同樣也有變量對象“y”的修改，被解析后其值也相應的由10變為30;
此外，在with聲明完成后，它的特定對象從作用域鏈中移除（已改變的變量“x”－－30也從那個對象中移除），即作用域鏈的結構恢復到with得到加強以前的狀態。
在***兩個alert中，當前變量對象的“x”保持同一，“y”的值現在等于30，在with聲明運行中已發生改變。
函數
關于圓括號的問題
讓我們看下這個問題：‘ 為何在函數創建后的立即調用中必須用圓括號來包圍它？’，答案就是：表達式句子的限制就是這樣的。
按照標準，表達式語句不能以一個大括號 { 開始是因為他很難與代碼塊區分，同樣，他也不能以函數關鍵字開始，因為很難與函數聲明進行區分。即，所以，如果我們定義一個立即執行的函數，在其創建后立即按以下方式調用：
- function () {
- ...
- }();
- // 即便有名稱
- function foo() {
- ...
- }();
我們使用了函數聲明，上述2個定義，解釋器在解釋的時候都會報錯，但是可能有多種原因。如果在全局代碼里定義（也就是程序級別），解釋器會將它看做是函數聲明，因為他是以function關鍵字開頭，***個例子，我們會得到SyntaxError錯誤，是因為函數聲明沒有名字（我們前面提到了函數聲明必須有名字）。第二個例子，我們有一個名稱為foo的一個函數聲明正常創建，但是我們依然得到了一個語法錯誤——沒有任何表達式的分組操作符錯誤。在函數聲明后面他確實是一個分組操作符，而不是一個函數調用所使用的圓括號。所以如果我們聲明如下代碼：
- // "foo" 是一個函數聲明，在進入上下文的時候創建
- alert(foo); // 函數
- function foo(x) {
- alert(x);
- }(1); // 這只是一個分組操作符，不是函數調用！
- foo(10); // 這才是一個真正的函數調用，結果是10
創建表達式最簡單的方式就是用分組操作符括號，里邊放入的永遠是表達式，所以解釋器在解釋的時候就不會出現歧義。在代碼執行階段這個的function就會被創建，并且立即執行，然后自動銷毀（如果沒有引用的話）
- (function foo(x) {
- alert(x);
- })(1); // 這才是調用，不是分組操作符
上述代碼就是我們所說的在用括號括住一個表達式，然后通過（1）去調用。注意，下面一個立即執行的函數，周圍的括號不是必須的，因為函數已經處在表達式的位置，解析器知道它處理的是在函數執行階段應該被創建的FE，這樣在函數創建后立即調用了函數。
- var foo = {
- bar: function (x) {
- return x % 2 != 0 ? 'yes' : 'no';
- }(1)
- };
- alert(foo.bar); // 'yes'
就像我們看到的，foo.bar是一個字符串而不是一個函數，這里的函數僅僅用來根據條件參數初始化這個屬性——它創建后并立即調用。
| 因此，”關于圓括號”問題完整的答案如下： 當函數不在表達式的位置的時候，分組操作符圓括號是必須的——也就是手工將函數轉化成FE。 如果解析器知道它處理的是FE，就沒必要用圓括號。 |
自由變量：
- function testFn() {
- var localVar = 10;//對于innerFn函數來說，localVar就屬于自由變量。
- function innerFn(innerParam) {
- alert(innerParam + localVar);
- }
- return innerFn;
- }
閉包的靜態作用域：
- var z = 10;
- function foo() {
- alert(z);
- }
- foo(); // 10 – 使用靜態和動態作用域的時候
- (function () {
- var z = 20;
- foo(); // 10 – 使用靜態作用域, 20 – 使用動態作用域
- })();
- // 將foo作為參數的時候是一樣的
- (function (funArg) {
- var z = 30;
- funArg(); // 10 – 靜態作用域, 30 – 動態作用域
- })(foo);
理論：因為作用域鏈，使得所有的函數都是閉包（與函數類型無關： 匿名函數，FE，NFE，FD都是閉包）。從實踐角度：以下函數才算是閉包：* 即使創建它的上下文已經銷毀，它仍然存在（比如，內部函數從父函數中返回）
* 在代碼中引用了自由變量
***：
ECMAScript是一種面向對象語言，支持基于原型的委托式繼承。
