閉包
定義
詞法作用域
作用域鏈
- 函數(shù)在執(zhí)行的過(guò)程中掸茅，先從自己內(nèi)部找變量
- 如果找不到椅邓，再?gòu)膭?chuàng)建當(dāng)前函數(shù)所在的作用域(詞法作用域)去找, 以 此往上
- 注意找的是變量的當(dāng)前的狀態(tài)
函數(shù)連同它作用域鏈上的要找的這個(gè)變量，共同構(gòu)成閉包
一般情況下使用閉包主要是為了
封裝數(shù)據(jù)
暫存數(shù)據(jù)
一個(gè)典型的閉包案例
function car(){
var speed = 0
function fn(){
speed++
console.log(speed)
}
return fn
}
var speedUp = car()
speedUp() //1
speedUp() //2
在說(shuō)閉包時(shí)先了解什么是立即執(zhí)行語(yǔ)句和立即執(zhí)行函數(shù)以及他們之間的區(qū)別昧狮，請(qǐng)移步文末參考博客
當(dāng)函數(shù)內(nèi)部沒(méi)有執(zhí)行以下的代碼時(shí)
function fn(){
speed++
console.log(speed)
}
return fn
在代碼執(zhí)行完成后景馁，函數(shù)內(nèi)部的局部變量speed就會(huì)被銷毀，由于全局標(biāo)量speedUp一直存在（除非關(guān)閉當(dāng)前頁(yè)面逗鸣，否則全局變量一直存在）合住，那么函數(shù)內(nèi)部的作用域就沒(méi)有辦法被銷毀，里面有東西一直被使用撒璧，這點(diǎn)與瀏覽器的垃圾回收機(jī)制相仿聊疲，當(dāng)我們執(zhí)行speedUp()，他會(huì)在函數(shù)的詞法作用域下去尋找沪悲，函數(shù)里面又返回了一個(gè)fn，因而形成閉包阱表，簡(jiǎn)單的理解為
var speed = 0
function fn(){
speed++
console.log(speed)
}
這一段代碼形成一個(gè)閉包殿如，如果不return fn,那函數(shù)內(nèi)部的局部變量就會(huì)被銷毀。
我們可以看看上述代碼利用立即執(zhí)行語(yǔ)句和立即執(zhí)行函數(shù)可以怎么演變：
function car(){
var speed = 0
function fn(){
speed++
console.log(speed)
}
return fn
}
var speedUp = car()
//1
function car(){
var speed = 0
return function (){
speed++
console.log(speed)
}
}
var speedUp = car()
//2
function car(speed){
return function (){
speed++
console.log(speed)
}
}
var speedUp = car(3)
//3
function car(){
var speed = arguments[0]
return function (){
speed++
console.log(speed)
}
}
var speedUp = car()
//4
function car(){
var speed = 0
return function (){
speed++
console.log(speed)
}
}
//5 car可以不寫(xiě)最爬，則為匿名函數(shù)
var speedUp = (function car(speed){
return function (){
speed++
console.log(speed)
}
}
)(3)
閉包的相關(guān)案例
如下代碼輸出多少涉馁？如果想輸出3，那如何改造代碼爱致？
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i
};
}
console.log( fnArr[3]() ) // 10
同等演變
假設(shè)只有兩層循環(huán)：
var fnArr = []
for (var i = 0; i < 2; i ++) {
fnArr[i] = (function(j){
return function(){
return j
}
})(i)
}
fnArr[3]()
//1
var fnArr = []
fnArr[0] = (function(j){
return function(){
return j
}
})(0)
}
fnArr[1] = (function(j){
return function(){
return j
}
})(1)
}
fnArr[3]()
//2
var a = (function(j){
return function(){
return j
}
})(0)
}
var b = (function(j){
return function(){
return j
}
})(1)
}
b()
//3
var a = (function(j){
return function(){
return j
}
})(0)
}
function fn2(j){
return function(){
return j
}
}
var b = fn2(1)
//4
var a = (function(j){
return function(){
return j
}
})(0)
}
function fn2(j){
return function(){
return j
}
return f
}
var b = fn2(1)
//5
var a = (function(j){
return function(){
return j
}
})(0)
}
function fn2(j){
var j = arguments[0]
function f(){
return j
}
return f
}
var b = fn2(1)
改造后（立即執(zhí)行語(yǔ)句,演變過(guò)程）
var fnArr = []
for (var i = 0; i < 10; i ++) {
fnArr[i] = (function(j){
return function(){
return j
}
})(i)
}
console.log( fnArr[3]() ) // 3
var fnArr = []
for (var i = 0; i < 10; i ++) {
(function(i){
fnArr[i] = function(){
return i
}
})(i)
}
console.log( fnArr[3]() ) // 3
var fnArr = []
for (let i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i
}
}
console.log( fnArr[3]() ) // 3
封裝一個(gè) Car 對(duì)象
var Car = (function(){
var speed = 0;
function set(s){
speed = s
}
function get(){
return speed
}
function speedUp(){
speed++
}
function speedDown(){
speed--
}
return {
setSpeed: setSpeed,
get: get,
speedUp: speedUp,
speedDown: speedDown
}
})()
Car.set(30)
Car.get() //30
Car.speedUp()
Car.get() //31
Car.speedDown()
Car.get() //30
如下代碼輸出多少烤送？如何連續(xù)輸出 0,1,2,3,4
for(var i=0; i<5; i++){
setTimeout(function(){
console.log('delayer:' + i )
}, 0)
}
輸出結(jié)果為：delayer:5（連續(xù)輸出5個(gè)），執(zhí)行setTimeout時(shí)糠悯，代碼會(huì)掛到任務(wù)隊(duì)列中區(qū)帮坚，待i遍歷完成之后執(zhí)行，而此時(shí)i = 5互艾，所以輸出delayer:5（連續(xù)輸出5個(gè)）
修改后
for(var i=0; i<5; i++){
(function(j){
setTimeout(function(){
console.log('delayer:' + j )
}, 0)//1000-1000*j
})(i)
}
或者
for(var i=0; i<5; i++){
setTimeout((function(j){
return function(){
console.log('delayer:' + j )
}
}(i)), 0)
}
如下代碼輸出多少试和？
function makeCounter() {
var count = 0
return function() {
return count++
};
}
var counter = makeCounter()
var counter2 = makeCounter();
console.log( counter() ) // 0
console.log( counter() ) // 1
console.log( counter2() ) // 0
console.log( counter2() ) // 1
補(bǔ)全代碼，實(shí)現(xiàn)數(shù)組按姓名纫普、年紀(jì)阅悍、任意字段排序
var users = [
{ name: "John", age: 20, company: "Baidu" },
{ name: "Pete", age: 18, company: "Alibaba" },
{ name: "Ann", age: 19, company: "Tecent" }
]
users.sort(byName)
users.sort(byAge)
users.sort(byField('company'))
解答
function byName(user1, user2){
return user1.name > user2.name
}
function byAge (user1, user2){
return user1.age > user2.age
}
function byFeild(field){
return function(user1, user2){
return user1[field] > user2[field]
}
}
users.sort(byField('company'))
寫(xiě)一個(gè) sum 函數(shù)，實(shí)現(xiàn)如下調(diào)用方式
console.log( sum(1)(2) ) // 3
console.log( sum(5)(-1) ) // 4
解答
function sum(a) {
return function(b) {
return a + b
}
}
函數(shù)柯里化-只傳遞給函數(shù)一部分參數(shù)來(lái)調(diào)用它昨稼，讓它返回一個(gè)函數(shù)去處理剩下的參數(shù)
參考
Javascript-立即調(diào)用函數(shù)表達(dá)式
立即執(zhí)行函數(shù): (function(){...})() 與 (function(){...}()) 有什么區(qū)別?
