詳解JavaScript匿名函數和閉包

更新時間：2020年07月10日 14:58:51 作者：Alan.hsiang

這篇文章主要介紹了JavaScript匿名函數和閉包的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下

概述

在JavaScript前端開發(fā)中，函數與對其狀態(tài)即詞法環(huán)境（lexical environment）的引用共同構成閉包（closure）。也就是說，閉包可以讓你從內部函數訪問外部函數作用域。在JavaScript，函數在每次創(chuàng)建時生成閉包。匿名函數和閉包可以放在一起學習，可以加深理解。本文主要通過一些簡單的小例子，簡述匿名函數和閉包的常見用法，僅供學習分享使用，如有不足之處，還請指正。

普通函數

普通函數由fucntion關鍵字，函數名，() 和一對{} 組成，如下所示：

 function box(){
   return 'Hex';
 }
 alert(box());

匿名函數

顧名思義，匿名函數就是沒有實際名字的函數。單獨的匿名函數無法運行，如下所示：

 function (){
   return 'Hex';
 }
 //以上，會報錯：缺少標識符

如何解決匿名函數不能執(zhí)行的問題呢？有如下幾種方法：

1. 把匿名函數賦值給變量，如下所示：

 //把匿名函數賦值給變量
 var box=function(){
   return 'Hex';
 }
 alert(box());

2. 通過自我執(zhí)行來調用函數，格式如下：(匿名函數)()

 (function(){
   alert('Hex');
 })();

3. 把匿名函數自我執(zhí)行的返回值賦值給變量，如下所示：

 var box=(function(){
   return 'Hex';
 })();
 alert(box);//注意：此處不帶括弧

4. 或者省去變量，如下所示：

 alert((function() {
   return 'Hex';
 })());

自我執(zhí)行匿名函數如何傳遞參數呢？如下所示：

 (function(age) {
   alert('Hex--' + age);
 })(30);

閉包（closure）

閉包是由函數以及創(chuàng)建該函數的詞法環(huán)境組合而成。這個環(huán)境包含了這個閉包創(chuàng)建時所能訪問的所有局部變量。簡單理解：函數里面套函數，子函數可以訪問父函數的作用域里面的變量。

1. 函數里面放匿名函數，如下所示：

function box(){
  //閉包
  return function(){
    return 'Hex';
  }
}
alert(box()());
//或者
var b=box();
alert(b());

2. 通過閉包返回局部變量，使用閉包可以有一個優(yōu)點，和是它的缺點，可以是局部變量駐留在內存中。

function box(){
  var age=100;//此變量為函數的局部變量，外部無法訪問
  return function(){
    return age;
  }
}
alert(box()());

閉包和全局變量相比較

1. 使用全局變量累加，如下所示：

var age=100;
function box(){
  age++;
}
alert(age);
box();
alert(age);
box();
alert(age);

2. 使用局部變量累加，如下所示：

function box(){
  var age=100;
  age++;
  return age;
}
alert(box());//無法實現累加
alert(box());//無法實現累加
alert(box());//無法實現累加

3. 使用閉包實現累加，如下所示：

function box(){
  var age=100;
  return function(){
    age++;
    return age;
  }
}
var b=box();//將返回值賦值給b
alert(b());//實現累加
alert(b());//實現累加
alert(b());//實現累加
b=null;//使用閉包在調用結束時不會立即銷毀內存，導致性能下降,所以需要解除占用

差異：使用全局變量，容易引起命名沖突，且系統性能下降。

循環(huán)匿名函數取值問題

1. 循環(huán)里的匿名函數取值問題，如下所示：沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=function(){
      return i;
    }
  }
  //函數返回之前，循環(huán)已經結束，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]()); //此時返回的都是5，沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果
}

以上問題如何優(yōu)化呢？

方法1，直接賦值，不采用閉包，如下所示：

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=i; //直接賦值
  }
  //函數返回之前，循環(huán)已經結束，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

方法2，通過匿名函數的自我執(zhí)行，如下所示：

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=(function(num){
    　　//此處可以有其他一些邏輯
    　　return num;
    })(i);
  }
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

方法3，將變量駐留在內存中，如下所示：

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=(function(num){
      //此處可以有其他一些邏輯
      return function(){
      　　return num;
      };
    })(i);
  }
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]());
}

關于this的指向問題

對于對象內部，this指向對象本身，如下所示：

 var box={
   getThis:function(){
     return this;
   }
 };
 alert(box.getThis());//輸出[object Object] //此處this指box對象

var user='The window';
var box={
  user:'The box',
  getUser:function(){
    return this.user;
  }
}
alert(box.getUser());//輸出：the box

this在閉包中，指示window對象，所以閉包在運行時指向window，如下所示：

var box1 ={
  getThis:function(){
    return function(){
      return this;
    }
  }
};
alert(box1.getThis()()); //輸出[object Window]//此處this是window對象

var box1={
  user:'The box',
  getUser:function(){
    //此處的作用域是box1
    return function(){
      //此處的作用域是widow
      return this.user;
    };
  }
}
alert(box1.getUser()());//輸出：the window ，表示閉包在運行時模擬this指向window

如何讓閉包的this指向box呢？可以有如下兩種方法，如下所示：

alert(box1.getUser().call(box1));//對象冒充
//可以將box的作用域對象傳遞給閉包
var box1={
  user:'The box',
  getUser:function(){
    var that=this;
    return function(){
      return that.user;
    };
  }
}
alert(box1.getUser()());

缺點：閉包無法釋放對象，容易導致內存泄漏，如下所示：

