javascript之匿名函數和閉包的示例分析

小編給大家分享一下javascript之匿名函數和閉包的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體內容如下

匿名函數

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

閉包

閉包是指有權訪問另一個函數作用域中的變量的函數，創建閉包的常見的方式，就是在一個函數內部創建另一個函數，通過另一個函數訪問這個函數的局部變量

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

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

循環里的閉包

<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();    //得到函數數組 
 console.log(b.length);   //得到函數集合長度 
 for (var i = 0; i < b.length; i++) { 
 console.log(b[i]());   //輸出每個函數的值，都是最后一個值 
 } 
</script>

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

循環里的閉包--修改

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

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

閉包中的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 
 //可以強制指向某個對象 
 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>

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

私有變量

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

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

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

靜態私有變量

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

<script type="text/javascript"> 
 (function () { 
 var age = 100;//靜態私有變量 
 function run() { 
 return '運行中...'; 
 } 
 Box = function () {}; //構造方法，沒有使用var，全局函數 
 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>

看完了這篇文章，相信你對“javascript之匿名函數和閉包的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！