1. 程式人生 > >JavaScript函式及閉包

JavaScript函式及閉包

前面一片文章講到過一點函式,瞭解到每宣告一個函式就會產生一個作用域。而外面的作用域訪問不了裡面的作用域(把裡面的變數和函式隱藏起來),而裡面的可以訪問到外面的。對於隱藏變數和函式是一個非常有用的技術。

基於作用域隱藏的方法叫做最小授權或最小暴露原則。

這個原則是指在軟體設計中,應該最小限度的暴露必要內容,而將其內容都隱藏起來,比如某個模組或物件得API設計。隱藏變數和函式可以解決同名識別符號的之間的衝突,衝突會導致變數的意外覆蓋。

例如:

 

       var a = 2;
        function foo(){
            var a = 3;
            console.log(a);
        }
        foo();
        console.log(a);

 

 

 

雖然這種技術可以解決一些問題,但是他並不理想,會導致一些額外的問題,首先必須宣告一個具名函式foo(),意味著foo這個名稱本身“汙染”了所在的作用域,其次必須顯式的通過函式名foo()呼叫這個函式才能執行其中的程式碼。

如果函式不需要函式名,並且能夠自動執行,這會更加理想。幸好js提供了同時解決這兩個問題的方案 -- (IIFE) Immediately Invoked Function Expression  --  立即執行函式

 

var a = 2;
(function foo(){
    var a = 3;
    console.log(a);
})()
console.log(a);

 

 

 

首先立即執行函式不會當做函式宣告處理而是當做函式表示式處理。 

區分函式宣告還是函式表示式:看function在宣告中是不是第一個詞,如果是第一個詞就是函式宣告否則就是函式表示式。而立即執行函式" (function ",不是"     function ",所以是函式表示式。

函式宣告和函式表示式之間最重要的區別是他們的名稱識別符號將會繫結在何處

函式宣告的函名稱數會繫結在當前作用域內。假如在全域性作用域建立一個函式宣告,就可以在全域性作用域訪問這個函式名稱並執行。而函式表示式的函式名稱會繫結在自身的函式中,而不是當前說在作用域中。例如你全域性建立一個函式表示式,如果你直接執行這個你建立的函式表示式的函式名就會報錯,因為當前作用域下沒有這個識別符號,而你在函式表示式裡面的作用域裡訪問這個函式名就會返回這個函式的引用。

 

作用域閉包,嗯,閉包這兒兩個字就有點讓人難以理解,(可以想象成一個包是關上的,裡面隱藏了一些神祕的東西)而對於閉包的定義是這樣說的:當函式可以記住並訪問所在的作用域時,就產生了閉包,即使函式是在當前作用域之外執行。

for instance(拽個英文,哈哈)。

 

function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    bar();
}
foo();

 

 

 

上面的 程式碼bar()可以訪問外部作用域中的變數。根據上面的定義這是閉包嗎?從技術來講也許是,但我們理解的是作用域在當前作用域查詢變數如果沒找到會繼續向上面查詢,找到返回,找不到繼續找,直到全域性作用域。-- 而這些正是閉包的一部分。函式bar()具有一個涵蓋foo()作用域的閉包。

 

function foo(){
    var a  = 2;
    function bar (){
        console.log(a);
    }
    return bar;
}
var baz = foo();
baz();

 

 

 

在上面的程式碼更好的展示了閉包。

bar()函式在定義時作用域以外的地方執行(此時在全域性作用域執行)。在foo()函式執行後,通常會期待foo()整個內部作用域都被銷燬,因為我們知道引擎有垃圾回收器用來釋放不在使用的記憶體空間,由於foo()已經執行完,看上去內容不會再被使用,所以很自然的會考慮對齊進行回收,回收後意味著裡面的函式和變數訪問不到了。foo()執行完,baz變數存著bar函式的引用。當執行baz也就是bar函式時。console.log(a)。不理解閉包的人可能認為會報錯,事實上,列印的是2;???what?

foo()函式作用域不是執行完銷燬了嗎?怎麼還能訪問到a變數?-- 這就是閉包。

