ES5和ES6作用域詳解

sourcenode 發布于2019-08-20 17:59 / 2685人閱讀

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

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

Example:

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

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

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

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

Example1：這個是利用ES6的let申明的變量會限制在當前塊級作用域內,每次重新申明了變量，申明了10次

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

Example2：這個是利用構建閉包來生成私有作用域

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

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

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

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

Example:

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

注意：正因為try catch有如上的功能，所以有時候有些框架為了區分塊級私有作用域就是用它來解決的，例如google的Traceur項目。

綜上所述：ES5偽塊級作用域的問題是沒有創建私有作用域，污染了它的父級甚至可能是全局作用域覆蓋window對象的原生方法或屬性。

ES5函數作用域

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

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

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

Example2：改良上述兩個問題的寫法如下：

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

注意：例子2的寫法在JS社區規定的術語是立即執行函數表達式——IIFE，它可以無傷地創建一個塊級私有作用域替代ES5的偽塊級作用域，還有雖然它般用和閉包結合使用，但注意和閉包的區分。

立即執行函數表達式另一個常用技巧

倒置立即執行函數代碼的運行順序，將需要運行的函數放在第二位，在立即執行函數執行之后當作參數傳遞進去。這種模式在UMD(Universal Module Definition)項目中被廣泛使用。

Example

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

代碼解讀：例子中將代碼主體放在了立即執行函數的參數部分，當做參數傳遞給執行函數，執行函數的內部又立即調用了這個函數，并將全局的window對象當做參數傳遞給參數主體函數，并匿名window為global來調動全局a變量，達到不會與參數主體函數的作用域沖突。

GPU云服務器云服務器作用域詳解 js作用域和上下文 es5和js什么區別位域詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83985.html

ES5和ES6作用域詳解

摘要：允許在塊級作用域內聲明函數。上面代碼中，存在全局變量，但是塊級作用域內又聲明了一個局部變量，導致后者綁定這個塊級作用域，所以在聲明變量前，對賦值會報錯。 ES5的作用域變量起作用的范圍，js中能創建作用域的只能是函數 { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

Dr_Noooo 2019-08-21 17:30 評論0 收藏0
ES5和ES6數組遍歷方法詳解

摘要：和數組遍歷方法詳解在中常用的種數組遍歷方法原始的循環語句數組對象內置方法數組對象內置方法數組對象內置方法數組對象內置方法數組對象內置方法數組對象內置方法數組對象內置方法數組對象內置方法循環語句中新增加了一種循環語句三種數組循環示例如下原始循 ES5和ES6數組遍歷方法詳解在ES5中常用的10種數組遍歷方法: 1、原始的for循環語句2、Array.prototype.forEach數...

GitChat 2019-08-20 18:02 評論0 收藏0
ES6 變量作用域與提升：變量的生命周期詳解

摘要：不同的是函數體并不會再被提升至函數作用域頭部，而僅會被提升到塊級作用域頭部避免全局變量在計算機編程中，全局變量指的是在所有作用域中都能訪問的變量。 ES6 變量作用域與提升：變量的生命周期詳解從屬于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文詳細討論了 JavaScript 中作用域、執行上下文、不同作用域下變量提升與函數提升的表現、頂層對象以及如何避免創建...

lmxdawn 2019-08-21 11:55 評論0 收藏0
JavaScript聲明變量詳解

摘要：命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能所以在一定程度上來說，也具有聲明變量的功能。當沒有聲明，直接給變量賦值時，會隱式地給變量聲明，此時這個變量作為全局變量存在。前言如果文章中有出現紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過在ES5階段，JavaScript 使用 var 和 function 來聲明變量， ES6 中又添加了let、const、imp...

paulquei 2019-08-26 13:39 評論0 收藏0
[面試專題]ES6之箭頭函數詳解

摘要：使用或調用由于已經在詞法層面完成了綁定，通過或方法調用一個函數時，只是傳入了參數而已，對并沒有什么影響箭頭函數不會在其內部暴露出參數等等，都不會指向箭頭函數的，而是指向了箭頭函數所在作用域的一個名為的值如果有的話，否則，就是。 ES6之箭頭函數標簽（空格分隔）：未分類返回值單行函數體默認返回改行計算結果, 多行需要指定返回值 let c = (a,b)=>a+b; conso...

Caicloud 2019-08-01 17:31 評論0 收藏0