DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 深入理解JavaScript系列(15) 函數(Functions)
深入理解JavaScript系列(15) 函數(Functions)
編輯:關於JavaScript     
介紹
本章節我們要著重介紹的是一個非常常見的ECMAScript對象——函數(function),我們將詳細講解一下各種類型的函數是如何影響上下文的變量對象以及每個函數的作用域鏈都包含什麼,以及回答諸如像下面這樣的問題:下面聲明的函數有什麼區別麼?(如果有,區別是什麼)。
原文:http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/
復制代碼 代碼如下:
var foo = function () {
...
};

平時的慣用方式:
復制代碼 代碼如下:
function foo() {
...
}

或者,下面的函數為什麼要用括號括住?
復制代碼 代碼如下:
(function () {
...
})();

關於具體的介紹,早前面的12章變量對象和14章作用域鏈都有介紹,如果需要詳細了解這些內容,請查詢上述2個章節的詳細內容。

但我們依然要一個一個分別看看,首先從函數的類型講起:

函數類型
在ECMAScript 中有三種函數類型:函數聲明,函數表達式和函數構造器創建的函數。每一種都有自己的特點。
函數聲明
函數聲明(縮寫為FD)是這樣一種函數:
有一個特定的名稱
在源碼中的位置:要麼處於程序級(Program level),要麼處於其它函數的主體(FunctionBody)中
在進入上下文階段創建
影響變量對象
以下面的方式聲明
復制代碼 代碼如下:
function exampleFunc() {
...
}

這種函數類型的主要特點在於它們僅僅影響變量對象(即存儲在上下文的VO中的變量對象)。該特點也解釋了第二個重要點(它是變量對象特性的結果)——在代碼執行階段它們已經可用(因為FD在進入上下文階段已經存在於VO中——代碼執行之前)。
例如(函數在其聲明之前被調用)
復制代碼 代碼如下:
foo();
function foo() {
alert('foo');
}

另外一個重點知識點是上述定義中的第二點——函數聲明在源碼中的位置:
復制代碼 代碼如下:
// 函數可以在如下地方聲明:
// 1) 直接在全局上下文中
function globalFD() {
// 2) 或者在一個函數的函數體內
function innerFD() {}
}

只有這2個位置可以聲明函數,也就是說:不可能在表達式位置或一個代碼塊中定義它。
另外一種可以取代函數聲明的方式是函數表達式,解釋如下:
函數表達式
函數表達式(縮寫為FE)是這樣一種函數:
在源碼中須出現在表達式的位置
有可選的名稱
不會影響變量對象
在代碼執行階段創建
這種函數類型的主要特點在於它在源碼中總是處在表達式的位置。最簡單的一個例子就是一個賦值聲明:
復制代碼 代碼如下:
var foo = function () {
...
};

該例演示是讓一個匿名函數表達式賦值給變量foo,然後該函數可以用foo這個名稱進行訪問——foo()。
同時和定義裡描述的一樣,函數表達式也可以擁有可選的名稱:
復制代碼 代碼如下:
var foo = function _foo() {
...
};

需要注意的是,在外部FE通過變量“foo”來訪問——foo(),而在函數內部(如遞歸調用),有可能使用名稱“_foo”。
如果FE有一個名稱,就很難與FD區分。但是,如果你明白定義,區分起來就簡單明了:FE總是處在表達式的位置。在下面的例子中我們可以看到各種ECMAScript 表達式:
// 圓括號(分組操作符)內只能是表達式
(function foo() {});
// 在數組初始化器內只能是表達式
[function bar() {}];
// 逗號也只能操作表達式
1, function baz() {};
表達式定義裡說明:FE只能在代碼執行階段創建而且不存在於變量對象中,讓我們來看一個示例行為:
復制代碼 代碼如下:
// FE在定義階段之前不可用(因為它是在代碼執行階段創建)
alert(foo); // "foo" 未定義
(function foo() {});
// 定義階段之後也不可用,因為他不在變量對象VO中
alert(foo); // "foo" 未定義
相當一部分問題出現了,我們為什麼需要函數表達式?答案很明顯——在表達式中使用它們,”不會污染”變量對象。最簡單的例子是將一個函數作為參數傳遞給其它函數。
function foo(callback) {
callback();
}
foo(function bar() {
alert('foo.bar');
});
foo(function baz() {
alert('foo.baz');
});