當foo()執行後,bar函式被返回全域性作用域下,但是bar函式還保留著當時的詞法作用域(當時寫程式碼是的順序就已經定義了作用域,這個作用域叫詞法作用域--外面函式套著裡面的函式的那種)甚至直到全域性作用域。所以bar還留有foo()函式的引用。使得foo()函式沒有被回收。

閉包可以說不出不在,只是你沒有發現認出他。在定時器,事件監聽器,ajax請求,跨視窗通訊或者任何其他的非同步(或者同步)任務中,只要使用了回撥函式,實際上就是使用閉包。

for instance

 

function wait(message) {
    setTimeout(function timer() {
        console.log(message);
    }, 1000);
}
wait("hello");

 

 

 

在上面的程式碼中將一個內部函式(名為timer)傳遞給setTimerout(...).timer具有涵蓋wait(...)的作用域的閉包。因此還保有對變數message的引用。wait()執行1000毫秒後,它的內部作用域不會消失,timer函式依然保有wait()作用域的閉包。

而閉包和立即執行函式息息相關。

迴圈和閉包

 

for(var i = 1; i <= 5; i++){
    setTimeout(function timer(){
        console.log(i);
    },i*1000);
}

 

 

 

上面程式碼我們以為輸出的會是1-5,可事實上輸出的是5個6,這是為啥啊 -- 閉包啊。

延遲函式的回撥會在迴圈結束時執行。事實上,當定時器執行時即使每個迭代的是setTimerout(...,0),所有的回撥函式依然是迴圈結束後才會執行。我猜是跟js執行機制有關係吧。至於為什麼都是6. 因為即使5個函式是在各個迭代中分別定義的,但是他們又被封閉在一個共享的全域性作用域中因此實際上只有一個i.而怎麼解決呢,立即執行函式來了!!!

 

for (var i = 1; i <= 5; i++) {
    (function (i) {
        setTimeout(function timer() {
            console.log(i);
        }, i * 1000);
    })(i)

}

 

 

打印出來1,2,3,4,5了歐,這回是你想要的數了。解釋一下,5次迴圈建立了5個立即執行函式,這5個函式的作用域都不相同,立即函式接收的引數是當前迴圈的i.所以當timer執行時訪問的就是自己立即執行函式對應的作用域。也就是說5個timer函式分別對應5個作用域,每個作用域儲存的變數i都不同,解決啦!!!

你懂閉包了嗎?

 

js執行機制

 

JavaScript語言的一大特點就是單執行緒,也就是說,同一個時間只能做一件事。那麼,為什麼JavaScript不能有多個執行緒呢?這樣能提高效率啊。JavaScript的單執行緒,與它的用途有關。作為瀏覽器指令碼語言,JavaScript的主要用途是與使用者互動,以及操作DOM。這決定了它只能是單執行緒,否則會帶來很複雜的同步問題。比如,假定JavaScript同時有兩個執行緒,一個執行緒在某個DOM節點上新增內容,另一個執行緒刪除了這個節點,這時瀏覽器應該以哪個執行緒為準所以,為了避免複雜性,從一誕生,JavaScript就是單執行緒,這已經成了這門語言的核心特徵,將來也不會改變。

單執行緒就意味著,所有任務需要排隊,前一個任務結束,才會執行後一個任務。如果前一個任務耗時很長,後一個任務就不得不一直等著。JavaScript語言的設計者意識到這個問題,將所有任務分成兩種,一種是同步任務(synchronous),另一種是非同步任務(asynchronous)。同步任務指的是,在主執行緒上排隊執行的任務,只有前一個任務執行完畢,才能執行後一個任務;非同步任務指的是,不進入主執行緒、而進入"任務佇列"(task queue)的任務,只有"任務佇列"通知主執行緒,某個非同步任務可以執行了,該任務才會進入主執行緒執行。

主執行緒從"任務佇列"中讀取事件,這個過程是迴圈不斷的,所以整個的這種執行機制又稱為Event Loop(事件迴圈)。只要主執行緒空了,就會去讀取"任務佇列",這就是JavaScript的執行機制。

哪些語句會放入非同步任務佇列及放入時機一般來說,有以下四種會放入非同步任務佇列:setTimeout 和 setlnterval  ,DOM事件,ES6中的Promise,Ajax非同步請求

&n