国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

FE.ES-理解ECMA Javascript作用域

shenhualong / 1693人閱讀

摘要:賦值操作符會導致查詢。中有兩個機制可以欺騙詞法作用域和。如果是作為賦值表達式的一部分的話,那它就是一個函數(shù)表達式,如果被包含在一個函數(shù)體內(nèi),或者位于程序的最頂部的話,那它就是一個函數(shù)聲明。但函數(shù)不是唯一的作用域單元。

本文僅整理自己所學做為筆記,如有錯誤請指正。

作用域

作用域是一套規(guī)則,用于確定在何處以及如何查找變量(標識符)。如果查找的目的是對變量進行賦值,那么就會使用 LHS 查詢;如果目的是獲取變量的值,就會使用 RHS 查詢。賦值操作符會導致 LHS 查詢。 = 操作符或調(diào)用函數(shù)時傳入?yún)?shù)的操作都會導致關聯(lián)作用域的賦值操作。

JavaScript 引擎首先會在代碼執(zhí)行前對其進行編譯,在這個過程中,像 var a = 2 這樣的聲明會被分解成兩個獨立的步驟:

首先, var a 在其作用域中聲明新變量。這會在最開始的階段,也就是代碼執(zhí)行前進行。

接下來, a = 2 會查詢(LHS 查詢)變量 a 并對其進行賦值。

LHS 和 RHS 查詢都會在當前執(zhí)行作用域中開始,如果有需要(也就是說它們沒有找到所需的標識符),就會向上級作用域繼續(xù)查找目標標識符,這樣每次上升一級作用域(一層樓),最后抵達全局作用域(頂層),無論找到或沒找到都將停止。

不成功的 RHS 引用會導致拋出 ReferenceError 異常。不成功的 LHS 引用會導致自動隱式地創(chuàng)建一個全局變量(非嚴格模式下),該變量使用 LHS 引用的目標作為標識符,或者拋出 ReferenceError 異常(嚴格模式下)。

詞法作用域

詞法作用域意味著作用域是由書寫代碼時函數(shù)聲明的位置來決定的。編譯的詞法分析階段基本能夠知道全部標識符在哪里以及是如何聲明的,從而能夠預測在執(zhí)行過程中如何對它們進行查找。

JavaScript 中有兩個機制可以“欺騙”詞法作用域: eval(..) 和 with 。前者可以對一段包含一個或多個聲明的“代碼”字符串進行演算,并借此來修改已經(jīng)存在的詞法作用域(在運行時)。后者本質(zhì)上是通過將一個對象的引用當作作用域來處理,將對象的屬性當作作用域中的標識符來處理,從而創(chuàng)建了一個新的詞法作用域(同樣是在運行時)。

這兩個機制的副作用是引擎無法在編譯時對作用域查找進行優(yōu)化,因為引擎只能謹慎地認為這樣的優(yōu)化是無效的。使用這其中任何一個機制都將導致代碼運行變慢。不要使用它們。

因為 JavaScript 采用的是詞法作用域,函數(shù)的作用域在函數(shù)定義的時候就決定了。

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();//local scope
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();//local scope
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope();
foo();//local scope
函數(shù)表達式和函數(shù)聲明

函數(shù)聲明:function 函數(shù)名稱 (參數(shù):可選){ 函數(shù)體 }
函數(shù)表達式:function 函數(shù)名稱(可選)(參數(shù):可選){ 函數(shù)體 }

辨別:

如果不聲明函數(shù)名稱,它肯定是表達式。

如果function foo(){}是作為賦值表達式的一部分的話,那它就是一個函數(shù)表達式,如果function foo(){}被包含在一個函數(shù)體內(nèi),或者位于程序的最頂部的話,那它就是一個函數(shù)聲明。

被括號括住的(function foo(){}),他是表達式的原因是因為括號 ()是一個分組操作符,它的內(nèi)部只能包含表達式

  function foo(){} // 聲明,因為它是程序的一部分

  (function(){
    function bar(){} // 聲明,因為它是函數(shù)體的一部分
  })();

  var bar = function foo(){}; // 表達式,因為它是賦值表達式的一部分
  new function bar(){}; // 表達式,因為它是new表達式
  (function foo(){}); // 表達式:包含在分組操作符內(nèi)
  
  try {
    (var x = 5); // 分組操作符,只能包含表達式而不能包含語句:這里的var就是語句
  } catch(err) {
    // SyntaxError
  }

函數(shù)聲明在條件語句內(nèi)雖然可以用,但是沒有被標準化,最好使用函數(shù)表達式

函數(shù)聲明會覆蓋變量聲明,但不會覆蓋變量賦值

function value(){
    return 1;
}
var value;
alert(typeof value);    //"function"
函數(shù)作用域和塊作用域

函數(shù)是 JavaScript 中最常見的作用域單元。本質(zhì)上,聲明在一個函數(shù)內(nèi)部的變量或函數(shù)會在所處的作用域中“隱藏”起來,這是有意為之的良好軟件的設計原則。但函數(shù)不是唯一的作用域單元。