在上述例子裡,FE賦值給了一個變量(也就是參數),函數將該表達式保存在內存中,並通過變量名來訪問(因為變量影響變量對象),如下:
復制代碼 代碼如下:
var foo = function () {
alert('foo');
};
foo();

另外一個例子是創建封裝的閉包從外部上下文中隱藏輔助性數據(在下面的例子中我們使用FE,它在創建後立即調用):
復制代碼 代碼如下:
var foo = {};
(function initialize() {
var x = 10;
foo.bar = function () {
alert(x);
};
})();
foo.bar(); // 10;
alert(x); // "x" 未定義

我們看到函數foo.bar(通過[[Scope]]屬性)訪問到函數initialize的內部變量“x”。同時,“x”在外部不能直接訪問。在許多庫中,這種策略常用來創建”私有”數據和隱藏輔助實體。在這種模式中,初始化的FE的名稱通常被忽略:
復制代碼 代碼如下:
(function () {
// 初始化作用域
})();

還有一個例子是:在代碼執行階段通過條件語句進行創建FE,不會污染變量對象VO。
復制代碼 代碼如下:
var foo = 10;
var bar = (foo % 2 == 0
? function () { alert(0); }
: function () { alert(1); }
);
bar(); // 0

關於圓括號的問題
讓我們回頭並回答在文章開頭提到的問題——”為何在函數創建後的立即調用中必須用圓括號來包圍它?”,答案就是:表達式句子的限制就是這樣的。
按照標准,表達式語句不能以一個大括號{開始是因為他很難與代碼塊區分,同樣,他也不能以函數關鍵字開始,因為很難與函數聲明進行區分。即,所以,如果我們定義一個立即執行的函數,在其創建後立即按以下方式調用:
復制代碼 代碼如下:
function () {
...
}();
// 即便有名稱
function foo() {
...
}();

我們使用了函數聲明,上述2個定義,解釋器在解釋的時候都會報錯,但是可能有多種原因。
如果在全局代碼裡定義(也就是程序級別),解釋器會將它看做是函數聲明,因為他是以function關鍵字開頭,第一個例子,我們會得到SyntaxError錯誤,是因為函數聲明沒有名字(我們前面提到了函數聲明必須有名字)。
第二個例子,我們有一個名稱為foo的一個函數聲明正常創建,但是我們依然得到了一個語法錯誤——沒有任何表達式的分組操作符錯誤。在函數聲明後面他確實是一個分組操作符,而不是一個函數調用所使用的圓括號。所以如果我們聲明如下代碼:
復制代碼 代碼如下:
// "foo" 是一個函數聲明,在進入上下文的時候創建
alert(foo); // 函數
function foo(x) {
alert(x);
}(1); // 這只是一個分組操作符,不是函數調用!
foo(10); // 這才是一個真正的函數調用,結果是10

上述代碼是沒有問題的,因為聲明的時候產生了2個對象:一個函數聲明,一個帶有1的分組操作,上面的例子可以理解為如下代碼:
復制代碼 代碼如下:
// 函數聲明
function foo(x) {
alert(x);
}
// 一個分組操作符,包含一個表達式1

(1);
復制代碼 代碼如下:
// 另外一個操作符,包含一個function表達式
(function () {});
// 這個操作符裡,包含的也是一個表達式"foo"
("foo");
// 等等

如果我們定義一個如下代碼(定義裡包含一個語句),我們可能會說,定義歧義,會得到報錯:
if (true) function foo() {alert(1)}
根據規范,上述代碼是錯誤的(一個表達式語句不能以function關鍵字開頭),但下面的例子就沒有報錯,想想為什麼?
我們如果來告訴解釋器:我就像在函數聲明之後立即調用,答案是很明確的,你得聲明函數表達式function expression,而不是函數聲明function declaration,並且創建表達式最簡單的方式就是用分組操作符括號,裡邊放入的永遠是表達式,所以解釋器在解釋的時候就不會出現歧義。在代碼執行階段這個的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,就沒必要用圓括號。
除了大括號以外,如下形式也可以將函數轉化為FE類型,例如:
復制代碼 代碼如下:
// 注意是1,後面的聲明
1, function () {
alert('anonymous function is called');
}();
// 或者這個
!function () {
alert('ECMAScript');
}();
// 其它手工轉化的形式
...

但是,在這個例子中,圓括號是最簡潔的方式。
順便提一句,組表達式包圍函數描述可以沒有調用圓括號,也可包含調用圓括號,即,下面的兩個表達式都是正確的FE。
實現擴展:函數語句
下面的代碼,根據貴方任何一個function聲明都不應該被執行:
復制代碼 代碼如下:
if (true) {
function foo() {
alert(0);
}
} else {
function foo() {
alert(1);
}
}
foo(); // 1 or 0 ?實際在上不同環境下測試得出個結果不一樣

這裡有必要說明的是,按照標准,這種句法結構通常是不正確的,因為我們還記得,一個函數聲明(FD)不能出現在代碼塊中(這裡if和else包含代碼塊)。我們曾經講過,FD僅出現在兩個位置:程序級(Program level)或直接位於其它函數體中。
因為代碼塊僅包含語句,所以這是不正確的。可以出現在塊中的函數的唯一位置是這些語句中的一個——上面已經討論過的表達式語句。但是,按照定義它不能以大括號開始(既然它有別於代碼塊)或以一個函數關鍵字開始(既然它有別於FD)。
但是,在標准的錯誤處理章節中,它允許程序語法的擴展執行。這樣的擴展之一就是我們見到的出現在代碼塊中的函數。在這個例子中,現今的所有存在的執行都不會拋出異常,都會處理它。但是它們都有自己的方式。
if-else分支語句的出現意味著一個動態的選擇。即,從邏輯上來說,它應該是在代碼執行階段動態創建的函數表達式(FE)。但是,大多數執行在進入上下文階段時簡單的創建函數聲明(FD),並使用最後聲明的函數。即,函數foo將顯示”1″,事實上else分支將永遠不會執行。
但是,SpiderMonkey (和TraceMonkey)以兩種方式對待這種情況:一方面它不會將函數作為聲明處理(即,函數在代碼執行階段根據條件創建),但另一方面,既然沒有括號包圍(再次出現解析錯誤——”與FD有別”),他們不能被調用,所以也不是真正的函數表達式,它儲存在變量對象中。
我個人認為這個例子中SpiderMonkey 的行為是正確的,拆分了它自身的函數中間類型——(FE+FD)。這些函數在合適的時間創建,根據條件,也不像FE,倒像一個可以從外部調用的FD,SpiderMonkey將這種語法擴展 稱之為函數語句(縮寫為FS);該語法在MDC中提及過。
命名函數表達式的特性
當函數表達式FE有一個名稱(稱為命名函數表達式,縮寫為NFE)時,將會出現一個重要的特點。從定義(正如我們從上面示例中看到的那樣)中我們知道函數表達式不會影響一個上下文的變量對象(那樣意味著既不可能通過名稱在函數聲明之前調用它,也不可能在聲明之後調用它)。但是,FE在遞歸調用中可以通過名稱調用自身。
復制代碼 代碼如下:
(function foo(bar) {
if (bar) {
return;
}
foo(true); // "foo" 是可用的
})();
// 在外部,是不可用的
foo(); // "foo" 未定義

“foo”儲存在什麼地方?在foo的活動對象中?不是,因為在foo中沒有定義任何”foo”。在上下文的父變量對象中創建foo?也不是,因為按照定義——FE不會影響VO(變量對象)——從外部調用foo我們可以實實在在的看到。那麼在哪裡呢?
以下是關鍵點。當解釋器在代碼執行階段遇到命名的FE時,在FE創建之前,它創建了輔助的特定對象,並添加到當前作用域鏈的最前端。然後它創建了FE,此時(正如我們在第四章 作用域鏈知道的那樣)函數獲取了[[Scope]] 屬性——創建這個函數上下文的作用域鏈)。此後,FE的名稱添加到特定對象上作為唯一的屬性;這個屬性的值是引用到FE上。最後一步是從父作用域鏈中移除那個特定的對象。讓我們在偽碼中看看這個算法:
復制代碼 代碼如下:
specialObject = {};
Scope = specialObject + Scope;
foo = new FunctionExpression;
foo.[[Scope]] = Scope;
specialObject.foo = foo; // {DontDelete}, {ReadOnly}
delete Scope[0]; // 從作用域鏈中刪除定義的特殊對象specialObject

