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

一、理解閉包

1、閉包的例子

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

2、閉包的作用

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

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

3、常見錯誤之循環(huán)閉包

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就彈出第幾號數(shù)字，但其實在初始化完成后 i已經(jīng)是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); //立即執(zhí)行的匿名函數(shù)，將遍歷的 i傳入 匿名函數(shù) }//這樣每次點擊時，就會獲取不同閉包環(huán)境下，在不同循環(huán)賦值得到的i

4、閉包 - 封裝

//定義函數(shù)局部變量，外部是無法訪問的 (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 閉包： 通過對象函數(shù)獲取局部變量值 export.getTypeId(); //item export._userId ; //undefined 無法訪問

5、閉包的概念

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

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

二、作用域

1、作用域分類

全局

函數(shù)

eval

沒有塊級作用域

var a = 10 ; // 全局作用域(function(){ //函數(shù)作用域var b= 20; })(); //調(diào)用console.log(a); //10 console.log(b); //error , b is not defined//javaScript 沒有塊級作用域，定義在 for循環(huán)里面的變量，在外面也可以訪問 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構(gòu)造器 構(gòu)造函數(shù)，訪問不到 ivar func = new Function("console.log(type of i)");func(); //undefined }

3、利用函數(shù)作用域封裝

//防止出現(xiàn)大量全局變量 (function(){var a,b; //把函數(shù)內(nèi)部變量變?yōu)榫植孔兞?#xff0c;而不是全局變量 })() ;//使用嘆號，把函數(shù)聲明變?yōu)楹瘮?shù)表達式 //省略嘆號，會理解為函數(shù)聲明，會前置處理,沒有名字會報錯 !function(){ var a,b; }();

三、ES3執(zhí)行上下文（執(zhí)行上下文機制）

函數(shù)聲明，變量聲明會被前置。

每一次函數(shù)調(diào)用時都會有一個對應(yīng)的執(zhí)行環(huán)境：執(zhí)行上下文。同樣一個每次調(diào)用都會產(chǎn)生不同的上下文

一些抽象概念：

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

1、執(zhí)行上下文

類似棧結(jié)構(gòu)，一層一層嵌套。

當調(diào)用funcEC1時控制權(quán)，從全局EC0到EC1的執(zhí)行上下文,Ec3執(zhí)行結(jié)束后退回到EC2,EC2結(jié)束后退回到EC1....EC0

2、變量對象

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

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

變量

函數(shù)聲明

函數(shù)參數(shù)

函數(shù)聲明 test()

?

轉(zhuǎn)載于:https://my.oschina.net/u/2991733/blog/904351

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。