當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 闭包的详细分享（三种创建方式）（附小实例）

發布時間：2025/7/14 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 闭包的详细分享（三种创建方式）（附小实例）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript閉包的詳細理解

一、原理：閉包函數--指有權訪問私有函數里面的變量和對象還有方法等；通俗的講就是突破私有函數的作用域，讓函數外面能夠使用函數里面的變量及方法。

1、第一種創建方式

function test(){var x=10;return function(){return x;}}var a=test();alert(a); //彈出test函數私有變量x，結果：10

2、第二種創建方式

var y;function test(){var x=10;y=3;y=function(){return x;}}test(); //當調用函數之后test（）會找到一塊緩存現在test（）里放的就是變量x 和匿名函數yalert(y());

3、第三種創建方式

function test(){var x=2;var y=function(){return x;}x++;return y;}var a=test();alert(a()); //彈出三讀到第三種創建方法，有的朋友說了，明明在y的函數體已經返回了x變量，輸出的為什么是3不是2.注意：朋友們，y匿名函數只是在當前函數塊創建，但是并未執行。函數順序執行X++后，return y；在此才執行，++過后必然是3而不是2.

實例：

　　a、閉包實現迭代器。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>閉包實現迭代器</title><script type="text/javascript">function test(array){/*這里用的是index++ 當第一次調用的時候作用域于test的index定義為0而在array[index++]這句話是先把index的索引賦值給這個數組然后在進行自加1所以我們調用第一次的時候輸出的index=0的王維璋第二次輸出index=1的孫家營...
　　　　　 */var index=0;return function(){return array[index++];}}var a=test(['王維璋','孫家營','王帥']);for(var i = 0; i<3; i++){console.log(a()); }//因為數組傳遞的參數只有三個所以在此array里面只有三個數據當遍歷迭代到第四個數據的時候返回的是undefined</script></head><body></body> </html>

　　b、閉包實現點擊增加p標記

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>閉包實現迭代增加標記</title><style >div{height:500px; background:#000; color:#fff; text-align:center;}p{color:#fff;background:#f00;height:30px;}</style></head><body><input type="button" name="but" value="創建p在div里" id="but" οnclick="a()"><div id="box-div"><p>我是p1</p></div><script type="text/javascript">function test(){var div=document.getElementById("box-div");return function(){var p=document.createElement("p");return div.appendChild(p);}}var a=test();</script></body> </html>

? ?初學者理解起來閉包不是很好讀懂，有問題或者意見，歡迎下面評論，我會和大家一起分享所學，歡迎交流！！！

轉載于:https://www.cnblogs.com/wangweizhang/p/8328991.html

總結

以上是生活随笔為你收集整理的JavaScript 闭包的详细分享（三种创建方式）（附小实例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。