因此,在函數外部這個名稱不可用的(因為它不在父作用域鏈中),但是,特定對象已經存儲在函數的[[scope]]中,在那裡名稱是可用的。
但是需要注意的是一些實現(如Rhino)不是在特定對象中而是在FE的激活對象中存儲這個可選的名稱。Microsoft 中的執行完全打破了FE規則,它在父變量對象中保持了這個名稱,這樣函數在外部變得可以訪問。
NFE 與SpiderMonkey
我們來看看NFE和SpiderMonkey的區別,SpiderMonkey 的一些版本有一個與特定對象相關的屬性,它可以作為bug來對待(雖然按照標准所有的都那樣實現了,但更像一個ECMAScript標准上的bug)。它與標識符的解析機制相關:作用域鏈的分析是二維的,在標識符的解析中,同樣考慮到作用域鏈中每個對象的原型鏈。
如果我們在Object.prototype中定義一個屬性,並引用一個”不存在(nonexistent)”的變量。我們就能看到這種執行機制。這樣,在下面示例的”x”解析中,我們將到達全局對象,但是沒發現”x”。但是,在SpiderMonkey 中全局對象繼承了Object.prototype中的屬性,相應地,”x”也能被解析。
復制代碼 代碼如下:
Object.prototype.x = 10;
(function () {
alert(x); // 10
})();

