js中的閉包實例展示
前言
準(zhǔn)確來說，閉包是基于正常的垃圾回收處理機(jī)制下的。也就是說，一般情況一個函數(shù)（函數(shù)作用域）執(zhí)行完畢，里面聲明的變量會全部釋放，被垃圾回收器回收。但閉包利用一個技巧，讓作用域里面的變量，在函數(shù)執(zhí)行完之后依舊保存沒有被垃圾回收處理掉。
閉包
定義
MDN定義
javascriptkit
詞法作用域
閉包的三大特點為：
1、函數(shù)嵌套函數(shù)
2、內(nèi)部函數(shù)可以訪問外部函數(shù)的變量
3、參數(shù)和變量不會被回收。
作用域鏈
函數(shù)在執(zhí)行的過程中，先從自己內(nèi)部找變量如果找不到，再從創(chuàng)建當(dāng)前函數(shù)所在的作用域(詞法作用域)去找, 以 此往上注意找的是變量的當(dāng)前的狀態(tài)
作用域鏈的博客
函數(shù)連同它作用域鏈上的要找的這個變量，共同構(gòu)成閉包
一般情況下使用閉包主要是為了
- 封裝數(shù)據(jù)
- 暫存數(shù)據(jù)
一個典型的閉包案例
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)部沒有執(zhí)行以下的代碼時
function fn(){
speed++
console.log(speed)
}
return fn
在代碼執(zhí)行完成后，函數(shù)內(nèi)部的局部變量speed就會被銷毀，由于全局標(biāo)量speedUp一直存在（除非關(guān)閉當(dāng)前頁面，否則全局變量一直存在），那么函數(shù)內(nèi)部的作用域就沒有辦法被銷毀，里面有東西一直被使用，這點與瀏覽器的垃圾回收機(jī)制相仿，當(dāng)我們執(zhí)行speedUp()，他會在函數(shù)的詞法作用域下去尋找，函數(shù)里面又返回了一個fn，因而形成閉包，簡單的理解為
var speed = 0
function fn(){
speed++
console.log(speed)
}
這一段代碼形成一個閉包，如果不return fn,那函數(shù)內(nèi)部的局部變量就會被銷毀。
我們可以看看上述代碼利用立即執(zhí)行語句和立即執(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可以不寫，則為匿名函數(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í)行語句,演變過程）
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
如下代碼輸出多少？如何連續(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個），執(zhí)行setTimeout時，代碼會掛到任務(wù)隊列中區(qū)，待i遍歷完成之后執(zhí)行，而此時i = 5，所以輸出delayer:5（連續(xù)輸出5個）
修改后
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ǔ)全代碼，實現(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'))
寫一個 sum 函數(shù)，實現(xiàn)如下調(diào)用方式
console.log( sum(1)(2) ) // 3 console.log( sum(5)(-1) ) // 4
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了JavaScript對象原型鏈原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
在平時工作開發(fā)中，大部分開發(fā)人員都花費大量的時間在維護(hù)其他人員的代碼。很難從頭開始開發(fā)新代碼，很多情況下都是以他人成果為基礎(chǔ)的，或者新增修改需求，自己寫的代碼也會被其他開發(fā)人員調(diào)用，所以寫好一份高質(zhì)量可維護(hù)的代碼就顯得十分重要。2021-05-05
5個書寫JavaScript代碼的壞習(xí)慣，看看你中槍了沒？
這篇文章主要介紹了5個書寫JavaScript代碼的壞習(xí)慣，看看你中槍了沒？,本文指出了你沒有使用命名空間、變量定義的東一個西一個、Javascript的變量范圍、Javascript的面向?qū)ο?、new關(guān)鍵字等問題,需要的朋友可以參考下2014-11-11
禁止頁面復(fù)制功能、禁用頁面右鍵菜單等等在瀏覽網(wǎng)頁時想必大家都有遇到過吧，下面為大家詳細(xì)介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對比JSON的優(yōu)勢分析說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2022-02-02
模擬彈出菜單的代碼...2007-08-08
javascript事件的傳播基礎(chǔ)實例講解(35)
這篇文章主要為大家詳細(xì)介紹了javascript事件的傳播基礎(chǔ)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
js+for循環(huán)實現(xiàn)字符串自動轉(zhuǎn)義的代碼(把后面的字符替換前面的字符)
這段代碼是從網(wǎng)上看到的一段不錯的代碼，用for命令實現(xiàn)字符串的轉(zhuǎn)移，而且使用的是for循環(huán)直接將后面的字符替換成前面的字符，這個邏輯以前沒試過2020-12-12
教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)
這篇文章主要介紹了JS更簡單的獲取表單中數(shù)據(jù)(formdata),本文給大家分享的js獲取表單數(shù)據(jù)更簡潔，通過兩種方法結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
IOS中safari下的select下拉菜單文字過長不換行的解決方法
今天在項目開發(fā)中遇到一個問題safari下的select下拉菜單文字過長不換行問題，最終我用<optgroup>標(biāo)簽解決此問題，下面小編把實現(xiàn)思路分享給大家供大家參考2016-09-09