一、函數(shù)作用域

1.函數(shù)作用域

就是作用域在一個(gè)“Function”里，屬于這個(gè)函數(shù)的全部變量都可以在整個(gè)函數(shù)的范圍內(nèi)使用及復(fù)用。

function foo(a) {
var b = 2;
function bar() {
// ...
}
var c = 3;
}
bar(); // 失敗
console.log( a, b, c ); // 三個(gè)全都失敗

上面的“foo”函數(shù)內(nèi)的幾個(gè)標(biāo)識(shí)符，放到函數(shù)外面訪問就都會(huì)報(bào)錯(cuò)。

2.立即執(zhí)行函數(shù)表達(dá)式

在任意代碼片段外部添加包裝函數(shù)，可以將內(nèi)部的變量和函數(shù)定義“隱藏”起來，外部作用域無法訪問包裝函數(shù)內(nèi)部的任何內(nèi)容。

例如上面的bar、a等幾個(gè)標(biāo)識(shí)符。這樣能夠保護(hù)變量不被污染。

在寫插件的時(shí)候經(jīng)常會(huì)用到立即執(zhí)行函數(shù)表達(dá)式，為的就是保護(hù)里面的變量。

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

“foo”中第一個(gè)( )將函數(shù)變成表達(dá)式，第二個(gè)( )執(zhí)行了這個(gè)函數(shù)。

有一個(gè)專用術(shù)語(yǔ)：IIFE，代表立即執(zhí)行函數(shù)表達(dá)式（Immediately Invoked Function Expression）；

1. 進(jìn)階用法是把它們當(dāng)作函數(shù)調(diào)用并傳遞參數(shù)進(jìn)去

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

2. 一種變化的用途是倒置代碼的運(yùn)行順序，在CMD或AMD項(xiàng)目中被廣泛使用。

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

二、塊作用域

JavaScript不支持塊作用域。

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

上面的代碼中的“i”相當(dāng)于下面的

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

但也有例外，“try/catch”，catch就是一個(gè)塊作用域。

try{
undefined(); // 執(zhí)行一個(gè)非法操作來強(qiáng)制制造一個(gè)異常 
} 
catch(err) {
console.log( err ); // 能夠正常執(zhí)行！
}
console.log( err ); // ReferenceError: err not found

ES6改變了現(xiàn)狀，引入了新的let關(guān)鍵字，let關(guān)鍵字可以將變量綁定到所在的任意作用域中（通常是{ .. }內(nèi)部）。換句話說，let為其聲明的變量隱式地了所在的塊作用域。

三、提升

函數(shù)作用域和塊作用域的行為是一樣的，可以總結(jié)為：任何聲明在某個(gè)作用域內(nèi)的變量，都將附屬于這個(gè)作用域。

1）編譯與執(zhí)行

變量和函數(shù)的所有聲明都會(huì)在任何代碼被執(zhí)行前首先被處理，可以看下面的代碼事例。

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

這段代碼等價(jià)于：

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

2）函數(shù)優(yōu)先

函數(shù)會(huì)首先被提升，然后才是變量。

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

var foo函數(shù)表達(dá)式盡管出現(xiàn)在function foo()的聲明之前，但它是重復(fù)的聲明（因此被忽略了），因?yàn)楹瘮?shù)聲明會(huì)被提升到普通變量之前。

而上面的代碼相當(dāng)于：

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

四、閉包

閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，
通過另一個(gè)函數(shù)訪問這個(gè)函數(shù)的局部變量，利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部

閉包的特性:

1.函數(shù)內(nèi)在嵌套函數(shù)

2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量

3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

1）定義

當(dāng)函數(shù)可以記住并訪問所在的作用域時(shí)，就產(chǎn)生了閉包，即使函數(shù)是在當(dāng)前作用域之外執(zhí)行。

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

1. 將函數(shù)“bar”賦值給“baz”，執(zhí)行“baz”，當(dāng)前作用域并不在“bar”的作用域，但是可以執(zhí)行。

2. 閉包還會(huì)阻止垃圾回收，當(dāng)“foo”執(zhí)行完后，內(nèi)部作用域仍然存在。這樣才能讓“baz”執(zhí)行。

2）將函數(shù)作為參數(shù)傳遞

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

把內(nèi)部函數(shù)baz傳遞給bar，當(dāng)調(diào)用這個(gè)內(nèi)部函數(shù)時(shí)（fn），它涵蓋的foo()內(nèi)部作用域的閉包就可以觀察到了，因?yàn)樗軌蛟L問a。

如果將函數(shù)當(dāng)作第一級(jí)的值類型并到處傳遞，你就會(huì)看到閉包在這些函數(shù)中的應(yīng)用。

在定時(shí)器、事件監(jiān)聽器、Ajax請(qǐng)求、跨窗口通信、Web Workers或者任何其他的異步（或者同步）任務(wù)中，只要使用了回調(diào)函數(shù)，實(shí)際上就是在使用閉包！

3）循環(huán)和閉包

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

每次打印出來都將會(huì)是6，延遲函數(shù)的回調(diào)會(huì)在循環(huán)結(jié)束時(shí)才執(zhí)行

根據(jù)作用域的工作原理，實(shí)際情況是盡管循環(huán)中的五個(gè)函數(shù)是在各個(gè)迭代中分別定義的，但是它們都被封閉在一個(gè)共享的全局作用域中，因此實(shí)際上只有一個(gè)i。

現(xiàn)在用閉包來實(shí)現(xiàn)每次打印不同的i。

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

IIFE會(huì)通過聲明并立即執(zhí)行一個(gè)函數(shù)來創(chuàng)建作用域。setTimeout中的回調(diào)可以記住當(dāng)前的作用域，每個(gè)作用域中的參數(shù)“j”都是不同的。

以上所述是小編給大家介紹的JavaScript中最容易混淆的作用域、提升、閉包知識(shí)詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論