活動對象沒有原型。按照同樣的起始條件,在上面的例子中,不可能看到內部函數的這種行為。如果定義一個局部變量”x”,並定義內部函數(FD或匿名的FE),然後再內部函數中引用”x”。那麼這個變量將在父函數上下文(即,應該在哪裡被解析)中而不是在Object.prototype中被解析。
復制代碼 代碼如下:
Object.prototype.x = 10;
function foo() {
var x = 20;
// 函數聲明
function bar() {
alert(x);
}
bar(); // 20, 從foo的變量對象AO中查詢
// 匿名函數表達式也是一樣
(function () {
alert(x); // 20, 也是從foo的變量對象AO中查詢
})();
}
foo();

盡管如此,一些執行會出現例外,它給活動對象設置了一個原型。因此,在Blackberry 的執行中,上面例子中的”x”被解析為”10″。也就是說,既然在Object.prototype中已經找到了foo的值,那麼它就不會到達foo的活動對象。
AO(bar FD or anonymous FE) -> no ->
AO(bar FD or anonymous FE).[[Prototype]] -> yes - 10
在SpiderMonkey 中,同樣的情形我們完全可以在命名FE的特定對象中看到。這個特定的對象(按照標准)是普通對象——”就像表達式new Object()“,相應地,它應該從Object.prototype 繼承屬性,這恰恰是我們在SpiderMonkey (1.7以上的版本)看到的執行。其余的執行(包括新的TraceMonkey)不會為特定的對象設置一個原型。
復制代碼 代碼如下:
function foo() {
var x = 10;
(function bar() {
alert(x); // 20, 不上10,不是從foo的活動對象上得到的
// "x"從鏈上查找:
// AO(bar) - no -> __specialObject(bar) -> no
// __specialObject(bar).[[Prototype]] - yes: 20
})();
}
Object.prototype.x = 20;
foo();

