當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【JavaScript高级程序设计】读书笔记之一 —— 理解函数

發布時間：2025/5/22 javascript 56 豆豆

生活随笔收集整理的這篇文章主要介紹了【JavaScript高级程序设计】读书笔记之一 —— 理解函数小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

一、定義函數

定義函數的兩種方式:

（1）函數聲明

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

（2）函數表達式

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

它們之間是有很大區別的：

1）第一個區別：函數聲明在{}后可以不需要添加分號，而函數表達式需要

為什么？

示例：

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

而函數聲明則不會，“是因為JavaScript將function關鍵字看做是一個函數聲明的開始，而函數聲明后面不允許跟圓括號?！?—— P185

2）第二個區別：函數聲明提升（function declaration hoisting）

即在執行代碼之前會讀取函數聲明。

示例：

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

這里有一個經典的例子：

/*** 表面上看是表示在condition為true時，使用第一個定義，否則使用第二個定義* 實際上，這在ECMAScript中屬于無效語法，Javascript引擎會嘗試修正錯誤，轉換到合理的狀態* 不要這樣做，會出現函數聲明，某些瀏覽器會返回第二個聲明，不考慮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;

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

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

其執行效果實際上是這樣的：

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

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

二、遞歸函數

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

（1）初級版

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

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

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

（2）進階版

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

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

（3）高級版(命名函數表達式)

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

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

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

**疑惑：在這個函數的外部是不能通過`f`訪問這個函數的，為什么？** `f` 和 `factorial` 能調用這個函數，說明 `f` 與 `factorial` 是都是一個指向該函數的指針。但是 `f` 在函數外部是不調用的，說明 `f` 應該是在函數的內部？？但函數作用域不應該是在 `{}` 內部嗎？？

三、閉包

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

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

創建閉包的常見方式：在一個函數內創建另一個函數。

示例：

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

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

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

實際的執行流程：

當創建 outter 函數時，會創建一個預先包含全局變量對象的作用域鏈，保存在內部的 [[Scope]] 屬性中，如下圖。
當調用 outter 函數時，會創建執行環境，然后通過復制函數的[[Scope]] 屬性中的對象構建執行環境的作用域鏈，并初始化函數的活動對象（activation object）。
當outter 函數執行完畢之后，其執行環境的作用域鏈被銷毀，但它的活動對象仍然會留在內存中。
直到對 inner 函數的引用解除后，outter 函數的活動對象才會被銷毀 (globalValue = null;) 。

在某個構造函數中查看 [[Scope]]屬性：

閉包會保存包含函數的活動對象：

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

這里的例子除了書中的一個經典的例子外，在MDN上有一個更好的、更直觀的例子，參見 MDN 在循環中創建閉包：一個常見錯誤，示例如下

該瀏覽器不支持iframe

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

運行這段代碼后，您會發現它沒有達到想要的效果。無論焦點在哪個輸入域上，顯示的都是關于年齡的消息。

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

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

該瀏覽器不支持iframe

這段代碼可以如我們所期望的那樣工作。所有的回調不再共享同一個環境， makeHelpCallback 函數為每一個回調創建一個新的環境。在這些環境中，help 指向 helpText 數組中對應的字符串。

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

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

因為閉包會攜帶包含它的函數的作用域，所以閉包會比其他函數占用更多的內存，所以慎重使用閉包。

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

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

改寫為:

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

四、閉包中的this對象

this對象是在運行時基于函數的執行環境綁定的：

在全局函數中，this等于window
在某個對象的方法中，this等于這個對象
在匿名函數中，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：

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

this永遠指向的是最后調用它的對象，匿名函數的執行環境具有全局性，匿名函數的調用者是window.

疑惑：匿名函數的this指向為什么是window —— 對于返回的閉包（匿名函數）與函數表達式創建的匿名函數?

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

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

五、模仿塊級作用域

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

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

示例：

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

重新聲明變量時，JavaScript會忽略后續的聲明。但是執行后續聲明的變量初始化。

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

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

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

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

（3）嚴格的說，在JavaScript也存在塊級作用域

如下面幾種情況：

1）with

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

2）let/const

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

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的{}內a = 3;b = 4; // 出錯，值不能修改} console.log(a); // 3 console.log(b); // ReferenceError

六、私有變量

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

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

有幾種創建這種特權方法的方式：

（1）構造函數模式(Constructor Pattern)

這種模式的缺點是，針對每個實例都會創建一組相同的方法。

（2）原型模式(Prototype Pattern)

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

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

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

正是由于上述原因，我們很少單獨使用原型模式，通常都是將構造函數模式結合原型模式一起使用。

（3）模塊模式(Module Pattern)

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

1）單例模式(Singleton Pattern)

單例模式是指只有一個實例的對象。
JavaScript推薦使用對象字面量的方式創建單例對象：

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

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

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

（4）增強的模塊模式

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

七、即時函數與閉包的異同

閉包：

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

即時函數：

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

相同點：它們都是函數的一種特殊形態，并且可以共存。
不同點：即時函數是定義一個函數，并立即執行。它只能被使用一次，相當于“閱后即焚”。它是為了形成塊級作用域，來彌補js函數級作用域的局限，主要是為了模塊化，很多庫都這么來解決耦合，而且考慮到沒有加分號 ; 會導致錯誤的原因，很多庫都會在開始處加上 ; 。
比如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);

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

參考

閉包與變量的經典問題

在循環中創建閉包：一個常見錯誤

聊一下JS中的作用域scope和閉包closure

轉載于:https://www.cnblogs.com/shih/p/6826750.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux下使用Eclipse搭建ARM
下一篇： JS中Node节点总结