淺談關於JavaScript的語言特性分析

前言
在JavaScript中，範圍、上下文、閉包、函數等算是精華中的精華了。對於初級JSer來說，是進階必備。對於前端攻城師來說，只有靜下心來，理解了這些精華，才能寫出優雅的代碼。

本文旨在總結容易忘記的重要知識，不會講基本的概念。如果對基本知識不太熟悉，就去翻下《 JavaScript權威指南》吧~

語言特性函數運算式

先看程式碼片段：

複製代碼 代碼如下:[javascript] view plaincopyprint?
var f = function foo(){
return typeof foo; // foo是在內部範圍內有效
};
// foo在外部用於是不可見的
typeof foo; // "undefined"
f(); // "function"
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字串，如果是用在對象字面量上下文中，那它就是對象字面量。

複製代碼 代碼如下:[javascript] view plaincopyprint?
// 這是JSON字串
var foo = '{ "prop": "val" }';
// 這是對象字面量
var bar = { "prop": "val" };
// 這是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. 函數的所有形參(如果我們是在函數執行內容中)；

•所有函式宣告(FunctionDeclaration, FD)；
•所有變數聲明(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
})();<SPAN style="LINE-HEIGHT: 25.2px; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; FONT-SIZE: 14px"> </SPAN>

在這個例子中，我們有一個函數對象但不是參考型別的對象（它不是標示符，也不是屬性訪問器），相應地，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

問題在於後面的三個調用，在應用一定的運算操作之後，在調用括弧的左邊的值不在是參考型別。

•第一個例子很明顯———明顯的參考型別，結果是，this為base對象，即foo。

•在第二個例子中，組運算子並不適用，想想上面提到的，從參考型別中獲得一個對象真正的值的方法，如GetValue。相應的，在組運算的返回中———我們得到仍是一個參考型別。這就是this值為什麼再次設為base對象，即foo。

•第三個例子中，與組運算子不同，賦值運算子調用了GetValue方法。返回的結果是函數對象（但不是參考型別），這意味著this設為null，結果是global對象。

•第四個和第五個也是一樣——逗號運算子和邏輯運算子（OR）調用了GetValue 方法，相應地，我們失去了引用而得到了函數。並再次設為global。

正如我們知道的，局部變數、內建函式、形式參數儲存在給定函數的啟用物件中。

複製代碼 代碼如下:function foo() {
function bar() {
alert(this); // global
}
bar(); // the same as AO.bar()
}

使用中的物件總是作為this返回，值為null——（即虛擬碼的AO.bar()相當於null.bar()）。這裡我們再次回到上面描述的例子，this設定為全域對象。

範圍鏈

通過函建構函式建立的函數的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是一個字串而不是一個函數，這裡的函數僅僅用來根據條件參數初始化這個屬性——它建立後並立即調用。

1.因此，”關於圓括弧”問題完整的答案如下：
2.當函數不在運算式的位置的時候，分組操作符圓括弧是必須的——也就是手工將函數轉化成FE。
3.如果解析器知道它處理的是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是一種物件導向語言，支援基於原型的委託式繼承。