~~~ /* * [閉包] * =>函數執形成一個私有的作用域，保護里面的私有變量不受外界的干擾， * 這種保護機制稱之為“閉包” * * =>市面上的開發者認為的閉包是：形成一個不銷毀的私有作用域（私有棧內存）才是閉包 */ /* //=>閉包：柯理化函數 function fn() { return function () { } } var f = fn(); */ /* //=>閉包：惰性函數 var utils = (function () { return { } })(); */ //=>閉包項目實戰應用 //==>真實項目中為了保證JS的性能（堆棧內存的性能優化）， 應該盡可能的減少閉包的使用（不銷毀的堆棧內存是耗性能的） //1.閉包具有“保護”作用：保護私有變量不受外界的干擾 //> 在真實項目中，尤其是團隊協作開發的時候，應當盡可能的減少全局變量的使用， 以防止相互之前的沖突（“全局變量污染”）， 那么此時我們完全可以把自己這一部分內容封裝到一個閉包中，讓全局變量轉換為私有變量 /* (function () { var n = 12; function fn() { } //... })(); */ //> 不僅如此，我們封裝類庫插件的時候，也會把自己的程序都存放到閉包中保護起來，防止和用戶的程序沖突，但是我們又需要暴露一些方法給客戶使用，這樣我們如何處理呢？ //1.JQ這種方式：把需要暴露的方法拋到全局 /* (function () { function jQuery() { //... } //... window.jQuery = window.$ = jQuery;//=>把需要供外面使用的方法，通過給WIN設置屬性的方式暴露出去 })(); // jQuery(); // $(); */ //2.Zepto這種方式：基于RETURN把需要共外面使用的方法暴露出去 /* var Zepto=(function () { //... return { xxx:function () { } }; })(); Zepto.xxx(); */ //2.閉包具有“保存”作用：形成不銷毀的棧內存，把一些值保存下來，方便后面的調取使用 ~~~ ~~~ var oTab = document.getElementById('tab'), tabList = oTab.getElementsByTagName('li'), divList = oTab.getElementsByTagName('div'); function changeTab(curIndex) { for (var i = 0; i < tabList.length; i++) { tabList[i].className = divList[i].className = ''; } //=>curIndex:記錄的是當前點擊LI的索引 tabList[curIndex].className = 'active'; divList[curIndex].className = 'active'; } /* for (var i = 0; i < tabList.length; i++) { tabList[i].onclick = function () { changeTab(i); //=>執行方法，形成一個私有的棧內存，遇到變量I，I不是私有變量，向上一級作用域查找（上級作用域WINDOW） //=>所有的事件綁定都是異步編程（同步編程：一件事一件事的做，當前這件事沒完成， 下一個任務不能處理 / 異步編程：當前這件事件沒有徹底完成，不在等待，繼續執行下面的任務）， 綁定事件后，不需要等待執行，繼續執行下一個循環任務，所以當我們點擊執行方法的時候， 循環早已結束（讓全局的I等于循環最后的結果3） } } */ //=>解決方案：自定義屬性 /*for (var i = 0; i < tabList.length; i++) { tabList[i].myIndex = i; tabList[i].onclick = function () { changeTab(this.myIndex); //=>THIS:給當前元素的某個事件綁定方法,當事件觸發,方法執行的時候,方法中的THIS是當前操作的元素對象 } }*/ //=>解決方案：閉包，閉包具有保存的作用 /*for (var i = 0; i < tabList.length; i++) { tabList[i].onclick = (function (n) { //=>讓自執行函數執行,把執行的返回值(RETURN)賦值給ON-CLICK （此處ON-CLICK綁定的是返回的小函數，點擊的時候執行的是rerurn小函數）， 自執行函數在給事件賦值的時候就已經執行了 var i = n; return function () { changeTab(i);//=>上級作用域：自執行函數形成的作用域 } })(i); }*/ /* * i=0 第一次循環 * tabList[0].onclick = (function(n){ * //=>自執行函數執行形成一個私有作用域（不釋放：返回的函數對應的堆地址被外面的事件占用了） * //1.形參賦值 n=0 * //2.變量提升 var i; * var i=n; //=>i=0 * return function(){//=>點擊的時候執行的是小函數 * changeTab(i); * } * })(i);//=>把本次全局I(0)當做實參傳遞給形參n * * i=1 第二次循環 * tabList[1].onclick = (function(n){ * var i=n; //=>i=1 * return function(){ * changeTab(i); * } * })(1); * * ... * * 總結：循環三次，形成三個不銷毀的私有作用域（自執行函數執行）， * 而每一個不銷毀的棧內存中都存儲了一個私有變量I， * 而這個值分別是每一次執行傳遞進來的全局I的值 * （也就是：第一個不銷毀的作用域存儲的是0，第二個是1，第三個是2）； * 當點擊的時候，執行返回的小函數，遇到變量I， * 向它自己的上級作用域查找，找到的I值分別是：0/1/2，達到了我們想要的效果； */ ~~~ ~~~ /*for (var i = 0; i < tabList.length; i++) { /!*原理都是形成三個不銷毀的私有作用域,分別存儲需要的索引值*!/ (function (n) { tabList[n].onclick = function () { changeTab(n); } })(i); }*/ //=>解決方案：基于ES6解決 for (let i = 0; i < tabList.length; i++) { tabList[i].onclick = function () { changeTab(i); } } //=>基于ES6中的let來創建變量,是存在塊級作用域的(類似于私有作用域) //作用域：（棧內存） //1.全局作用域 //2.私有作用域（函數執行） //3.塊級作用域（一般用大括號包起來的都是塊級作用域，前提是ES6語法規范） /* { let a = 12; console.log(a);//=>12 } console.log(a);//=>Uncaught ReferenceError: a is not defined */ /*let a = 100; { let a = 100; { { console.log(a);//=>100 } } } */ /*if (1 === 1) { //=>判斷體也是塊級作用域 let a = 12; } console.log(a);//=>Uncaught ReferenceError: a is not defined*/ /*for (let i = 0; i < 5; i++) { //=>循環體也是塊級作用域，初始值設置的變量是當前本次塊級作用域中的變量 (形成了五個單獨的塊級作用域，每個塊級作用域中都有一個私有變量I，變量值就是每一次循環I的值) } console.log(i);//=>Uncaught ReferenceError: i is not defined*/ // var obj={};//=>對象的大括號不是塊級作用域 ~~~  在傳統語法中，能形成作用域的，只有全局和函數