引子實例
// 需求: 點擊某個按鈕, 提示"點擊的是第n個按鈕"
// html:
<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
// js： (錯誤實現)
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)+'個')
}
} // 無論點擊哪個按鈕都會顯示第4個
// 改進方法：
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)
}
理解閉包
如何產生閉包?
當一個嵌套的內部(子)函數引用了嵌套的外部(父)函數的變量(函數)時, 就產生了閉包
閉包到底是什麼?
使用chrome調試查看
* 理解一: 閉包是嵌套的內部函數
* 理解二: 包含被引用變量(函數)的對象
* 注意: 閉包存在於嵌套的內部函數中
產生閉包的條件?
- 函數嵌套
- 內部函數引用了外部函數的數據(變量/函數)
function fn1 () {
var a = 2
var b = 'abc'
function fn2 () { //執行函數定義就會產生閉包(不用調用內部函數)
console.log(a)
}
// fn2()
}
fn1()
function fun1() {
var a = 3
var fun2 = function () {
console.log(a)
}
}
fun1()
常見的閉包
將函數作爲另一個函數的返回值
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
將函數作爲實參傳遞給另一個函數調用
function showDelay(msg, time) {
setTimeout(function () {
alert(msg)
}, time)
}
showDelay('hello', 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
閉包的生命週期
- 產生: 在嵌套內部函數定義執行完時就產生了(不是在調用)
- 死亡: 在嵌套的內部函數成爲垃圾對象時
function fn1() {
//問題2: 此時閉包產生了嗎?
//此時閉包就已經產生了(函數提升, 內部函數對象已經創建了)
var a = 2
function fn2 () {
a++
console.log(a)
}
return fn2
}
//問題1: 此時閉包產生了嗎?
var f = fn1()
//問題3: 此時閉包釋放了嗎?
f() // 3
f() // 4
//問題4: 此時閉包釋放回收了嗎?
//問題5: 如何讓閉包釋放回收呢?
f = null //閉包死亡(包含閉包的函數對象成爲垃圾對象)
閉包的應用: 自定義JS模塊
閉包的應用 : 定義JS模塊
*具有特定功能的js文件
*將所有的數據和功能都封裝在一個函數內部(私有的)
*只向外暴露一個包含n個方法的對象或函數
*模塊的使用者, 只需要通過模塊暴露的對象調用方法來實現對應的功能
// 例如：自定義js模塊，命名爲：myModule.js
function myModule() {
//私有數據
var msg = 'Hello World!'
//操作數據的函數
function doSomething() {
console.log('doSomething() '+msg.toUpperCase())
}
function doOtherthing () {
console.log('doOtherthing() '+msg.toLowerCase())
}
//向外暴露對象(給外部使用的方法)
return {
doSomething: doSomething,
doOtherthing: doOtherthing
}
}
// 外部使用時：
// 引入js模塊
<script type="text/javascript" src="myModule.js"></script>
// 調用模塊中方法
var module = myModule()
module.doSomething()
module.doOtherthing()
閉包缺點
缺點
- 函數執行完後, 函數內的局部變量沒有釋放, 佔用內存時間會變長
- 容易造成內存泄露
解決
- 能不用閉包就不用
- 及時釋放
function fn1() {
var arr = new Array[100000]
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(){
//console.log(this)//object
return function(){
//console.log(this) //window
return this.name;
};
}
};
//console.log(object.getNameFunc())
/*
ƒ (){
//console.log(this) //window
return this.name;
}
* */
*
//console.log(object.getNameFunc)
/*
ƒ (){
console.log(this)//object
return function(){
//console.log(this) //window
return this.name;
};
}
* */
console.log(object.getNameFunc()()); //The Window
1.以函數的形式調用時，this永遠都是window
2.以方法的形式調用時，this就是調用方法的那個對象
3.當以構造函數的形式調用時，this就是新創建的那個對象
4.使用call和apply調用時，this是指定的那個對象
//代碼片段二
var name2 = "The Window";
var object2 = {
name2 : "My Object",
getNameFunc : function(){
//console.log(this) //Object2
var that = this;
return function(){
//console.log(this)//window
return that.name2;
};
}
};
console.log(object2.getNameFunc()())//My Object
面試題2
function fun(n,o) {
console.log(o)
return {
fun:function(m){
//console.log('m =' + m,'n =' + n)
return fun(m,n);
}
};
}
//var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,0,0,0
/*
var a = fun(0) //undefined
a.fun(1)//0 (m=1,n=0) 執行完後m,n被GC回收
a.fun(2)//0 (m=2,n=0)
a.fun(3)//0 (m=3,n=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