塊作用域指的是變量和函數(shù)不僅可以屬于所處的作用域,也可以屬于某個代碼塊(通常指 { .. } 內(nèi)部)。

從 ES3 開始, try/catch 結(jié)構(gòu)在 catch 分句中具有塊作用域。

在 ES6 中引入了 let 關鍵字( var 關鍵字的表親),用來在任意代碼塊中聲明變量。
if(..) { let a = 2; } 會聲明一個劫持了 if 的 { .. } 塊的變量,并且將變量添加到這個塊中。

有些人認為塊作用域不應該完全作為函數(shù)作用域的替代方案。兩種功能應該同時存在,開發(fā)者可以并且也應該根據(jù)需要選擇使用何種作用域,創(chuàng)造可讀、可維護的優(yōu)良代碼。

提升

我們習慣將 var a = 2; 看作一個聲明,而實際上 JavaScript 引擎并不這么認為。它將 var a和 a = 2 當作兩個多帶帶的聲明,第一個是編譯階段的任務,而第二個則是執(zhí)行階段的任務。

這意味著無論作用域中的聲明出現(xiàn)在什么地方,都將在代碼本身被執(zhí)行前首先進行處理。可以將這個過程形象地想象成所有的聲明(變量和函數(shù))都會被“移動”到各自作用域的最頂端,這個過程被稱為提升。

聲明本身會被提升,而包括函數(shù)表達式的賦值在內(nèi)的賦值操作并不會提升。
要注意避免重復聲明,特別是當普通的 var 聲明和函數(shù)聲明混合在一起的時候,否則會引
起很多危險的問題!

var a;
if (!("a" in window)) {
    a = 1;
}
alert(a);
作用域閉包

通常,程序員會錯誤的認為,只有匿名函數(shù)才是閉包。其實并非如此,正如我們所看到的 —— 正是因為作用域鏈,使得所有的函數(shù)都是閉包(與函數(shù)類型無關: 匿名函數(shù),F(xiàn)E,NFE,F(xiàn)D都是閉包), 這里只有一類函數(shù)除外,那就是通過Function構(gòu)造器創(chuàng)建的函數(shù),因為其[[Scope]]只包含全局對象。 為了更好的澄清該問題,我們對ECMAScript中的閉包作兩個定義(即兩種閉包):

ECMAScript中,閉包指的是:

從理論角度:所有的函數(shù)。因為它們都在創(chuàng)建的時候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此,因為函數(shù)中訪問全局變量就相當于是在訪問自由變量,這個時候使用最外層的作用域。
從實踐角度:以下函數(shù)才算是閉包:
即使創(chuàng)建它的上下文已經(jīng)銷毀,它仍然存在(比如,內(nèi)部函數(shù)從父函數(shù)中返回)
在代碼中引用了自由變量

循環(huán)閉包
for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
        console.log( j );
        }, j*1000 );
    })( i );
}

for (var i=1; i<=5; i++) {
    let j = i; // 是的,閉包的塊作用域!
    setTimeout( function timer() {
    console.log( j );
    }, j*1000 );
}

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

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();//3
data[1]();//3
data[2]();//3
模塊

模塊有兩個主要特征:(1)為創(chuàng)建內(nèi)部作用域而調(diào)用了一個包裝函數(shù);(2)包裝函數(shù)的返回
值必須至少包括一個對內(nèi)部函數(shù)的引用,這樣就會創(chuàng)建涵蓋整個包裝函數(shù)內(nèi)部作用域的閉
包。

