js 閉包概念，用法

時間 2019-11-20

標籤閉包概念用法欄目 JavaScript 简体版

原文原文鏈接

1.閉包概念【IE下可能會引發內存泄漏】

(1)咱們常說的閉包就是函數嵌套函數，內部函數能夠引用外部函數的參數和變量【代碼以下】json

(2)會涉及到js中的垃圾回收機制(指：當函數執行完時，函數的變量將會收回，閉包就不同了) 【代碼以下】閉包

(3)閉包中當外部函數加載完時,外部函數的變量內部函數還能夠繼續使用，不會回收【代碼以下】模塊化

(4)閉包的好處函數

①將一個變量長期駐紮在內存中【代碼以下】spa

②避免全局變量對函數的污染【代碼以下】code

③私有成員的存在【代碼以下】對象

(5)閉包的用法【代碼以下】blog

①模塊化代碼【代碼以下】索引

②在循環中直接找到對應元素的索引【代碼以下】事件

2.代碼以下

(1) or example (1)

<script>
//閉包中的函數
            function one(name){ //外部函數
                var name="ruanjiang";
                function two(){ //內部函數
                    alert(name);
                }
                return two;
            }
            var c = one(); //one函數以及執行完畢，c表明two這個函數
            c();
            
        </script>
輸出: ruanjiang

(2) or example

//js中正常函數
            function one(){
                var name="ruanjiang";
                alert(name)
            }
            one();//輸出ruanjiang
            function two(){
                alert(name);
            }
            two();//輸出爲空

（3） for example (1)(2)(3)(4)①②

//js原全局變量的污染
            var a=1;//爲全局變量
            function one(){
                a++;
                alert(a);
            }
            one(); //、2
            one(); //3
            alert(a);//函數外部可引用a

 //垃圾回收機制
            function one1(){
                var a =1;
                    a++;
                    alert(a);
            }
            one1();   //、2
            one1();   //、2
  //閉包
            function one2(){
                var a= 1;
                return function(){
                    a++;
                    alert(a);
                }
            }
            var b =one2();
            b();  //2
            b(); ///3
            alert(a);//a爲空 表示a爲局部變量

(4) for example (4)③ (5)①

//函數聲明函數diaoyong
            function one(){
                alert("我是聲明函數");
            }
            one();
            //函數表達式
            (function one1(){
                alert("我是函數表達式");
            })();
 //模塊化代碼
            var one2=(function (){
                var a=1;
                return function(){
                    a+=2;
                    alert(a);
                }
            })();
            one2();  //3
            one2();  //5
  //私有成員 方法函數
            var one3=(function(){
                var a =1;
                function bbb(){//私有成員
                    a++;
                    alert(a);
                }
                function aaa(){ //私有成員
                    a+=5;
                    alert(a);
                }
                return{//返回json數據
                    b :bbb,
                    c :aaa
                }
            })();
            one3.b(); //2
            one3.c(); //7
            
            //alert(a); not defind
            //alert(bbb); not defind
            //alert(ccc); not defind

（5）for example (5)②

 方法一
<script>
            window.onload = function(){
                var oLi = document.getElementsByTagName('li');
                
                for(var i=0;i<oLi.length;i++){
                    (function(i){ //循環變量的i，已經存入內存，讀取
                        oLi[i].onclick = function(){
                        alert("這是一樓"+i);
                        }
                    })(i);
                    
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>這是你的一樓爸爸</li>
            <li>這是你的二樓爸爸</li>
            <li>這是你的三樓爸爸</li>
        </ul>
    </body>
輸出結果：點擊點一個li輸出這是一樓0，點擊第二個li輸出這是一樓1，以此類推

方法二

window.onload = function(){
                var oLi = document.getElementsByTagName('li');
                
                for(var i=0;i<oLi.length;i++){
                    oLi[i].onclick = (function(i){ //循環遍歷的i已經存入內存中
                        return function(){
                            alert(i);
                        }
                    })(i);
                    
                }
            }

3.ie下閉包引發的內存泄漏

//閉包在ie下可能會引發內存泄漏
            //js的對象屬性(oDiv.onclick)引誘內部的時候(oDiv.id),內部又應有外部對象，就會引發
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                oDiv.onclick = function(){
                    alert(oDiv.id);
                }
            }
            //解決方法一，當window.onload出現時將事件取消
            window.onunload = function (){
                oDiv.onclick = null;
            }
            //方法二
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                
                var id = oDiv.id;
                
                oDiv.onclick = function(){
                    alert(id);
                };
                
                oDiv = null;
    
            };

①②③④⑤⑥⑦⑧

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。