快捷導(dǎo)航

javascript筆記之匿名函數(shù)和閉包

更新時間：2017年02月06日 09:46:14 作者：我是新手F1

這篇文章主要為大家詳細(xì)介紹了javascript筆記之匿名函數(shù)和閉包的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文介紹了js匿名函數(shù)和閉包的相關(guān)內(nèi)容，供大家參考，具體內(nèi)容如下

匿名函數(shù)

<script type="text/javascript"> 
 //function(){}//會報錯 
 var fun = function(){};//將匿名函數(shù)賦值給變量 
 
 (function(){})();//匿名函數(shù)自執(zhí)行 
 
 function(){ 
 return function(){};//函數(shù)里的匿名函數(shù) 
 } 
</script>

閉包

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包的常見的方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量

<script type="text/javascript"> 
 //通過閉包可以返回局部變量 
 function box() { 
 var user = 'Lee'; 
 return function () { //通過匿名函數(shù)返回box()局部變量 
  return user; 
 }; 
 } 
 console.log(box()());  //通過box()()來直接調(diào)用匿名函數(shù)返回值 
 var b = box(); 
 console.log(b());  //另一種調(diào)用匿名函數(shù)返回值 
 
 //通過閉包可以實現(xiàn)局部變量的累加 
 function box() { 
 var age = 100; 
 return function () { 
  age ++; 
  return age; 
 } 
 } 
 var b = box();  //獲得函數(shù) 
 console.log(b());  //調(diào)用匿名函數(shù) 
 console.log(b());  //第二次調(diào)用匿名函數(shù)，實現(xiàn)累加 
</script>

使用閉包有一個優(yōu)點，也是它的缺點：就是可以把局部變量駐留在內(nèi)存中，可以避免使用全局變量。(全局變量污染導(dǎo)致應(yīng)用程序不可預(yù)測性，每個模塊都可調(diào)用必將引來災(zāi)難，所以推薦使用私有的，封裝的局部變量)。由于閉包里作用域返回的局部變量資源不會被立刻銷毀回收，所以可能會占用更多的內(nèi)存。過度使用閉包會導(dǎo)致性能下降，建議在非常有必要的時候才使用閉包。

循環(huán)里的閉包

<script type="text/javascript"> 
 function box() { 
 var arr = []; 
 
 for (var i = 0; i < 5; i++) { 
  arr[i] = function () { 
  return i; 
  }; 
 } 
 return arr; 
 } 
 
 var b = box();    //得到函數(shù)數(shù)組 
 console.log(b.length);   //得到函數(shù)集合長度 
 for (var i = 0; i < b.length; i++) { 
 console.log(b[i]());   //輸出每個函數(shù)的值，都是最后一個值 
 } 
</script>

box()已執(zhí)行完畢，i早已變成5，而返回的函數(shù)保存的變量都是i，所以最終的結(jié)果就是5個5

循環(huán)里的閉包--修改

<script type="text/javascript"> 
 function box() { 
 var arr = []; 
 
 for (var i = 0; i < 5; i++) { 
  arr[i] = (function (num) { 
  return function () {  //返回函數(shù) 
   return num; 
  } 
  })(i); 
  /* 
  //相當(dāng)于: 
  arr[i] = (function () { 
  var num = i;//定義一個局部變量 
  return function () { 
   return num; 
  } 
  })(); 
  */ 
 } 
 return arr; 
 } 
 
 var b = box();    //得到函數(shù)數(shù)組 
 for (var i = 0; i < b.length; i++) { 
 console.log(b[i]());   //0,1,2,3,4 
 } 
</script>

通過在box作用域里新建塊級作用域來是每個返回函數(shù)保存的變量都不一樣

閉包中的this對象

而閉包卻在運行時指向window的，因為閉包并不屬于這個對象的屬性或方法。

<script type="text/javascript"> 
 var user = 'The Window'; 
 
 var obj = { 
 user : 'The Object', 
 getUserFunction : function () { 
  return function () { //閉包不屬于obj，里面的this指向window 
  return this.user; 
  }; 
 } 
 }; 
 console.log(obj.getUserFunction()()); //The window 
 //可以強(qiáng)制指向某個對象 
 console.log(obj.getUserFunction().call(obj)); //The Object 
 /* 
 //也可以從上一個作用域中得到對象 
 getUserFunction : function () { 
 var that = this;  //從對象的方法里得對象 
 return function () { 
  return that.user; 
 }; 
 } 
 */ 
</script>

模仿塊級作用域

JavaScript沒有塊級語句的作用域，if () {} for () {}等沒有作用域

<script type="text/javascript"> 
 //使用塊級作用域(私有作用域)改寫 
 function box(count) { 
 (function () { 
  for (var i = 0; i<count; i++) {} 
 })(); 
 console.log(i); //報錯，無法訪問 
 } 
 box(2); 
</script>

使用了塊級作用域(私有作用域)后，匿名函數(shù)中定義的任何變量，都會在執(zhí)行結(jié)束時被銷毀。在全局作用域中使用塊級作用域可以減少閉包占用的內(nèi)存問題，因為沒有指向匿名函數(shù)的引用。只要函數(shù)執(zhí)行完畢，就可以立即銷毀其作用域鏈了。

私有變量

JavaScript沒有私有屬性的概念；所有的對象屬性都是公有的。不過，卻有一個私有變量的概念。任何在函數(shù)中定義的變量，都可以認(rèn)為是私有變量，因為不能在函數(shù)的外部訪問這些變量

而通過函數(shù)內(nèi)部創(chuàng)建一個閉包，那么閉包通過自己的作用域鏈也可以訪問這些變量。而利用這一點，可以創(chuàng)建用于訪問私有變量的公有方法。

<script type="text/javascript"> 
 function Box() { 
 var age = 100;   //私有變量 
 function run() {   //私有函數(shù) 
  return '運行中...'; 
 } 
 this.get = function () {  //對外公共的特權(quán)方法,閉包（函數(shù)訪問了不屬于對象作用域的age和run方法） 
  return age + run(); 
 }; 
 } 
 
 var box = new Box(); 
 console.log(box.get()); 
</script>

靜態(tài)私有變量

上面的私有變量在每次實例化對象的時候都會重新初始化，通過塊級作用域(私有作用域)中定義私有變量或函數(shù)，同樣可以創(chuàng)建對外公共的特權(quán)方法。。

<script type="text/javascript"> 
 (function () { 
 var age = 100;//靜態(tài)私有變量 
 function run() { 
 return '運行中...'; 
 } 
 Box = function () {}; //構(gòu)造方法，沒有使用var，全局函數(shù) 
 Box.prototype.go = function () { //原型方法 
 return age + run(); 
 }; 
 })(); 
 
 var box = new Box(); 
 console.log(box.go()); 
</script>

模塊模式

<script type="text/javascript"> 
 var box = function () { //box是一個模塊 
 var age = 100; 
 function run() { 
 return '運行中...'; 
 } 
 return { //直接返回對象 
 go : function () { 
 return age + run(); 
 } 
 }; 
 }(); 
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: