JavaScript閉包的案例分析

這篇文章將為大家詳細講解有關(guān)JavaScript閉包的案例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。了解閉包前首先需要了解變量作用域

變量作用域：全局變量和局部變量
1、全局變量
直接定義在全局作用域的變量

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

而函數(shù)可以直接讀取全局變量

2、局部變量
直接定義在函數(shù)內(nèi)部的變量（在ES6之前JS是沒有塊級作用域的。）

function getName(){
  var name='Fakin';
}
alert(name)//undefined

閉包
搞清楚了這兩個東西后咱們在來看下閉包是什么回事！

問題1：閉包是個啥玩意，上面說了一堆，我看不懂?。?br/>答：閉包個人理解就是能讀取其他函數(shù)內(nèi)部變量的函數(shù)

問題2：閉包怎么用
答：在一個函數(shù)的內(nèi)部在創(chuàng)建一個函數(shù)，在這個函數(shù)中引用上一函數(shù)的變量，最后講這個函數(shù)返回即可，是不是很繞，下面給例子

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

如上例子中 f2就是閉包函數(shù)，在f1中返回函數(shù)f2，最后把f1賦值給result,result一共運行了兩次，結(jié)果也得出了咱們想要的，也就證明了，在閉包中f2引用了f1的變量‘n’而‘n’沒有因為f1執(zhí)行完畢后然后在內(nèi)存中銷毀，大家應(yīng)該知道，在JS中如果一個變量在函數(shù)執(zhí)行完后沒有被其他地方給引用的話，是就自動銷毀的。

使用閉包需要注意的地方

1：由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存使用很大，會造成渲染卡頓等等，瀏覽器運行慢，在IE瀏覽器中還會造成內(nèi)存泄露等問題
2：由于在閉包中子函數(shù)引用父函數(shù)的變量，子函數(shù)會修改父函數(shù)變量，請不要隨意修改父函數(shù)變量的值

思考題

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

為什么f1 f2 f3都返回的是同一個值，而不是我們想要的呢？那怎么能不能閉包來解決呢？
其實也很簡單，咱們閉包多兩行代碼就行

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自執(zhí)行函數(shù)中把i傳入相當(dāng)于這個自執(zhí)行函數(shù)的參數(shù)綁定了i，
       //當(dāng)每次循環(huán)的時候不管變量怎么更改，這個函數(shù)的參數(shù)不會更改，所以返回咱們想要的結(jié)果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

關(guān)于JavaScript閉包的案例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。