這篇文章主要介紹了js閉包的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

準(zhǔn)確來(lái)說(shuō)，閉包是基于正常的垃圾回收處理機(jī)制下的。也就是說(shuō)，一般情況一個(gè)函數(shù)（函數(shù)作用域）執(zhí)行完畢，里面聲明的變量會(huì)全部釋放，被垃圾回收器回收。但閉包利用一個(gè)技巧，讓作用域里面的變量，在函數(shù)執(zhí)行完之后依舊保存沒(méi)有被垃圾回收處理掉。

閉包

定義

MDN定義

javascriptkit

詞法作用域

作用域鏈

函數(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

當(dāng)函數(shù)內(nèi)部沒(méi)有執(zhí)行以下的代碼時(shí)

function fn(){
 speed++
 console.log(speed)
 }
return fn

在代碼執(zhí)行完成后，函數(shù)內(nèi)部的局部變量speed就會(huì)被銷(xiāo)毀，由于全局標(biāo)量speedUp一直存在（除非關(guān)閉當(dāng)前頁(yè)面，否則全局變量一直存在），那么函數(shù)內(nèi)部的作用域就沒(méi)有辦法被銷(xiāo)毀，里面有東西一直被使用，這點(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ì)被銷(xiāo)毀。

我們可以看看上述代碼利用立即執(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() //3

如下代碼輸出多少？如何連續(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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js閉包的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。