JavaScript 經典之一 閉包
作為一個前端開發者,閉包是必須要攻克掉的障礙。據說好多面試者掛在閉包面試上。下面我就給大家講一下我理解中的閉包。不說太多的廢話,直接進入主題。
變量作用域
學習編程語言需要明白,變量的作用域。變量作用域分全局變量、局部變量。全局變量盡量少用,因為它很耗費性能。簡單理解,全局變量:在任何一個地方都可以訪問到。局部變量只有在局部才可以訪問到。先舉個例子看看:
var data=100; function domo(){ var data1=20; console.log(data); console.log(data1); } domo();
可以看出data在dome中也可被訪問。所有呢!data是全局變量,data1是局部變量。
閉包
1.常見閉包
/** * 最簡單的閉包 * */ function bibao(){ var d=10; return function(){ console.log(d); d++; } } var _bibao=bibao(); _bibao();//輸出10 _bibao();//輸出11
首先我們要明白函數是有返回值的,如果不手動更改返回值則返回undefined。如何手動更改返回值?就是在函數中使用return 返回。可以返回為布爾值也可以是對象也可以是空字符串也可以是函數。這個最簡單的閉包就是返回一個匿名函數。_bibao接收到bibao函數的返回。相當於_bibao===function(){console.log(d);d++;
2.無return閉包
-
/** * 無return的閉包 * * */ var _bibao1; function bibao1(){ var d=20; _bibao1= function(){ console.log(d); d++; } } bibao1(); _bibao1();//輸出20
_bibao1();//輸出21
這種沒有return 的閉包其實跟上面最簡單的閉包是相同的,它只不過把一個匿名函數賦值給全局變量。全局變量此刻保持對這個匿名函數的引用。當調用_bibao1()的時候,就等於調用這個匿名函數。
3.回掉函數中產生的閉包
/** * 回掉函數中產生的閉包 * @callback {Function} 回掉函數 * */ function bibao2(callback){ var d=100; setTimeout(function(){ callback() },2000) } function _bibao2(){ var d=120; bibao2(function(){ console.log(d); d++; }); setTimeout(function(){ console.log(d); },3000) } _bibao2();//兩秒後輸出120。三秒後輸出121
只有記住一個變量或者參數是一個函數的引用,這個答案就會迎刃而解。執行_bibao2();它會執行bibao2,然後傳入一個匿名函數,此刻這個匿名函數保持可以訪問到_bibao2中的d。bibao2中的參數callback保持對這個匿名函數的引用。所以它訪問的是_bibao2中的d而不是bibao2中的d。
總結
閉包是很有用的,也是很常用的,只有我們記住了它的原理,就能夠掌控它們。它只不過是一個函數的引用,這個函數可以訪問到這個函數的父函數中的變量而已。
JavaScript 經典之一 閉包