JavaScript閉包的案例分析

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

閉包是指有權訪問另一個函數作用域中的變量的函數。創建閉包的常見方式，就是在一個函數內部創建另一個函數。了解閉包前首先需要了解變量作用域

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

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

而函數可以直接讀取全局變量

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

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

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

問題1：閉包是個啥玩意，上面說了一堆，我看不懂??？
答：閉包個人理解就是能讀取其他函數內部變量的函數

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

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

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

使用閉包需要注意的地方

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

思考題

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));
       //在自執行函數中把i傳入相當于這個自執行函數的參數綁定了i，
       //當每次循環的時候不管變量怎么更改，這個函數的參數不會更改，所以返回咱們想要的結果
    }
    return arr;
}

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

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

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