JavaScript函數高級——閉包
一、引子實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>00_引入</title>
</head>
<body>
<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
<!--
需求: 點擊某個按鈕, 提示"點擊的是第n個按鈕"
-->
<script type="text/javascript">
var btns = document.getElementsByTagName('button')
//遍歷加監聽
/*
for (var i = 0,length=btns.length; i < length; i++) {
var btn = btns[i]
btn.onclick = function () {
alert('第'+(i+1)+'個')
}
}*/
/*
for (var i = 0,length=btns.length; i < length; i++) {
var btn = btns[i]
//將btn所對應的下標保存在btn上
btn.index = i
btn.onclick = function () {
alert('第'+(this.index+1)+'個')
}
}*/
//利用閉包
for (var i = 0,length=btns.length; i < length; i++) {
(function (j) {
var btn = btns[j]
btn.onclick = function () {
alert('第'+(j+1)+'個')
}
})(i)
}
</script>
</body>
</html>二、理解閉包
（1）如何產生閉包?
- 當一個嵌套的內部(子)函數引用了嵌套的外部(父)函數的變量(函數)時, 就產生了閉包。
（2）閉包到底是什麼?
- 使用chrome調試查看。
- 理解一: 閉包是嵌套的內部函數(絕大部分人)。
- -理解二: 包含被引用變量(函數)的對象(極少數人)。
- -注意: 閉包存在於嵌套的內部函數中。
（3）產生閉包的條件?
- 函數嵌套
- 內部函數引用了外部函數的數據(變量/函數)
三、常見的閉包
（1）將函數作爲另一個函數的返回值
// 1. 將函數作爲另一個函數的返回值
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4（2）將函數作爲實參傳遞給另一個函數調用
// 2. 將函數作爲實參傳遞給另一個函數調用
function showDelay(msg, time) {
setTimeout(function () {
alert(msg)
}, time)
}
showDelay('atguigu', 2000)四、閉包的作用
（1）使用函數內部的變量在函數執行完後, 仍然存活在內存中(延長了局部變量的生命週期)
（2）讓函數外部可以操作(讀寫)到函數內部的數據(變量/函數)
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
// return a
}
function fn3() {
a--
console.log(a)
}-
return fn3
}
var f = fn1()
f() // 1
f() // 0問題:
- 函數執行完後, 函數內部聲明的局部變量是否還存在?
一般是不存在, 存在於閉包中的變量纔可能存在。
- 在函數外部能直接訪問函數內部的局部變量嗎?
不能, 但我們可以通過閉包讓外部操作它。
五、閉包的生命週期
（1）產生: 在嵌套內部函數定義執行完時就產生了(不是在調用時)。
（2）死亡: 在嵌套的內部函數成爲垃圾對象時。
function fn1() {
//此時閉包就已經產生了(函數提升, 內部函數對象已經創建了)
var a = 2
function fn2 () {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
f = null //閉包死亡(包含閉包的函數對象成爲垃圾對象)六、閉包的應用：自定義JS模塊
閉包的應用 : 定義JS模塊
- 具有特定功能的js文件。
- 將所有的數據和功能都封裝在一個函數內部(私有的)。
- 只向外暴露一個包信n個方法的對象或函數。
- 模塊的使用者, 只需要通過模塊暴露的對象調用方法來實現對應的功能。
第一種方式：
// myModule.js
function myModule() {
//私有數據
var msg = 'My data'
//操作數據的函數
function doSomething() {
console.log('doSomething() '+msg.toUpperCase())
}
function doOtherthing () {
console.log('doOtherthing() '+msg.toLowerCase())
}
//向外暴露對象(給外部使用的方法)
return {
doSomething: doSomething,
doOtherthing: doOtherthing
}
}// 使用模塊：
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
var module = myModule()
module.doSomething()
module.doOtherthing()
</script>第二種方式：
// myModule2.js
(function () {
//私有數據
var msg = 'My atguigu'
//操作數據的函數
function doSomething() {
console.log('doSomething() '+msg.toUpperCase())
}
function doOtherthing () {
console.log('doOtherthing() '+msg.toLowerCase())
}
//向外暴露對象(給外部使用的方法)
window.myModule2 = {
doSomething: doSomething,
doOtherthing: doOtherthing
}
})()// 使用模塊
<script type="text/javascript" src="myModule2.js"></script>
<script type="text/javascript">
myModule2.doSomething()
myModule2.doOtherthing()
</script>七、閉包的缺點及解決
（1）缺點
- 函數執行完後, 函數內的局部變量沒有釋放, 佔用內存時間會變長。
- 容易造成內存泄露。
（2）解決
- 能不用閉包就不用。
- -及時釋放。
function fn1() {
var arr = new Array(10000000)
function fn2() {
console.log(arr.length)
}
return fn2
}
var f = fn1()
f()
f = null //讓內部函數成爲垃圾對象-->回收閉包八、閉包_面試題
面試題1：
//代碼片段一
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); // The Window
//代碼片段二
var name2 = "The Window";
var object2 = {
name2 : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name2;
};
}
};
alert(object2.getNameFunc()()); // My Object面試題2：
function fun(n,o) {
console.log(o)
return {
fun:function(m){
return fun(m,n)
}
}
}
var a = fun(0)
a.fun(1)
a.fun(2)
a.fun(3)//undefined,0,0,0
var b = fun(0).fun(1).fun(2).fun(3)//undefined,0,1,2
var c = fun(0).fun(1)
c.fun(2)
c.fun(3)//undefined,0,1,1可通過斷點調試查看執行步驟。