作用域
JS中有兩種作用域：全局作用域|局部作用域
栗子1
console.log(name); //undefined
var name = '波妞';
var like = '宗介'
console.log(name); //波妞
function fun(){
console.log(name); //波妞
console.log(eat) //ReferenceError: eat is not defined
(function(){
console.log(like) //宗介
var eat = '肉'
})()
}
fun();- name定義在全局，在全局可以訪問到，所以 (2) 打印能夠正確打印；
- 在函數fun中，如果沒有定義name屬性，那麼會到它的父作用域去找，所以 (3) 也能正確打印。
- 內部環境可以通過作用域鏈訪問所有外部環境，但外部環境不能訪問內部環境的任何變量和函數。類似單向透明，這就是作用域鏈，所以 (4) 不行而 (5) 可以。
那麼問題來了，為什麼第一個打印是”undefined”，而不是”ReferenceError: name is not defined”。原理簡單的說就是JS的變量提升
變量提升：JS在解析代碼時，會將所有的聲明提前到所在作用域的最前面
栗子2
console.log(name); //undefined
var name = '波妞';
console.log(name); //波妞
function fun(){
console.log(name) //undefined
console.log(like) //undefined
var name = '大西瓜';
var like = '宗介'
}
fun();相當於
var name;
console.log(name); //undefined
name = '波妞';
console.log(name); //波妞
function fun(){
var name;
var like;
console.log(name) //undefined
console.log(like) //undefined
name = '大西瓜';
like = '宗介'
console.log(name) //大西瓜
console.log(like) //宗介
}
fun();注意：是提前到當前作用域的最前面
栗子3
printName(); //printName is not a function
var printName = function(){
console.log('波妞')
}
printName(); //波妞相當於
var printName;
printName(); //printName is not a function
printName = function(){
console.log('波妞')
}
printName(); //波妞這樣一來就好理解了，函數表達式在聲明的時候還只是個變量
栗子4
{
var name = '波妞';
}
console.log(name) //波妞
(function(){
var name = '波妞';
})()
console.log(name) //ReferenceError: name is not defined
{
let name = '波妞';
}
console.log(name) //ReferenceError: name is not defined從上面的栗子可以看出，不可以草率的認為JS中var聲明的變量的作用範圍就是大括號的起止範圍，ES5並沒有塊級作用域，實質是函數作用域；ES6中有了let、const定義后，才有了塊級作用域。
栗子5
function p1() {
console.log(1);
}
function p2() {
console.log(2);
}
(function () {
if (false) {
function p1() {
console.log(3);
}
}else{
function p2(){
console.log(4)
}
}
p2();
p1()
})();
//4
//TypeError: print is not a function這是一個非常經典的栗子，聲明提前了，但是因為判斷條件為否，所以沒有執行函數體。所以會出現”TypeError: print is not a function”。while，switch，for同理
閉包
函數與對其狀態即詞法環境（lexical environment）的引用共同構成閉包（closure）。也就是說，閉包可以讓你從內部函數訪問外部函數作用域。在JavaScript中，函數在每次創建時生成閉包。
上面的定義來自，簡單講，閉包就是指有權訪問另一個函數作用域中變量的函數。
- 閉包的關鍵在於：外部函數調用之後其變量對象本應該被銷毀，但閉包的存在使我們仍然可以訪問外部函數的變量對象.,
//舉個例子
function makeFunc() {
var name = "波妞";
function displayName() {
console.log(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();JavaScript中的函數會形成閉包。 閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量
在例子中，myFunc 是執行 makeFunc 時創建的 displayName 函數實例的引用，而 displayName 實例仍可訪問其詞法作用域中的變量，即可以訪問到 name 。由此，當 myFunc 被調用時，name 仍可被訪問，其值 ‘波妞’ 就被傳遞到console.log中。創建閉包最常見方式，就是在一個函數內部創建另一個函數
- 通常，函數的作用域及其所有變量都會在函數執行結束后被銷毀。但是，在創建了一個閉包以後，這個函數的作用域就會一直保存到閉包不存在為止
//例二
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
//釋放對閉包的引用
add5 = null;
add10 = null;從本質上講，makeAdder 是一個函數工廠 — 他創建了將指定的值和它的參數相加求和的函數。在上面的示例中，我們使用函數工廠創建了兩個新函數 — 一個將其參數和 5 求和，另一個和 10 求和。
add5 和 add10 都是閉包。它們共享相同的函數定義，但是保存了不同的詞法環境。在 add5 的環境中，x 為 5。而在 add10 中，x 則為 10。
閉包的作用域鏈包含着它自己的作用域，以及包含它的函數的作用域和全局作用域。
- 閉包只能取得包含函數中的任何變量的最後一個值
//栗子1
function arrFun1(){
var arr = [];
for(var i = 0 ; i < 10 ; i++){
arr[i] = function(){
return i
}
}
return arr
}
console.log(arrFun1()[9]()); //10
console.log(arrFun1()[1]()); //10
//栗子2
function arrFun2(){
var arr = [];
for(var i = 0 ; i < 10 ; i++){
arr[i] = function(num){
return function(){
return num
};
}(i)
}
return arr
}
console.log(arrFun2()[9]()); //9
console.log(arrFun2()[1]()); //1栗子 1 中，arr數組中包含10個匿名函數，每個函數都可以訪問外部的變量 i , arrFun1 執行后，其作用域被銷毀，但它的變量依然存在內存中，能被循環中的匿名函數訪問，這是的 i 為 10；
栗子 2 中，arr數組中有是個匿名函數，其匿名函數內還有匿名函數，最內層匿名函數訪問的 num 被 上一級匿名函數保存在了內存中，所以可以訪問到每次的 i 的值。
如有錯誤，請斧正
以上
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計
※不管是台北網頁設計公司、台中網頁設計公司，全省皆有專員為您服務
※Google地圖已可更新顯示潭子電動車充電站設置地點!!