javascript執(zhí)行機(jī)制<一>

codeKK 發(fā)布于2019-08-20 15:25 / 431人閱讀

摘要：提示，很顯然，出了循環(huán)的的大括號(hào)對(duì)應(yīng)的作用域之后，就會(huì)被自動(dòng)銷(xiāo)毀。那么呢，也是這樣么我們來(lái)看個(gè)例子這段代碼執(zhí)行結(jié)果是估計(jì)有人也會(huì)比較奇怪。這邊我解釋下執(zhí)行這段代碼的過(guò)程。提出了用關(guān)鍵字來(lái)代替關(guān)鍵字，具體的話可以參考阮一峰的而教程。

從一道題說(shuō)起

最近又有人問(wèn)我下面這道題目，題目是這樣的，首先是一個(gè)DOM結(jié)構(gòu)如下:

非常easy的dom結(jié)構(gòu)，在來(lái)一小段js,如下：

var nodes = document.getElementsByTagName("div");
for(var i = 0,len = nodes.length; i < len; i++){
    nodes[i].onclick = function(){
        console.log(i);
    }
}

好了，問(wèn)題來(lái)了，依次點(diǎn)擊div，結(jié)果是多少？答案并不是1，2，3，4，5，而是點(diǎn)擊任何一個(gè)div都會(huì)輸出5.

分析

先來(lái)說(shuō)下為什么最后執(zhí)行的結(jié)果都是5.首先我們要明白，js中沒(méi)有塊級(jí)作用域，講人話，就是js中不存在{}這種代碼塊的東西。各位估計(jì)會(huì)反駁我說(shuō)，上面例子中不是明明白白的寫(xiě)的for(){}這種代碼，怎么這邊就開(kāi)始說(shuō)js不存在{}這種東西呢？我先舉個(gè)C++的例子吧

int arr[] = {1,2,3,4,5};
vector v = vector(arr,arr+sizeof(arr)/sizeof(int));
for(int i = 0; i < v.size(); i++){
    std::cout << i << std::endl;
}

這么寫(xiě)是沒(méi)有問(wèn)題的，下面我再加點(diǎn)東西

int arr[] = {1,2,3,4,5};
vector v = vector(arr,arr+sizeof(arr)/sizeof(int));
for(int i = 0; i < v.size(); i++){
    std::cout << i << std::endl;
}
std::cout << i;

這么寫(xiě)，編譯器直接就報(bào)錯(cuò)了。提示 error: use of undeclared identifier "i"，很顯然，出了for循環(huán)的{}的大括號(hào)對(duì)應(yīng)的作用域之后，i就會(huì)被自動(dòng)銷(xiāo)毀。那么JS呢，也是這樣么？我們來(lái)看個(gè)例子

for(var i = 0;i< 5;i++){
    console.log(i);
}
console.log(i);

這段代碼執(zhí)行結(jié)果是0,1,2,3,4,5.估計(jì)有人也會(huì)比較奇怪。這邊我解釋下JS執(zhí)行這段代碼的過(guò)程。
首先是變量提升，js把var i = 0;分解成兩句話，var i;i =0;并且把var i;提到最近一個(gè)function的頂部，這個(gè)時(shí)候，這段代碼就變成了這樣

var i;
for(i=0;i<5;i++){
    console.log(i);
}
console.log(i);

這樣各位對(duì)于上面執(zhí)行出來(lái)的0,1,2,3,4,5估計(jì)就沒(méi)啥疑問(wèn)了。
看完這個(gè)例子之后，我也希望各位注意下我前面說(shuō)的js沒(méi)有塊級(jí)作用域，以及js會(huì)做變量提升，把變量的申明提升到最近的一個(gè)function的頂部
由于js會(huì)做變量提升，自動(dòng)將變量的申明提升到最近的一個(gè)function的頂部，所以{}根據(jù)不會(huì)構(gòu)成所謂的塊級(jí)作用域，對(duì)js里面的變量而言，只有function才會(huì)是其作用域。

