js閉包的程式碼範例講解

這篇文章帶給大家的內容是關於js閉包的程式碼範例講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

準確來說，閉包是基於正常的垃圾回收處理機制下的。也就是說，一般情況一個函數（函數作用域）執行完畢，裡面宣告的變數會全部釋放，被垃圾回收器回收。但閉包利用一個技巧，讓作用域裡面的變量，在函數執行完之後依舊保存沒有被垃圾回收處理掉。

閉包

定義

MDN定義

javascriptkit

詞法作用域

作用域鏈

函數在執行的過程中，先從自己內部找變數如果找不到，再從創建當前函數所在的作用域(詞法作用域)去找, 以此往上註意找的是變數的當前的狀態

作用域鏈的部落格

函數連同它作用域鏈上的要找的這個變量，共同構成閉包

#一般情況下使用閉包主要是為了

封裝資料

暫存資料

一個典型的閉包案例

function car(){
 var speed = 0
 function fn(){
 speed++
 console.log(speed)
 }
 return fn
}
var speedUp = car()
speedUp() //1
speedUp() //2

當函數內部沒有執行以下的程式碼時

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

在程式碼執行完成後，函數內部的局部變數speed就會被銷毀，由於全域標量speedUp一直存在（除非關閉目前頁面，否則全域變數一直存在），那麼函數內部的作用域就沒有辦法被銷毀，裡面有東西一直被使用，這點與瀏覽器的垃圾回收機制相仿，當我們執行speedUp()，他會在函數的詞法作用域下去尋找，函數裡面又回傳了一個fn，因而形成閉包，簡單的理解為

var speed = 0
function fn(){
 speed++
 console.log(speed)
}

這一段程式碼形成一個閉包，如果不return fn,那函數內部的局部變數就會被銷毀。

我們可以看看上述程式碼利用立即執行語句和立即執行函數可以怎麼演變：

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可以不写，则为匿名函数 
var speedUp = (function car(speed){
 return function (){
 speed++
 console.log(speed)
 }
}
)(3)

閉包的相關案例

如下程式碼輸出多少？如果想輸出3，那該如何改造程式碼？

var fnArr = [];
for (var i = 0; i < 10; i ++) {
 fnArr[i] = function(){
 return i
 };
}
console.log( fnArr[3]() ) // 10

同等演變

假設只有兩層迴圈：

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)

已改造後（立即執行語句,演變過程）

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

封裝一個Car 物件

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

如下程式碼輸出多少？如何連續輸出0,1,2,3,4

for(var i=0; i<5; i++){
 setTimeout(function(){
 console.log(&#39;delayer:&#39; + i )
 }, 0)
}

輸出結果為：delayer:5（連續輸出5個），執行setTimeout時，程式碼會掛到任務佇列中區，待i遍歷完成之後執行，而此時i = 5，所以輸出delayer:5（連續輸出5個）

修改後

for(var i=0; i<5; i++){
 (function(j){
 setTimeout(function(){
 console.log(&#39;delayer:&#39; + j )
 }, 0)//1000-1000*j 
 })(i)
}

或

for(var i=0; i<5; i++){
 setTimeout((function(j){
 return function(){
 console.log(&#39;delayer:&#39; + 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

補全程式碼，實作陣列依姓名、年紀、任意欄位排序

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'))

寫一個sum 函數，實作如下呼叫方式

console.log( sum(1)(2) ) // 3
console.log( sum(5)(-1) ) // 4

以上是js閉包的程式碼範例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！