NFE與Jscript
當前IE浏覽器(直到JScript 5.8 — IE8)中內置的JScript 執行有很多與函數表達式(NFE)相關的bug。所有的這些bug都完全與ECMA-262-3標准矛盾;有些可能會導致嚴重的錯誤。
首先,這個例子中JScript 破壞了FE的主要規則,它不應該通過函數名存儲在變量對象中。可選的FE名稱應該存儲在特定的對象中,並只能在函數自身(而不是別的地方)中訪問。但IE直接將它存儲在父變量對象中。此外,命名的FE在JScript 中作為函數聲明(FD)對待。即創建於進入上下文的階段,在源代碼中的定義之前可以訪問。
復制代碼 代碼如下:
// FE 在變量對象裡可見
testNFE();
(function testNFE() {
alert('testNFE');
});
// FE 在定義結束以後也可見
// 就像函數聲明一樣
testNFE();

正如我們所見,它完全違背了規則。
其次,在聲明中將命名FE賦給一個變量時,JScript 創建了兩個不同的函數對象。邏輯上(特別注意的是在NFE的外部它的名稱根本不應該被訪問)很難命名這種行為。
復制代碼 代碼如下:
var foo = function bar() {
alert('foo');
};
alert(typeof bar); // "function",
// 有趣的是
alert(foo === bar); // false!
foo.x = 10;
alert(bar.x); // 未定義
// 但執行的時候結果一樣
foo(); // "foo"
bar(); // "foo"

再次看到,已經亂成一片了。
但是,需要注意的是,如果與變量賦值分開,單獨描述NFE(如通過組運算符),然後將它賦給一個變量,並檢查其相等性,結果為true,就好像是一個對象。
復制代碼 代碼如下:
(function bar() {});
var foo = bar;
alert(foo === bar); // true
foo.x = 10;
alert(bar.x); // 10

