目錄

• 一、定義函數(shù)
• 二、遞歸函數(shù)
• 三、閉包
• 四、閉包中的this對象
• 五、模仿塊級作用域
• 六、私有變量
• 七、即時函數(shù)與閉包的異同
• 參考

一、定義函數(shù)

定義函數(shù)的兩種方式:

（1）函數(shù)聲明

function func(arg0, arg1) {// 函數(shù)體 }

（2）函數(shù)表達(dá)式

var func = function(arg0, arg1) {// 函數(shù)體 };

它們之間是有很大區(qū)別的：

1）第一個區(qū)別：函數(shù)聲明在{}后可以不需要添加分號，而函數(shù)表達(dá)式需要

為什么？

示例：

/***?? 執(zhí)行報異常：(intermediate value)(intermediate value)(...) is not a function(…)*?? 函數(shù)myMethod直接運(yùn)行了，因為后面有一對括號，而且傳入的參數(shù)是一個方法。*?? myMethod返回的42被當(dāng)做函數(shù)名調(diào)用了，導(dǎo)致出錯了。*/ var?myMethod =?function() {console.log('myMethod run'); //執(zhí)行return?42; }??// 這里沒有分號 (function() {console.log('main run'); //未執(zhí)行 })();

而函數(shù)聲明則不會，“是因為JavaScript將function關(guān)鍵字看做是一個函數(shù)聲明的開始，而函數(shù)聲明后面不允許跟圓括號。” —— P185

2）第二個區(qū)別：函數(shù)聲明提升（function declaration hoisting）

即在執(zhí)行代碼之前會讀取函數(shù)聲明。

示例：

sayHi(); // 無誤，會出現(xiàn)函數(shù)聲明提升 function sayHi(){console.log('Hi'); } sayHi(); // TypeError: sayHi is not a function #此時函數(shù)還不存在 var sayHi = function(){console.log('Hi'); }

這里有一個經(jīng)典的例子：

/*** 表面上看是表示在condition為true時，使用第一個定義，否則使用第二個定義* 實(shí)際上，這在ECMAScript中屬于無效語法，Javascript引擎會嘗試修正錯誤，轉(zhuǎn)換到合理的狀態(tài)* 不要這樣做，會出現(xiàn)函數(shù)聲明，某些瀏覽器會返回第二個聲明，不考慮condition的值*/ if(condition) {function func() {console.log('Hi.');} } else {function func() {console.log('Hello.');} }

下面是推薦的寫法，這樣就不會有什么意外。

var func; if(condition) {func = function() {console.log('Hi.');} } else {func = function() {console.log('Hello.');} }

另一個值得一提的是變量名提升：

var a = 2;

以上代碼其實(shí)會分為兩個過程，一個是 var a; 一個是 a = 2; 其中var a; 是在編譯過程中執(zhí)行的，a = 2 是在執(zhí)行過程中執(zhí)行的。
例：

console.log(a); // undefined var a = 2;

其執(zhí)行效果實(shí)際上是這樣的：

var a; console.log( a ); // undefined a = 2;

在編譯階段，編譯器會將函數(shù)里所有的聲明都提前到函數(shù)體內(nèi)的上部，而真正賦值的操作留在原來的位置上，這也就是上面的代碼打出undefined的原因。否則的話應(yīng)該是報錯：Uncaught ReferenceError: a is not defined

二、遞歸函數(shù)

下面根據(jù)經(jīng)典的遞歸階乘函數(shù)的示例分析遞歸的使用。遞歸函數(shù)的使用可以分為以下幾個不同的境界：

（1）初級版

function factorial(num) {if(num <= 1) { //每一個遞歸都必須有一個終止條件return 1;}return num * factorial(num-1); }

分析: 這個遞歸的調(diào)用正常使用沒什么問題，但是當(dāng)我們將另一個變量也指向這個函數(shù)，將原來的指向函數(shù)的引用變量賦為null會導(dǎo)致錯誤：

var anotherFactorial = factorial; factorial = null; anotherFactorial(10); //error, factorial已不再是函數(shù)

（2）進(jìn)階版

function factorial(num) {if(num <= 1) {return 1;}return num * arguments.callee(num-1); }

分析: arguments.callee是一個指向正在執(zhí)行的函數(shù)的指針，比直接使用函數(shù)名保險。不過在嚴(yán)格模式下（'use strict'），訪問這個屬性會導(dǎo)致錯誤。

（3）高級版(命名函數(shù)表達(dá)式)

var factorial = (function f(num) {if(num <= 1) {return 1;}return num * f(num-1); });

分析: 一般函數(shù)表達(dá)式都是創(chuàng)建一個匿名函數(shù)，并將其賦值給變量——函數(shù)表達(dá)式(上述例子是不會進(jìn)行函數(shù)聲明提升的)。
但是此處是創(chuàng)建了一個名為f()的命名函數(shù)表達(dá)式。即使賦值給了另一個變量，函數(shù)的名字 f 仍然有效，所以遞歸不論是在嚴(yán)格模式還是非嚴(yán)格模式下都照樣能正確完成。

console.log(factorial.name); // 'f'

**疑惑：在這個函數(shù)的外部是不能通過`f`訪問這個函數(shù)的，為什么？** `f` 和 `factorial` 能調(diào)用這個函數(shù)，說明 `f` 與 `factorial` 是都是一個指向該函數(shù)的指針。但是 `f` 在函數(shù)外部是不調(diào)用的，說明 `f` 應(yīng)該是在函數(shù)的內(nèi)部？？但函數(shù)作用域不應(yīng)該是在 `{}` 內(nèi)部嗎？？

三、閉包

閉包的定義：有權(quán)訪問另一個函數(shù)的作用域中的變量的函數(shù)。也就是說，閉包是內(nèi)部函數(shù)以及其作用域鏈組成的一個整體。

閉包主要有兩個概念：可以訪問外部函數(shù)，維持函數(shù)作用域。
第一個概念并沒有什么特別，大部分編程語言都有這個特性，內(nèi)部函數(shù)可以訪問其外部變量這種事情很常見。所以重點(diǎn)在于第二點(diǎn)。

創(chuàng)建閉包的常見方式：在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)。

示例：

var?globalValue; function?outter() {var?value = 1;function?inner() {return?value;}globalValue = inner; }? outter();? globalValue();? // return 1;

先不考慮閉包地看一下這個問題：

• 首先聲明了一個全局變量和一個 outter 函數(shù)。
• 然后調(diào)用了 outter 函數(shù)，調(diào)用函數(shù)的過程中全局變量被賦值了一個函數(shù)。
• outter 函數(shù)調(diào)用結(jié)束之后，按照內(nèi)存處理機(jī)制，它內(nèi)部的所有變量應(yīng)該都被釋放掉了，不過我們把 inner 賦值給了全局變量，所以還可以在外部調(diào)用它。
• 接下來我們調(diào)用了全局變量，這時候因為outter 內(nèi)部作用域已經(jīng)被釋放了，所以應(yīng)該找不到value 的值，返回的應(yīng)該是undefined 。
• 但事實(shí)是，它返回了1 ，即內(nèi)部變量。本該已經(jīng)消失了，只能存在于 out 函數(shù)內(nèi)部的變量，走到了墻外。這就是閉包的強(qiáng)大之處。

實(shí)際的執(zhí)行流程：

• 當(dāng)創(chuàng)建 outter 函數(shù)時，會創(chuàng)建一個預(yù)先包含全局變量對象的作用域鏈，保存在內(nèi)部的 [[Scope]] 屬性中，如下圖。
• 當(dāng)調(diào)用 outter 函數(shù)時，會創(chuàng)建執(zhí)行環(huán)境，然后通過復(fù)制函數(shù)的[[Scope]] 屬性中的對象構(gòu)建執(zhí)行環(huán)境的作用域鏈，并初始化函數(shù)的活動對象（activation object）。
• 當(dāng)outter 函數(shù)執(zhí)行完畢之后，其執(zhí)行環(huán)境的作用域鏈被銷毀，但它的活動對象仍然會留在內(nèi)存中。
• 直到對 inner 函數(shù)的引用解除后，outter 函數(shù)的活動對象才會被銷毀 (globalValue = null;) 。

在某個構(gòu)造函數(shù)中查看 [[Scope]]屬性：

閉包會保存包含函數(shù)的活動對象：

• 閉包與變量：閉包保存的不是某個變量對象，而是包含函數(shù)的整個變量對象，并且只能取得包含函數(shù)中任何變量的最后一個值。

這里的例子除了書中的一個經(jīng)典的例子外，在MDN上有一個更好的、更直觀的例子，參見 MDN 在循環(huán)中創(chuàng)建閉包：一個常見錯誤，示例如下

該瀏覽器不支持iframe

數(shù)組 helpText 中定義了三個有用的提示信息，每一個都關(guān)聯(lián)于對應(yīng)的文檔中的輸入域的 ID。通過循環(huán)這三項定義，依次為每一個輸入域添加了一個 onfocus 事件處理函數(shù)，以便顯示幫助信息。

運(yùn)行這段代碼后，您會發(fā)現(xiàn)它沒有達(dá)到想要的效果。無論焦點(diǎn)在哪個輸入域上，顯示的都是關(guān)于年齡的消息。

該問題的原因在于賦給 onfocus是閉包（setupHelp）中的匿名函數(shù)而不是閉包對象；在閉包（setupHelp）中一共創(chuàng)建了三個匿名函數(shù)，但是它們都共享同一個環(huán)境（item）。在 onfocus 的回調(diào)被執(zhí)行時，循環(huán)早已經(jīng)完成，且此時item 變量（由所有三個閉包所共享）已經(jīng)指向了 helpText 列表中的最后一項。

解決這個問題的一種方案是使onfocus指向一個新的閉包對象。

該瀏覽器不支持iframe

這段代碼可以如我們所期望的那樣工作。所有的回調(diào)不再共享同一個環(huán)境， makeHelpCallback 函數(shù)為每一個回調(diào)創(chuàng)建一個新的環(huán)境。在這些環(huán)境中，help 指向 helpText 數(shù)組中對應(yīng)的字符串。

上面的代碼相當(dāng)于將每次迭代的item.help復(fù)制給參數(shù)argus（因為函數(shù)參數(shù)都是按值傳遞的），這樣在匿名函數(shù)內(nèi)部創(chuàng)建并返回的是一個訪問的這個argus的閉包。

document.getElementById(item.id).onfocus = function(argus) {return function() {showHelp(argus);}; }(item.help);

• 因為閉包會攜帶包含它的函數(shù)的作用域，所以閉包會比其他函數(shù)占用更多的內(nèi)存，所以慎重使用閉包。

尤其是當(dāng)在閉包中只使用包含函數(shù)的一部分變量，可以釋放無用的變量。例如：

var foo = function(){var elem = $('.demo');return function(elem.length){// 函數(shù)體}}

改寫為:

var foo = function(){var elem = $('.demo'),len = elem.length;elem = null; // 解除對該對象的引用return function(len){// 函數(shù)體} }

四、閉包中的this對象

this對象是在運(yùn)行時基于函數(shù)的執(zhí)行環(huán)境綁定的：

• 在全局函數(shù)中，this等于window
• 在某個對象的方法中，this等于這個對象
• 在匿名函數(shù)中，this等于window

示例1：

var name = 'The Window'; var obj = {name: 'My Object',getNameFunc: function(){return this.name;} } console.log(obj.getNameFunc()); // My Object

示例2：

var name = 'The Window'; var obj = {name: 'My Object',getNameFunc: function(){var name = "shih";return this.name;} } console.log(obj.getNameFunc()); // My Object

示例3：

var name = 'The Window'; var obj = {name: 'My Object',getNameFunc: function(){return function(){ // 匿名函數(shù)的執(zhí)行環(huán)境具有全局性return this.name;}} } console.log(obj.getNameFunc()()); // The Window

還有一個例子：(obj.getNameFunc = obj.getNameFunc)(); // The Window

this永遠(yuǎn)指向的是最后調(diào)用它的對象，匿名函數(shù)的執(zhí)行環(huán)境具有全局性，匿名函數(shù)的調(diào)用者是window.

疑惑：匿名函數(shù)的this指向為什么是window —— 對于返回的閉包（匿名函數(shù)）與函數(shù)表達(dá)式創(chuàng)建的匿名函數(shù)?

知乎上有一些關(guān)于這個問題的回答，百家之言，都不一定正確

下面的例子是一個測試，其中obj2定義這兩種匿名函數(shù)，執(zhí)行結(jié)果在注釋中，this 對象都是指向 Window。

var name = 'The Window'; var obj = {name: 'My Object',getNameFunc0: function(){return this.name; // "My Object"},obj2: {// obj2 對象中沒有定義 namegetNameFunc1: function(){var func = function(){console.group('getNameFunc2 func Anonymous');console.log(this); // Windowconsole.groupEnd();};func();console.group('getNameFunc');console.log(this); // Objectconsole.groupEnd();return this.name; // undefined},getNameFunc2: function(){return function(){console.group('getNameFunc2 Anonymous');console.log(this); // Windowconsole.groupEnd();return this.name; // "The Window"}}} };console.log(obj.getNameFunc0()); // "My Object" console.log(obj.obj2.getNameFunc1()); // undefiend console.log(obj.obj2.getNameFunc2()()); // "The Window"

五、模仿塊級作用域

（1）JavaScript中沒有塊級作用域的概念，作用域是基于函數(shù)來界定的

在下面的例子中，在 C++、Java等編程語言中，變量 i 只會在for循環(huán)的語句塊中有定義，循環(huán)結(jié)束后就會被銷毀。但是在JavaScript中，變量 i 是定義在outputNumbers()的活動對象中的，從它定義的地方開始，在函數(shù)內(nèi)部都可以訪問它。

示例：

function outputNumbers(count){for(var i=0; i<count; i++){// 代碼塊}console.log(i); // i = count }

重新聲明變量時，JavaScript會忽略后續(xù)的聲明。但是執(zhí)行后續(xù)聲明的變量初始化。

function outputNumbers(count){for(var i=0; i<count; i++){// 代碼塊}var i; //重新聲明變量，會被忽略console.log(i); //i = count }

（2）利用即時函數(shù)模仿塊級作用域——私有作用域

function outputNumners(count){(function(){ //閉包for(var i=0; i<count; i++){// 代碼塊}})();console.log(i);//Error: i未定義}

無論在什么地方，只要臨時需要一些變量，就可以使用這種私有作用域。因為沒有指向該匿名函數(shù)的引用，所以只要函數(shù)執(zhí)行完畢，就可以立即銷毀其作用域鏈。因此可以減少閉包占用的內(nèi)存問題。

（3）嚴(yán)格的說，在JavaScript也存在塊級作用域

如下面幾種情況：

1）with

var obj = {a: 2, b: 3, c: 4}; with(obj) { // 均作用于obj上a = 5;b = 5; }

2）let/const

let是ES6新增的定義變量的方法，其定義的變量僅存在于最近的{}之內(nèi)

var foo = true; if (foo) {let bar = foo * 2;console.log(bar); // 2 } console.log(bar); // ReferenceError

與let一樣，唯一不同的是const定義的變量值不能修改。

var foo = true;if (foo) {var a = 2;const b = 3; // 僅存在于if的{}內(nèi)a = 3;b = 4; // 出錯，值不能修改} console.log(a); // 3 console.log(b); // ReferenceError

六、私有變量

嚴(yán)格來說，JavaScript中沒有私有成員的概念，所有的對象屬性都是公開的，但是有私有變量的概念。任何在函數(shù)中定義的變量都可以認(rèn)為是私有變量。
私有變量包括：函數(shù)的參數(shù)、局部變量、在函數(shù)內(nèi)部定義的其他函數(shù)。

因為函數(shù)外部不能訪問私有變量，而閉包能夠通過作用域鏈可以訪問這些變量。所以可以創(chuàng)建用于訪問私有變量的公有方法 —— 特權(quán)方法（privileged method）。

有幾種創(chuàng)建這種特權(quán)方法的方式：

（1）構(gòu)造函數(shù)模式(Constructor Pattern)

function MyObject(){// 私有變量和私有函數(shù)var privateVariable = 10;function privateFunction(){return false;}// 公有方法，可以被實(shí)例所調(diào)用this.publicMethod = function(){++privateVariable;return privateFunction();}; }

這種模式的缺點(diǎn)是，針對每個實(shí)例都會創(chuàng)建一組相同的方法。

（2）原型模式(Prototype Pattern)

//創(chuàng)建私有作用域，并在其中封裝一個構(gòu)造函數(shù)和相應(yīng)的方法 (function(){//私有變量和私有函數(shù)var privateVariable = 10;function privateFunction(){return privateVariable;}//構(gòu)造函數(shù)，使用的是函數(shù)表達(dá)式，因為函數(shù)聲明只能創(chuàng)建局部函數(shù)MyMethod = function(){};//公有方法MyMethod.prototype.publicMethod = function(){++privateVariable;return privateFunction();}; })();

公有方法是在原型上定義的。這個模式在定義構(gòu)造函數(shù)時并沒有使用函數(shù)聲明，而是使用了函數(shù)表達(dá)式，這是因為函數(shù)聲明只能創(chuàng)建局部函數(shù)，這不是我們想要的。同樣，在聲明MyObject時也沒有使用var關(guān)鍵字，因為直接初始化一個未經(jīng)聲明的變量，總會創(chuàng)建一個全局變量。因此MyObject就成了一個全局變量，能夠在私有作用域之外被訪問到。但值得注意的是，在嚴(yán)格模式('use strict')下，給未經(jīng)聲明的變量賦值會導(dǎo)致錯誤。

這個公有方法作為一個閉包，總是保存著對作用域的引用。與在構(gòu)造函數(shù)中定義公有方法的區(qū)別是：因為公有方法是在原型上定義的，所有實(shí)例都使用同一個函數(shù)，私有變量和函數(shù)是由實(shí)例所共享的。但上面的代碼有個缺陷，當(dāng)創(chuàng)建多個實(shí)例的時候，由于變量也共享，所以在一個實(shí)例上調(diào)用publicMethod會影響其他實(shí)例。以這種方式創(chuàng)建的靜態(tài)私有變量會因為使用原型而增加代碼的復(fù)用，但每個實(shí)例都沒有自己的私有變量。到底是使用實(shí)例自己的變量，還是上面這種靜態(tài)私有變量，需要視需求而定。

正是由于上述原因，我們很少單獨(dú)使用原型模式，通常都是將構(gòu)造函數(shù)模式結(jié)合原型模式一起使用。

（3）模塊模式(Module Pattern)

以上的模式都是給自定義類型創(chuàng)建私有變量和特權(quán)方法的。而這里所說的模塊模式則是為單例創(chuàng)建私有變量和特權(quán)方法，增強(qiáng)單例對象。

1）單例模式(Singleton Pattern)

單例模式是指只有一個實(shí)例的對象。
JavaScript推薦使用對象字面量的方式創(chuàng)建單例對象：

var singleton = {name: 'value',method: function(){// 代碼塊} };

2）模塊模式通過為單例增加私有變量和公有方法使其得到增強(qiáng)

var singleton = function(){// 私有變量和私有函數(shù)var privateVariable = 10;function privateFunction(){return false;}// 公有方法：返回對象字面量，是這個單例的公共接口。return{publicProperty: true,publicMethod: function(){++privateVariable;return privateFunction();};} }

“如果必須創(chuàng)建一個對象并以某些數(shù)據(jù)對其進(jìn)行初始化，同時還要公開一些能夠訪問這些私有數(shù)據(jù)的方法，就可以使用模塊模式?！?—— P190

（4）增強(qiáng)的模塊模式

var singleton = function(){// 私有變量和私有函數(shù)var privateVariable = 10;function privateFunction(){return false;}// 創(chuàng)建一個特定的對象實(shí)例var object = new CustomType();// 添加屬性和方法object.publicProperty = true;object.publicMethod = function(){++privateVariable;return privateFunction();};return object; }

創(chuàng)建一個特定類型的實(shí)例，即適用于那些單例必須是某種特定類型的實(shí)例，同時還需要對它添加一些屬性和方法加以增強(qiáng)。

七、即時函數(shù)與閉包的異同

閉包：

var foo = function(){// 聲明一些局部變量return function(){ // 閉包// 可以引用這些局部變量} } foo()(); // 可以對foo函數(shù)內(nèi)的局部變量進(jìn)行操作，具體方法在閉包函數(shù)的定義中

即時函數(shù)：

(function(){// 執(zhí)行代碼 })();

相同點(diǎn)：它們都是函數(shù)的一種特殊形態(tài)，并且可以共存。
不同點(diǎn)：即時函數(shù)是定義一個函數(shù)，并立即執(zhí)行。它只能被使用一次，相當(dāng)于“閱后即焚”。它是為了形成塊級作用域，來彌補(bǔ)js函數(shù)級作用域的局限，主要是為了模塊化，很多庫都這么來解決耦合，而且考慮到?jīng)]有加分號 ; 會導(dǎo)致錯誤的原因，很多庫都會在開始處加上 ; 。
比如jquery.media.js :

; (function($) {"use strict"; var mode = document.documentMode || 0;var msie = /MSIE/.test(navigator.userAgent);var lameIE = msie && (/MSIE (6|7|8)\.0/.test(navigator.userAgent) || mode < 9);// ...})(jQuery);

閉包是指一個函數(shù)與它捕獲的外部變量的合體。用來保存局部變量，形成私有屬性與方法，比如module模式。

參考

閉包與變量的經(jīng)典問題

在循環(huán)中創(chuàng)建閉包：一個常見錯誤

聊一下JS中的作用域scope和閉包c(diǎn)losure

轉(zhuǎn)載于:https://www.cnblogs.com/shih/p/6826750.html

總結(jié)

以上是生活随笔為你收集整理的【JavaScript高级程序设计】读书笔记之一 —— 理解函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。