2019獨角獸企業重金招聘Python工程師標準>>>

一、理解閉包

1、閉包的例子

//一般函數 function outer(){var localVal = 30; //局部變量 函數調用完成后，局部變量釋放return localVal; } outer(); //30/***********閉包**************/function outer(){var localVal = 30;return function(){ //返回一個匿名函數return localVal;} } // 函數調用完成后，匿名函數不能被釋放， var func = outer();//在函數 outer調用結束之后，func()函數調用時，匿名函數仍能訪問到外函數 outer的局部變量 func(); //30

2、閉包的作用

1、在瀏覽器里處理事件的點擊，要訪問外層局部變量

!function(){var localData = "localData";document.addEventListener('click',function(){ //綁定 事件console.log(localData)}) }(); //調用/* 有一個異步請求，用jquery的 ajax方法在 success的回調函數里面，用到外層變量，因為閉包的原因， 在外層匿名函數調用完成后，回調函數仍可以訪問到外層引用的 localData,或者是url*/!function(){var localData = "localData here";var url = "http://www.baidu.com/";$ajax({url :url,success:function(){//do sthconsole.log(localData);}}) }(); //調用

3、常見錯誤之循環閉包

1)錯誤操作

document.body.innerHTML = "<div id='div1'>aaa</div>" + "<div id = 'div2'>bbb</div>" + "<div id = 'div3'>bbb</div>"for(var i = 1; i<4; i++){document.getElementById('div' + i);addEventListener('click', function(){ //增加點擊事件alert(i); //每次點擊彈出的都是4}) }//想要得到點擊第幾個div就彈出第幾號數字，但其實在初始化完成后 i已經是4了。之后每次點擊標簽輸出的都是4

2）正確操作

document.body.innerHTML = "<div id='div1'>aaa</div>" + "<div id = 'div2'>bbb</div>" + "<div id = 'div3'>bbb</div>" ;for(var i = 1; i< 4; i++){!function(i){document.getElementById('div' + i);addEventListener('click',function(){alert(i); // 1,2,3})}(i); //立即執行的匿名函數，將遍歷的 i傳入 匿名函數 }//這樣每次點擊時，就會獲取不同閉包環境下，在不同循環賦值得到的i

4、閉包 - 封裝

//定義函數局部變量，外部是無法訪問的 (function(){var _userId = 23492;var _typeId = 'item';var export = {};function converter(userId){return +userId;}export.getUserId = function(){return coverter(_userId);}export.getTypeId = function(){return _typeId;}window.export = export; //把想輸出的對象輸出出去} ());export.getUserId(); //23492 閉包： 通過對象函數獲取局部變量值 export.getTypeId(); //item export._userId ; //undefined 無法訪問

5、閉包的概念

在計算機科學中，閉包（也稱為詞法閉包或函數閉包）是指一個函數，或函數的引用，與一個引用環境綁定在一起，這個引用環境是一個存儲該函數每個非局部變量（也叫自由變量）的表。

閉包，不同于一般函數，他允許一個函數在立即詞法作用域外調用時，仍可訪問非本地變量。

二、作用域

1、作用域分類

全局

函數

eval

沒有塊級作用域

var a = 10 ; // 全局作用域(function(){ //函數作用域var b= 20; })(); //調用console.log(a); //10 console.log(b); //error , b is not defined//javaScript 沒有塊級作用域，定義在 for循環里面的變量，在外面也可以訪問 for(var item in {a:1,b:2}){console.log(item); // a b }//特殊作用域 eval("var a=1"); //eval

2、作用域鏈

function outer2(){var local2 =1;function outer1(){var local1 =1; //局部變量//visit local1 or local2(閉包、自由變量) or global3}outer1(); }var global3 = 1; outer2();function outer(){var i=1;//使用 new Functions構造器 構造函數，訪問不到 ivar func = new Function("console.log(type of i)");func(); //undefined }

3、利用函數作用域封裝

//防止出現大量全局變量 (function(){var a,b; //把函數內部變量變為局部變量，而不是全局變量 })() ;//使用嘆號，把函數聲明變為函數表達式 //省略嘆號，會理解為函數聲明，會前置處理,沒有名字會報錯 !function(){ var a,b; }();

三、ES3執行上下文（執行上下文機制）

函數聲明，變量聲明會被前置。

每一次函數調用時都會有一個對應的執行環境：執行上下文。同樣一個每次調用都會產生不同的上下文

一些抽象概念：

執行上下文，變量對象，在ECMA-262第三版標準規范中定義

1、執行上下文

類似棧結構，一層一層嵌套。

當調用funcEC1時控制權，從全局EC0到EC1的執行上下文,Ec3執行結束后退回到EC2,EC2結束后退回到EC1....EC0

2、變量對象

JS解釋器如何找到我們定義的函數和變量

變量對象（Variable Object,縮寫為 VO） 是一個抽象概念中的“對象”，他用于存儲執行上下文中的

變量

函數聲明

函數參數

函數聲明 test()

?

轉載于:https://my.oschina.net/u/2991733/blog/904351

總結

以上是生活随笔為你收集整理的2017/5 JavaScript基础9 --- 闭包、作用域的全部內容，希望文章能夠幫你解決所遇到的問題。

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