現(xiàn)代模塊機制
var MyModules = (function Manager() {
    var modules = {};
    function define(name, deps, impl) {
        for (var i=0; i
未來模塊機制
//bar.js
function hello(who) {
    return "Let me introduce: " + who;
}
export hello;
//foo.js
// 僅從 "bar" 模塊導入 hello()
import hello from "bar";
var hungry = "hippo";
function awesome() {
    console.log(
        hello( hungry ).toUpperCase()
    );
}
export awesome;
baz.js
// 導入完整的 "foo" 和 "bar" 模塊
module foo from "foo";
module bar from "bar";
console.log(
    bar.hello( "rhino" )
); // Let me introduce: rhino
foo.awesome(); // LET ME INTRODUCE: HIPPO
塊作用域替代方案

Google 維護著一個名為 Traceur 的項目,該項目正是用來將 ES6 代碼轉(zhuǎn)換成兼容 ES6 之前的環(huán)境(大部分是 ES5,但不是全部)。TC39 委員會依賴這個工具(也有其他工具)來測試他們指定的語義化相關的功能。

{
    try {
        throw undefined;
    } catch (a) {
        a = 2;
        console.log( a );
    }
}
console.log( a )
上下文 EC(執(zhí)行環(huán)境或者執(zhí)行上下文,Execution Context)
EC={
    VO:{/* 函數(shù)中的arguments對象, 參數(shù), 內(nèi)部的變量以及函數(shù)聲明 */},
    this:{},
    Scope:{ /* VO以及所有父執(zhí)行上下文中的VO */}
}
ECS(執(zhí)行環(huán)境棧Execution Context Stack)
//ECS=[Window]
A(//ECS=[Window,A]
    B(//ECS=[Window,A,B]
        //run B 
    )
    //ECS=[Window,A]
)
//ECS=[Window]
VO(變量對象,Variable Object)
var a = 10;
function test(x) {
  var b = 20;
};
test(30);
/*
VO(globalContext)
  a: 10,
  test: 
VO(test functionContext)
  x: 30
  b: 20
*/
AO(活動對象,Active Object)
function test(a, b) {
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
} 
test(10);
/*
AO(test) = {
  a: 10,
  b: undefined,
  c: undefined,
  d: 
  e: undefined
};
*/
scope chain(作用域鏈)和[[scope]]屬性
Scope = AO|VO + [[Scope]]
例子
var x = 10;
 
function foo() {
  var y = 20;
 
  function bar() {
    var z = 30;
    alert(x +  y + z);
  }
 
  bar();
}
 
foo(); // 60

全局上下文的變量對象是:

globalContext.VO === Global = {
  x: 10
  foo: 
};

在“foo”創(chuàng)建時,“foo”的[[scope]]屬性是:

foo.[[Scope]] = [
  globalContext.VO
];

在“foo”激活時(進入上下文),“foo”上下文的活動對象是:

fooContext.AO = {
  y: 20,
  bar: 
};

“foo”上下文的作用域鏈為:

fooContext.Scope = fooContext.AO + foo.[[Scope]] // i.e.:
 
fooContext.Scope = [
  fooContext.AO,
  globalContext.VO
];

內(nèi)部函數(shù)“bar”創(chuàng)建時,其[[scope]]為:

bar.[[Scope]] = [
  fooContext.AO,
  globalContext.VO
];

在“bar”激活時,“bar”上下文的活動對象為:

barContext.AO = {
  z: 30
};

“bar”上下文的作用域鏈為:

barContext.Scope = barContext.AO + bar.[[Scope]] // i.e.:
 
barContext.Scope = [
  barContext.AO,
  fooContext.AO,
  globalContext.VO
];

對“x”、“y”、“z”的標識符解析如下:

- "x"
-- barContext.AO // not found
-- fooContext.AO // not found
   globalContext.VO // found - 10

- "y"
-- barContext.AO // not found
   fooContext.AO // found - 20

- "z"
   barContext.AO // found - 30

參考資料:
深入理解JavaScript系列(16):閉包(Closures)
JavaScript深入之執(zhí)行上下文棧
JavaScript深入之詞法作用域和動態(tài)作用域
你不懂JS:作用域與閉包
變量對象(Variable object)
深入理解JavaScript系列(14):作用域鏈(Scope Chain)
let 是否會聲明提升?

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/114289.html

相關文章

  • FE.ES-理解ECMA Javascript作用

    摘要:賦值操作符會導致查詢。中有兩個機制可以欺騙詞法作用域和。如果是作為賦值表達式的一部分的話,那它就是一個函數(shù)表達式,如果被包含在一個函數(shù)體內(nèi),或者位于程序的最頂部的話,那它就是一個函數(shù)聲明。但函數(shù)不是唯一的作用域單元。 本文僅整理自己所學做為筆記,如有錯誤請指正。 作用域 作用域是一套規(guī)則,用于確定在何處以及如何查找變量(標識符)。如果查找的目的是對變量進行賦值,那么就會使用 LHS 查...

    newsning 評論0 收藏0
  • FE.ES-理解ECMA Javascript的this

    摘要:捕獲所有參數(shù)綁定當一個函數(shù)用作構(gòu)造函數(shù)時使用關鍵字,它的被綁定到正在構(gòu)造的新對象。使用來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時,會自動執(zhí)行下面的操作你不知道的創(chuàng)建或者說構(gòu)造一個全新的對象。在箭頭函數(shù)中,與封閉詞法上下文的保持一致。 this 實際上是在函數(shù)被調(diào)用時發(fā)生的綁定,它指向什么完全取決于函數(shù)的調(diào)用位置(也就是函數(shù)的調(diào)用方法)。 四條規(guī)則:(你不知道的JS) 1. 默認綁定 func...

    Meils 評論0 收藏0
  • FE.ES-理解ECMA Javascript的this

    摘要:捕獲所有參數(shù)綁定當一個函數(shù)用作構(gòu)造函數(shù)時使用關鍵字,它的被綁定到正在構(gòu)造的新對象。使用來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時,會自動執(zhí)行下面的操作你不知道的創(chuàng)建或者說構(gòu)造一個全新的對象。在箭頭函數(shù)中,與封閉詞法上下文的保持一致。 this 實際上是在函數(shù)被調(diào)用時發(fā)生的綁定,它指向什么完全取決于函數(shù)的調(diào)用位置(也就是函數(shù)的調(diào)用方法)。 四條規(guī)則:(你不知道的JS) 1. 默認綁定 func...

    elliott_hu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<