前端總結·基礎篇·JS（三）arguments、callee、call、apply、bind及函數封裝和構造函數

前端總結系列

• 前端總結·基礎篇·CSS（一）布局
• 前端總結·基礎篇·CSS（二）視覺
• 前端總結·基礎篇·CSS（三）補充
• 前端總結·基礎篇·JS（一）原型、原型鏈、構造函數和字符串（String）
• 前端總結·基礎篇·JS（二）數組深拷貝、去重以及字符串反序和數組（Array）
• 前端總結·基礎篇·JS（三）arguments、callee、call、apply、bind及函數封裝和構造函數

目錄

一、函數使用
    1.1 函數聲明和函數表達式
    1.2 函數封裝（自調用函數、閉包）
    1.3 函數屬性（arguments、callee）
    1.4 構造函數

二、函數技巧
    2.1 改變函數作用域（call/apply/bind） 2.2 for循環中的setTimeout問題修復 

一、函數使用

字符串和數組都是用來存儲數據。需要做一些特定的事情的時候，我們就會會用函數封裝起來。

1.1 函數聲明和函數表達式

聲明一個函數可以用函數聲明或者函數表達式。

• 函數表達式必須先聲明后調用
• 函數內的變量需要使用var聲明，否則會污染全局變量

function hello( name ) { some code ... } // 函數聲明 var hello = function ( name ) { some code ... } // 函數表達式 // 變量提升 | 函數內部的變量未使用var聲明，執行后會導致變量成為全局變量 var age = 22 function showAge(){ age = 23 console.log(age) } showAge() // 23 | 執行函數 console.log(age) // 23 | 測試全局變量age的值 

1.2 函數封裝（自調用函數、閉包）

實際項目中會引入很多外部JS文件，為了避免彼此命名沖突。通常各自都會對內部函數進行封裝。（現在更好的方案是使用模塊化，模塊化以后再總結）

自調用函數

使用自調用函數，把整個JS文件的代碼都封裝在內。

• 這樣做的好處是不會污染全局變量，可以很好的減少命名沖突。
• 最后把對外訪問的接口掛載在window上。

(function(){ // some code ... window.myApp = myApp() // 把對外訪問的接口掛載在window上 })() 

閉包封裝

如果你內部使用的是函數表達式，並且不用var聲明，變量依舊會泄露到全局。

// a.js (function(){ function myApp() { // 定義showName方法 function showName(name) { console.log(name) } // 定義showAge方法 function showAge(age){ console.log(age) } // 返回一個對象 return { showName: showName, showAge: showAge } } window.myApp = myApp() })() 

功能擴展

引入上面的a.js文件，並且創建b.js來寫程序主邏輯。

• 你也可以寫在一個文件，寫在兩個文件是為了把接口和控制器分開，方便管理。
• 你可以修改上面提供的方法，或者新添加一條方法。

//b.js // 修改已有方法 myApp.showName = function (name) { console.log('Call me '+name) } // 定義新方法 myApp.showCity = function (city) { console.log(city) } myApp.showName('berg') // 能夠訪問 | berg myApp.showCity('NanChang') // 能夠訪問 | NanChang showName('berg') // 不能訪問 | Uncaught ReferenceError: showName is not defined 

1.3 函數屬性（arguments、callee）

arguments是用來存放實參的，可以通過下標訪問實參的值。callee指向當前執行的函數，可以在遞歸的時候用。具體遞歸場景以及代碼，請見MDN。

• callee不能實現尾遞歸
• callee在ES5嚴格模式中禁止使用
• caller指向調用當前函數的函數（已廢棄）

function show(name,age) { console.log(name) // berg console.log(age) // 22 console.log(arguments) // ["berg", 22] console.log(arguments.callee) // function show(name,age) {} } show('berg',22) 

1.4 構造函數

ES6可以使用Class實現繼承，以后在單獨總結ES6的時候會提到。推薦一個非常好的ES6系列教程，深入淺出ES6

// 聲明構造函數 Human function Human() { this.play = function(){ console.log('I\'m playing.') } } // 聲明構造函數 Male function Male() { this.sex = 'male' } // 聲明構造函數 Female function Female() { this.sex = 'female' } // 讓Male和Female繼承Human Male.prototype = new Human() Female.prototype = new Human() // 創建xiaoming對象並且測試繼承結果 var xiaoming = new Male() console.log(xiaoming.sex) // male console.log(xiaoming.play()) // I'm playing. // 創建xiaohong對象並且測試繼承結果 var xiaohong = new Female() console.log(xiaohong.sex) // female console.log(xiaohong.play()) // I'm playing. 

二、函數技巧

2.1 改變函數作用域（call/apply/bind）

當需要改變上下文的this的時候，可以使用call/apply/bind。（更詳細的解釋請見ChokCoco，需要用call實現繼承請見MDN）

• 三種方法的第一個參數都是this的上下文
• apply第二個參數是數組，call和bind后面都是接單個參數
• call和apply默認會自動執行，bind需要在后面加()來自動執行
• bind是ES5語法，支持IE9+

/* 以下以數組合並為例子 * 使用不同的方法之前，請確保a和b為默認值 */ var a = [1,2,3] // 測試用的默認值 var b = [4,5,6] // 測試用的默認值 a.push(b) // 直接使用push（不符合預期） console.log(a) // [1, 2, 3, Array[3]] // call方法（在這種情況下要逐個輸入參數，不太方便） Array.prototype.push.call(a,4,5,6) console.log(a) // [1, 2, 3, 4, 5, 6] // apply方法（第二個參數直接傳入數組，非常適用這種場景） Array.prototype.push.apply(a,b) console.log(a) // [1, 2, 3, 4, 5, 6] // bind方法 Array.prototype.push.bind(a,4,5,6)() // 注意看，這里需要加一個自動執行函數 console.log(a) // [1, 2, 3, 4, 5, 6] 

2.2 for循環中的setTimeout問題修復

setTimeout有自己的this。如果在外層放一個for循環，意味着會一次性執行完，而沒有起到延時的作用。解決方案是使用閉包。此處主要參考JavaScript 秘密花園

• setTimeout是一個定時執行函數。接受兩個參數，第一個是執行的函數，第二個是延遲執行的時間。通常用在登陸之后，提示幾秒鍾之后跳轉到首頁（現在基本不這樣做了）。
• setInterval和setTimeout基本一致。只是第二個時間參數，表示的是每多長事件執行一次。
• 第二個參數的時間單位是毫秒（1000表示為1秒）

// 使用閉包前 for(var x = 0; x<10; x++) { setTimeout(run,1000) // 10 } function run() { console.log(x) } // 使用閉包后 for(var x = 0; x<10; x++) { setTimeout((function (x) { return function() { console.log(x) // 0 1 2 3 4 5 6 7 8 9 } })(x),1000) } 

總結

全文主要參考以下網站

• MDN
• JavaScript 秘密花園
• ChokCoco

推薦的教程

• JavaScript系列 @ 廖雪峰
• JavaScript 標准參考教程（alpha） @ 阮一峰
• 深入理解JavaScript @ 湯姆大叔
• 深入淺出ES6
• ECMAScript 6 入門 @ 阮一峰
• 張鑫旭博客

全文主要是參考MDN寫出的總結。外加ChokCoco和JavaScript 秘密花園中的細致分析，以及自己平時的一些總結寫成此文。

文中的錯誤還望能夠指出，會及時做出修改（哪怕是錯別字）。Vue的基本理念現在差不多搞清楚了，大概在下周，會對Vue做一個總結（其實官方文檔是最好的總結 ^_^）。