ES5和ES6作用域詳解

sourcenode 發(fā)布于2019-08-20 17:59 / 2693人閱讀

摘要：函數(shù)作用域雖然不存在真正意義上的塊級作用域，但是存在函數(shù)作用域，為了解決上述偽塊級作用域的問題，使用函數(shù)解決法如下結(jié)果為結(jié)果為注意以上生成函數(shù)作用域的寫法存在兩個(gè)問題，第一申明了全局的具名函數(shù)，污染了全局作用域。

ES5和ES6作用域 ES5的塊級作用域 ES5的塊級作用域是一個(gè)偽塊級作用域，代碼塊：{}，它的塊里面和塊外面都是共用一個(gè)作用域，即：

Example:

{
    var a =3;
    console.log(a); //結(jié)果為3   
}
console.log(a); //結(jié)果為3

Example:
ES5的偽塊級作用域另外一個(gè)典型的例子如下：

var a = [];
for(var i=0;i<10;i++){
    a.push(function(){
        console.log(i);
    });
}
a[0](); //預(yù)期結(jié)果是0，實(shí)際結(jié)果是10

注意：出現(xiàn)上述現(xiàn)象的主要原因是使用var定義的變量 i 是一個(gè)全局變量，導(dǎo)致真正在調(diào)用的時(shí)候雖然循環(huán)了10次，可是最終十次都是只修改了全局變量 i ,并沒有區(qū)分出私有作用域。與之相反的兩個(gè)例子如下：

Example1：這個(gè)是利用ES6的let申明的變量會限制在當(dāng)前塊級作用域內(nèi),每次重新申明了變量，申明了10次

var a =[];
for(let i=0;i<10;i++){
    a.push(function(){
        console.log(i);
    });
}
a[0](); //結(jié)果為10

Example2：這個(gè)是利用構(gòu)建閉包來生成私有作用域

var a = [];
for(var i=0;i<10;i++){
    a.push((function($i){//$i是該匿名函數(shù)的入?yún)?，等同下面的i
        function k(){
            console.log($i);
        }
        return  k;
    })(i));
}
a[0](); //結(jié)果為0

注意：如果上面的Example2不使用參數(shù)傳遞的方式創(chuàng)建私有作用域，那也可以內(nèi)部定義變量的方式來代替，值得注意的是如果是直接引用外部變量創(chuàng)建的結(jié)果最終是一個(gè)空作用域，并不能達(dá)到隔變量 i 的效果
Example3:錯(cuò)誤例子

var a = [];
for(var i=0;i<10;i++){
    a.push((function(){//$i是該匿名函數(shù)的入?yún)?，等同下面的i
        function k(){
            console.log(i);
        }
        return  k;
    })());
}
a[0](); //結(jié)果為10

ES5中的塊級作用域有效的只有try catch，如：

Example:

try{
    throw 3;
}catch(e){
    console.log(e); //結(jié)果為3
}
console.log(e); //結(jié)果為ReferenceError

注意：正因?yàn)閠ry catch有如上的功能，所以有時(shí)候有些框架為了區(qū)分塊級私有作用域就是用它來解決的，例如google的Traceur項(xiàng)目。

綜上所述：ES5偽塊級作用域的問題是沒有創(chuàng)建私有作用域，污染了它的父級甚至可能是全局作用域覆蓋window對象的原生方法或?qū)傩浴?/p> ES5函數(shù)作用域

ES5雖然不存在真正意義上的塊級作用域，但是存在函數(shù)作用域，為了解決上述ES5偽塊級作用域的問題，使用函數(shù)解決法如下：
Exapmle1

var a = 1;
function fun(){
    var a = 5;
    console.log(a); //結(jié)果為5
}
fun();
console.log(a); //結(jié)果為1

注意：以上生成函數(shù)作用域的寫法存在兩個(gè)問題，第一：申明了全局的具名函數(shù)fun，污染了全局作用域。第二：如果要實(shí)現(xiàn)這個(gè)私有作用域，必須要函數(shù)調(diào)用才行。

Example2：改良上述兩個(gè)問題的寫法如下：

var a = 1;
(function (){
    var a =5;
    console.log(a); //結(jié)果為5
})();
console.log(a); //結(jié)果為1

注意：例子2的寫法在JS社區(qū)規(guī)定的術(shù)語是立即執(zhí)行函數(shù)表達(dá)式——IIFE，它可以無傷地創(chuàng)建一個(gè)塊級私有作用域替代ES5的偽塊級作用域，還有雖然它般用和閉包結(jié)合使用，但注意和閉包的區(qū)分。

立即執(zhí)行函數(shù)表達(dá)式另一個(gè)常用技巧

倒置立即執(zhí)行函數(shù)代碼的運(yùn)行順序，將需要運(yùn)行的函數(shù)放在第二位，在立即執(zhí)行函數(shù)執(zhí)行之后當(dāng)作參數(shù)傳遞進(jìn)去。這種模式在UMD(Universal Module Definition)項(xiàng)目中被廣泛使用。

Example

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

代碼解讀：例子中將代碼主體放在了立即執(zhí)行函數(shù)的參數(shù)部分，當(dāng)做參數(shù)傳遞給執(zhí)行函數(shù)，執(zhí)行函數(shù)的內(nèi)部又立即調(diào)用了這個(gè)函數(shù)，并將全局的window對象當(dāng)做參數(shù)傳遞給參數(shù)主體函數(shù)，并匿名window為global來調(diào)動(dòng)全局a變量，達(dá)到不會與參數(shù)主體函數(shù)的作用域沖突。

GPU云服務(wù)器云服務(wù)器作用域詳解 js作用域和上下文 es5和js什么區(qū)別位域詳解

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83985.html

發(fā)表評論

登陸后可評論

0條評論

sourcenode

男|高級講師

我要關(guān)注我要私信

TA的文章

ubuntu安裝tensorflow

閱讀 3527·2023-04-25 14:57
#yyds干貨盤點(diǎn)#設(shè)計(jì)模式之【單例模式】

閱讀 2574·2021-11-22 14:56
易探云：金秋上云節(jié),香港/美國/韓國云服務(wù)器最低9元;香港物理機(jī)/虛擬主機(jī)優(yōu)惠促銷

閱讀 2097·2021-09-29 09:45
有個(gè)云主機(jī)可以做什么-云主機(jī)能做什么？

閱讀 1779·2021-09-22 15:53
Virtono：夏季促銷，年付5折€23.7/年起，洛杉磯/達(dá)拉斯/紐約/羅馬尼亞等

閱讀 3327·2021-08-25 09:41
css百分比總結(jié)，自適應(yīng)布局

閱讀 908·2019-08-29 15:22
聽說2017你想寫前端？

閱讀 3307·2019-08-29 13:22
前端web網(wǎng)站上中（左右）下布局(flex、calc)

閱讀 3132·2019-08-29 13:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES5和ES6作用域詳解

相關(guān)文章