好了，講完js的變量提升，我們?cè)倩仡^來(lái)看最開(kāi)始的這個(gè)問(wèn)題。首先是變量提升，提升之后我們得到

var nodes = document.getElementsByTagName("div");
var i;
for(i = 0,len = nodes.length; i < len; i++){
    nodes[i].onclick = function(){
        console.log(i);
    }
}

執(zhí)行過(guò)程中，我們對(duì)每個(gè)node[i]節(jié)點(diǎn)都綁定了一個(gè)onclick事件，但是for循環(huán)執(zhí)行的過(guò)程中，我們并沒(méi)有出發(fā)這個(gè)click事件，for循環(huán)執(zhí)行結(jié)束之后，i變?yōu)?。當(dāng)用戶(hù)點(diǎn)擊div的時(shí)候，這個(gè)時(shí)候執(zhí)行對(duì)應(yīng)的onclick函數(shù)，也就是console.log(i),這個(gè)時(shí)候，會(huì)自動(dòng)找到被js變量提升過(guò)的i,所以大家都會(huì)輸出5.

解決

總結(jié)下，上面的問(wèn)題之所以會(huì)產(chǎn)生，就是因?yàn)樗械膐nclick事件都去引用被js變量提升的i，那么如果我們想要解決這個(gè)問(wèn)題，應(yīng)該怎么辦呢。一個(gè)就是我們可以通過(guò)JS的IIFE（immediately-invoked-function-expression）來(lái)構(gòu)造一個(gè)作用域，讓onclick函數(shù)引用我們構(gòu)造出來(lái)作用域里面的i。ok，我們來(lái)解決下

var nodes = document.getElementsByTagName("div");
for(var i = 0,len = nodes.length; i < len; i++){
    (function(i){
        nodes[i].onclick = function(){
            console.log(i);
        }
    })(i)
    
}

這種做法把整個(gè)綁定事件的過(guò)程都給包起來(lái)了，由于IIFE會(huì)馬上執(zhí)行，for循環(huán)的i相當(dāng)于一個(gè)輸入?yún)?shù)，在綁定完事件只有，也形成了一個(gè)作用域，并且這個(gè)作用域中存在一個(gè)i的值。

同樣的道理，我再給一種解法，如下：

var nodes = document.getElementsByTagName("div");
for(var i = 0,len = nodes.length; i < len; i++){
    nodes[i].onclick = (function(i){
        return function(){
            console.log(i);
        }
    })(i)
}

除此之外，我們可能會(huì)想到，如果js能夠有這種塊級(jí)作用于就好了，我們綁定的事件一定是在{}作用域下面，一定可以引用到for循環(huán)中的每個(gè)i，而不是應(yīng)用哪個(gè)被變量提升的i。ES6提出了用let關(guān)鍵字來(lái)代替var關(guān)鍵字，具體的話可以參考阮一峰的而ES6教程。上個(gè)代碼，這邊代碼用了一個(gè)inbrowser的es6轉(zhuǎn)碼器，可以測(cè)試用，如果想要生產(chǎn)環(huán)境中使用需要提前將es6代碼編譯成es5的代碼。

引用了一個(gè)inbrower級(jí)別的es6轉(zhuǎn)碼器。具體可以參考babel-standalone項(xiàng)目.改進(jìn)后的代碼與原來(lái)的代碼的區(qū)別在于，將var i = 0換成了let i = 0.
下面我在看下，通過(guò)轉(zhuǎn)碼之后，到底生成了什么樣的js代碼，通過(guò)es6轉(zhuǎn)碼器，我們最終生成了如下的代碼

var nodes = document.getElementsByTagName("div");

var _loop = function _loop(i, len) {
    nodes[i].onclick = function () {
        console.log(i);
    };
};

for (var i = 0, len = nodes.length; i < len; i++) {
    _loop(i, len);
}

原來(lái)ES6幫我們構(gòu)造了一個(gè)function的作用域報(bào)過(guò)了node[i].onclick的事件綁定過(guò)程，跟我們上面的解決方法其實(shí)是一樣的！