當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 闭包的详细分享（三种创建方式）（附小实例）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 闭包的详细分享（三种创建方式）（附小实例）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript閉包的詳細理解
一、原理：閉包函數--指有權訪問私有函數里面的變量和對象還有方法等；通俗的講就是突破私有函數的作用域，讓函數外面能夠使用函數里面的變量及方法。
1、第一種創建方式
function test(){var x=10;return function(){return x;}}var a=test();alert(a); //彈出test函數私有變量x，結果：102、第二種創建方式
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 闭包的详细分享（三种创建方式）（附小实例）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wios设置证书登陆
- 下一篇： gradle idea java ssm