此時是可以解釋的。實際上,再次創建兩個對象,但那樣做事實上仍保持一個。如果我們再次認為這裡的NFE被作為FD對待,然後在進入上下文階段創建FD bar。此後,在代碼執行階段第二個對象——函數表達式(FE)bar 被創建,它不會被存儲。相應地,沒有FE bar的任何引用,它被移除了。這樣就只有一個對象——FD bar,對它的引用賦給了變量foo。
第三,就通過arguments.callee間接引用一個函數而言,它引用的是被激活的那個對象的名稱(確切的說——再這裡有兩個函數對象。
復制代碼 代碼如下:
var foo = function bar() {
alert([
arguments.callee === foo,
arguments.callee === bar
]);
};
foo(); // [true, false]
bar(); // [false, true]

第四,JScript 像對待普通的FD一樣對待NFE,他不服從條件表達式規則。即,就像一個FD,NFE在進入上下文時創建,在代碼中最後的定義被使用。
復制代碼 代碼如下:
var foo = function bar() {
alert(1);
};
if (false) {
foo = function bar() {
alert(2);
};
}
bar(); // 2
foo(); // 1

這種行為從”邏輯上”也可以解釋。在進入上下文階段,最後遇到的FD bar被創建,即包含alert(2)的函數。此後,在代碼執行階段,新的函數——FE bar創建,對它的引用賦給了變量foo。這樣foo激活產生alert(1)。邏輯很清楚,但考慮到IE的bug,既然執行明顯被破壞,並依賴於JScript 的bug,我給單詞”邏輯上(logically)”加上了引號。
JScript 的第五個bug與全局對象的屬性創建相關,全局對象由賦值給一個未限定的標識符(即,沒有var關鍵字)來生成。既然NFE在這被作為FD對待,相應地,它存儲在變量對象中,賦給一個未限定的標識符(即不是賦給變量而是全局對象的普通屬性),萬一函數的名稱與未限定的標識符相同,這樣該屬性就不是全局的了。
復制代碼 代碼如下:
(function () {
// 不用var的話,就不是當前上下文的一個變量了
// 而是全局對象的一個屬性
foo = function foo() {};
})();
// 但,在匿名函數的外部,foo這個名字是不可用的
alert(typeof foo); // 未定義

“邏輯”已經很清楚了:在進入上下文階段,函數聲明foo取得了匿名函數局部上下文的活動對象。在代碼執行階段,名稱foo在AO中已經存在,即,它被作為局部變量。相應地,在賦值操作中,只是簡單的更新已存在於AO中的屬性foo,而不是按照ECMA-262-3的邏輯創建全局對象的新屬性。
通過函數構造器創建的函數
既然這種函數對象也有自己的特色,我們將它與FD和FE區分開來。其主要特點在於這種函數的[[Scope]]屬性僅包含全局對象:
復制代碼 代碼如下:
var x = 10;
function foo() {
var x = 20;
var y = 30;
var bar = new Function('alert(x); alert(y);');
bar(); // 10, "y" 未定義
}

我們看到,函數bar的[[Scope]]屬性不包含foo上下文的Ao——變量”y”不能訪問,變量”x”從全局對象中取得。順便提醒一句,Function構造器既可使用new 關鍵字,也可以沒有,這樣說來,這些變體是等價的。

這些函數的其他特點與Equated Grammar Productions 和Joined Objects相關。作為優化建議(但是,實現上可以不使用優化),規范提供了這些機制。如,如果我們有一個100個元素的數組,在函數的一個循環中,執行可能使用Joined Objects 機制。結果是數組中的所有元素僅一個函數對象可以使用。

復制代碼 代碼如下:
var a = [];

for (var k = 0; k < 100; k++) {
a[k] = function () {}; // 可能使用了joined objects
}

但是通過函數構造器創建的函數不會被連接。
復制代碼 代碼如下:
var a = [];

for (var k = 0; k < 100; k++) {
a[k] = Function(''); // 一直是100個不同的函數
}

另外一個與聯合對象(joined objects)相關的例子:
復制代碼 代碼如下:
function foo() {

function bar(z) {
return z * z;
}

return bar;
}

var x = foo();
var y = foo();

這裡的實現,也有權利連接對象x和對象y(使用同一個對象),因為函數(包括它們的內部[[Scope]] 屬性)在根本上是沒有區別的。因此,通過函數構造器創建的函數總是需要更多的內存資源。
創建函數的算法
下面的偽碼描述了函數創建的算法(與聯合對象相關的步驟除外)。這些描述有助於你理解ECMAScript中函數對象的更多細節。這種算法適合所有的函數類型。
復制代碼 代碼如下:
F = new NativeObject();

// 屬性[[Class]]是"Function"
F.[[Class]] = "Function"

// 函數對象的原型是Function的原型
F.[[Prototype]] = Function.prototype

// 醫用到函數自身
// 調用表達式F的時候激活[[Call]]
// 並且創建新的執行上下文
F.[[Call]] = <reference to function>

// 在對象的普通構造器裡編譯
// [[Construct]] 通過new關鍵字激活
// 並且給新對象分配內存
// 然後調用F.[[Call]]初始化作為this傳遞的新創建的對象
F.[[Construct]] = internalConstructor

// 當前執行上下文的作用域鏈
// 例如,創建F的上下文
F.[[Scope]] = activeContext.Scope
// 如果函數通過new Function(...)來創建,
// 那麼
F.[[Scope]] = globalContext.Scope

// 傳入參數的個數
F.length = countParameters

// F對象創建的原型
__objectPrototype = new Object();
__objectPrototype.constructor = F // {DontEnum}, 在循環裡不可枚舉x
F.prototype = __objectPrototype

return F

注意,F.[[Prototype]]是函數(構造器)的一個原型,F.prototype是通過這個函數創建的對象的原型(因為術語常常混亂,一些文章中F.prototype被稱之為“構造器的原型”,這是不正確的)。

結論
這篇文章有些長。但是,當我們在接下來關於對象和原型章節中將繼續討論函數,同樣,我很樂意在評論中回答您的任何問題。

其它參考
  • 13. — Function Definition;
  • 15.3 — Function Objects.
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved