《你不知道的JavaScript》整理（一）——做用域、提高與閉包

最近在讀一本進階的JavaScript的書《你不知道的JavaScript（上卷）》，裏面分析了不少基礎性的概念。

能夠更全面深刻的理解JavaScript深層面的知識點。

 

1、函數做用域

1）函數做用域

就是做用域在一個「Function」裏，屬於這個函數的所有變量均可以在整個函數的範圍內使用及複用。

function foo(a) {
  var b = 2;
  function bar() {
    // ...
  }
  var c = 3;
}

bar(); // 失敗
console.log( a, b, c ); // 三個全都失敗

上面的「foo」函數內的幾個標識符，放到函數外面訪問就都會報錯，查看源碼。

 

2）當即執行函數表達式

在任意代碼片斷外部添加包裝函數，能夠將內部的變量和函數定義「隱藏」起來，外部做用域沒法訪問包裝函數內部的任何內容。

例如上面的bar、a等幾個標識符。這樣可以保護變量不被污染。

在寫插件的時候常常會用到當即執行函數表達式，爲的就是保護裏面的變量。

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

「foo」中第一個(  )將函數變成表達式，第二個(  )執行了這個函數。

有一個專用術語：IIFE，表明當即執行函數表達式（Immediately Invoked Function Expression）；

1. 進階用法是把它們看成函數調用並傳遞參數進去

(function IIFE( global ) {  
  var a = 3;
  console.log( a ); // 3
  console.log( global.a ); // 2
})( window );

2. 一種變化的用途是倒置代碼的運行順序，在CMD或AMD項目中被普遍使用。

(function IIFE(factory) {
    factory( window );
})(function def( global ) {
  var a = 3;
  console.log( a ); // 3
  console.log( global.a ); // 2
});

 

2、塊做用域

JavaScript不支持塊做用域。

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

上面的代碼中的「i」至關於下面的

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

 

但也有例外，「try/catch」，catch就是一個塊做用域。

try{
  undefined(); // 執行一個非法操做來強制製造一個異常 
}  
catch(err) {
  console.log( err ); // 可以正常執行！
}
console.log( err ); // ReferenceError: err not found

 

ES6改變了現狀，引入了新的let關鍵字，let關鍵字能夠將變量綁定到所在的任意做用域中（一般是{ .. }內部）。換句話說，let爲其聲明的變量隱式地了所在的塊做用域。

 

3、提高

函數做用域和塊做用域的行爲是同樣的，能夠總結爲：任何聲明在某個做用域內的變量，都將附屬於這個做用域。

1）編譯與執行

變量和函數的全部聲明都會在任何代碼被執行前首先被處理，能夠看下面的代碼事例。

a = 2;
var a;
console.log(a);//2

這段代碼等價於：

var a;//定義聲明是在編譯階段進行
a = 2;//賦值聲明會被留在原地等待執行階段
console.log(a);

 

2）函數優先

函數會首先被提高，而後纔是變量。

foo(); // 1
var foo;
function foo() {
  console.log( 1 );
}
foo = function() {
  console.log( 2 );
};

var foo函數表達式儘管出如今function foo()的聲明以前，但它是重複的聲明（所以被忽略了），由於函數聲明會被提高到普通變量以前。

而上面的代碼至關於：

function foo() {
  console.log( 1 );
} 
foo(); // 1
foo = function() {
  console.log( 2 );
};

 

4、閉包

1）定義

當函數能夠記住並訪問所在的做用域時，就產生了閉包，即便函數是在當前做用域以外執行。

function foo() {
  var a = 2;
  function bar() { 
    console.log( a );
  }
  return bar;
}
 
var baz = foo();
baz(); // 2 —— 這就是閉包的效果。

1. 將函數「bar」賦值給「baz」，執行「baz」，當前做用域並不在「bar」的做用域，可是能夠執行。

2. 閉包還會阻止垃圾回收，當「foo」執行完後，內部做用域仍然存在。這樣才能讓「baz」執行。

 

2）將函數做爲參數傳遞

function foo() {
  var a = 2;
  function baz() {
    console.log( a ); // 2
  }
  bar( baz );
}
 
function bar(fn) {
  fn(); //這就是閉包！
}

把內部函數baz傳遞給bar，當調用這個內部函數時（fn），它涵蓋的foo()內部做用域的閉包就能夠觀察到了，由於它可以訪問a。

若是將函數看成第一級的值類型並處處傳遞，你就會看到閉包在這些函數中的應用。

在定時器、事件監聽器、Ajax請求、跨窗口通訊、Web Workers或者任何其餘的異步（或者同步）任務中，只要使用了回調函數，實際上就是在使用閉包！

 

3）循環和閉包

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

每次打印出來都將會是6，延遲函數的回調會在循環結束時才執行，查看源碼。

根據做用域的工做原理，實際狀況是儘管循環中的五個函數是在各個迭代中分別定義的，可是它們都被封閉在一個共享的全局做用域中，所以實際上只有一個i。

如今用閉包來實現每次打印不一樣的i。

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

IIFE會經過聲明並當即執行一個函數來建立做用域。setTimeout中的回調能夠記住當前的做用域，每一個做用域中的參數「j」都是不一樣的。