function box(){
  var a1=document.getElementById('A01');
  var txt=a1.innerHTML;
  a1.onclick=function(){
    //如果a1為null，則會報錯
    //alert(a1.innerHTML);//點擊事件獲取內容,
    alert(txt);
  }
  //如無下面一句，則會導致內存無法釋放對象a1
  a1=null;//此處需要手動將a1釋放，等待回收
}
box();

塊級作用域

模仿塊級作用域，面向對象的思想，封裝變量。普通函數沒有塊級作用域的概念，如下所示：

function box(){
  for (var i=0;i<5;i++) {

  }
  alert(i);//輸出：5，表示出了for語句塊，i依然可以訪問
}
box();

如何讓i私有化，出了作用域，不可以訪問呢?可以采用匿名函數的自我執(zhí)行，則出了作用域就會訪問不到，如下所示：

function box(){
  (function(){
    for (var i=0;i<5;i++) {

    }
  })();
  //alert(i);//報錯：提示“i”未定義
}
box();

全局變量的私有作用域，減少變量的命名沖突，如下所示：

 (function(){
   //此處就是全局作用域里面的私有作用域
   var age=100;
   alert(age);
 })();
 //alert(age);////報錯：提示“age”未定義

普通函數和構造函數的區(qū)別：首字母大寫。如下所示：對象的屬性和函數都是public類型的

function Box(){
  this.age=100; //此處是公有屬性，無法私有化
  //函數也是公有函數
  this.run=function(){
    return 'running....';
  }
}
var box=new Box();
alert(box.age); //通過對象可以訪問
alert(box.run());//通過對象可以訪問

如何將公有屬性，私有化呢? 如下所示：

function Box(){
  var age=100;//私有變量，外部訪問不到
  function run(){//私有函數，外部訪問不到
    return 'running....';
  }
  //對外公布的訪問接口，可以訪問私有內容
  this.go=function(){
    return age+' '+run();
  }
}
var box=new Box();
alert(box.go());

通過構造函數傳遞參數，如下所示：

function Box(v){
  var user=v;
  this.getUser=function(){
    return user;
  };
  this.setUser=function(v){
    user=v;
  }
}
var box=new Box('Hex');
alert(box.getUser());
//對象方法可以在創(chuàng)建的時候，創(chuàng)建多次

注意：通過構造函數創(chuàng)建對象，在每次創(chuàng)建的時候，都會分配不同的地址。

靜態(tài)私有變量

采用靜態(tài)私有變量，可以實現數據的共享，如下所示：

(function(){
  var user=''; //私有變量
  Box=function(value){//必須全局構造函數，將匿名函數賦值給Box,否則外部無法訪問
    user=value;
  }
  Box.prototype.getUser=function(){
    return user;
  };
  Box.prototype.setUser=function(value){
    user=value;
  };
})();
var box=new Box('AAAA'); //第一次實例化
alert(box.getUser());//輸出AAAA
var box2=new Box('BBBB');//第二次實例化
alert(box.getUser());//輸出BBBB

單例對象

單例即只有一個實例化的對象，可以有兩種實現方式。

1. 通過字面量的方式實現，如下所示：

var box={
  user:'hex',
  go:function(){
    return user+' is running....';
  }
};
alert(box.go());

2. 通過匿名函數的自我執(zhí)行返回對象的方式實現，如下所示：

var box=function(){
  var user='Hex'; //私有變量
  function run(){ //私有函數
    return ' is running....';
  }
  //返回一個對象
  var obj= {
    //公共特權方法
    going:function(){
      return user+run();
    }
  }
  return obj;
}();
alert(box.going());

以上就是詳解JavaScript匿名函數和閉包的詳細內容，更多關于JavaScript匿名函數和閉包的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

javascript instanceof 與typeof使用說明
instanceof和typeof都能用來判斷一個變量是否為空或是什么類型的變量。
2010-01-01
javaScript arguments 對象使用介紹
函數體內可以通過 arguments 對象來接收傳遞進來的參數，下面有個不錯的示例，大家可以感受下
2013-10-10
簡單談談Javascript函數中的arguments
在JavaScript中，arguments對象是比較特別的一個對象，實際上是當前函數的一個內置屬性。下面這篇文章主要介紹了關于Javascript函數中的arguments面貌以及如何轉化為數組的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
代碼獲取歷史上的今天發(fā)生的事
這篇文章主要介紹了代碼獲取歷史上的今天發(fā)生的事，數據來源于wiki,需要的朋友可以參考下
2014-04-04
你的 mixin 真的兼容 ECMAScript 5 嗎?
本篇文章主要講述了，在JavaScript 中把一個對象的屬性或者方法 mixin 到另一個
2013-04-04
JavaScript數據類型轉換
本文詳細講解了JavaScript實現數據類型轉換的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
ECMAScript6快速入手攻略
本文譯自 Github 上的一篇文章，目的是對還不太熟悉 ES6語法的同學做一個簡單的掃盲。下面一起來學習。
2016-07-07
Javascript標準DOM Range操作全集
Javascript標準DOM Range操作全集...
2007-01-01
js函數在frame中的相互調用詳解
一個HTML頁面可以有一個或多個子框架，這些子框架以<iframe>來標記，用來顯示一個獨立的HTML頁面。這里所講的框架編程包括框架的自我控制以及框架之間的互相訪問，例如從一個框架中引用另一個框架中的JavaScript變量、調用其他框架內的函數、控制另一個框架中表單的行為等
2014-03-03
JavaScript toFixed() 方法
toFixed() 方法可把 Number 四舍五入為指定小數位數的數字。
2010-04-04