溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript匿名函數(shù)和閉包是什么

發(fā)布時間：2020-07-11 09:49:51 來源：億速云 閱讀：177 作者：清晨 欄目：開發(fā)技術(shù)

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

概述

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

普通函數(shù)

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

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

匿名函數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

閉包（closure）

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

1. 函數(shù)里面放匿名函數(shù)，如下所示：

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

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

function box(){
  var age=100;//此變量為函數(shù)的局部變量，外部無法訪問
  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());//無法實現(xiàn)累加
alert(box());//無法實現(xiàn)累加
alert(box());//無法實現(xiàn)累加

3. 使用閉包實現(xiàn)累加，如下所示：

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

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

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

1. 循環(huán)里的匿名函數(shù)取值問題，如下所示：沒有實現(xià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;
    }
  }
  //函數(shù)返回之前，循環(huán)已經(jīng)結(jié)束，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]()); //此時返回的都是5，沒有實現(xiàn)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; //直接賦值
  }
  //函數(shù)返回之前，循環(huán)已經(jīng)結(jié)束，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

方法2，通過匿名函數(shù)的自我執(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，將變量駐留在內(nèi)存中，如下所示：

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]());
}

關(guān)于this的指向問題

對于對象內(nèi)部，this指向?qū)ο蟊旧恚缦滤荆?/p>

 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的作用域?qū)ο髠鬟f給閉包
var box1={
  user:'The box',
  getUser:function(){
    var that=this;
    return function(){
      return that.user;
    };
  }
}
alert(box1.getUser()());

缺點：閉包無法釋放對象，容易導(dǎo)致內(nèi)存泄漏，如下所示：

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

塊級作用域

模仿塊級作用域，面向?qū)ο蟮乃枷?，封裝變量。普通函數(shù)沒有塊級作用域的概念，如下所示：

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

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

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

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

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

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

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

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

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

如何將公有屬性，私有化呢&#63; 如下所示：

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

通過構(gòu)造函數(shù)傳遞參數(shù)，如下所示：

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)建多次

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

靜態(tài)私有變量

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

(function(){
  var user=''; //私有變量
  Box=function(value){//必須全局構(gòu)造函數(shù)，將匿名函數(shù)賦值給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

單例對象

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

1. 通過字面量的方式實現(xiàn)，如下所示：

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

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

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

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

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手