JS核心之作用域

Alan 發布于2019-08-26 11:29 / 1263人閱讀

摘要：作用域鏈在執行上下文創建的時候，在變量對象之后創建作用域鏈，作用域鏈本身就包含變量對象，當函數被調用的時候，作用域鏈包含的是激活對象。我們可以用這個屬性來假定作用域鏈的連接，它指的是鏈中的下一個對象。

什么是作用域

作用域是運行代碼中某些特定部分的變量，函數和對象的可訪問性及生命周期

javascript中的作用域

在javascript中有兩種類型的作用域
1.全局作用域
2.局部作用域
在函數內部定義的在局部作用域內，而在函數外定義的變量在全局作用域內，調用時的每個函數創建一個新的作用域

全局作用域

當你開始在文檔中編寫代碼時，你已經在全局作用域內，整個js環境中只有一個全局作用域，如果在函數外部定義了一個變量，他就在全局作用域內。

// 全局作用域
var name = "哈士奇"

全局作用域的變量可以在任何其他作用域內訪問或更改

// 全局作用域
var name = "哈士奇";

console.log(name); // 哈士奇

//局部作用域
function logName(){
    name = "泰迪";
    console.log(name);
}

logName();

局部作用域

在函數內定義的變量在局部作用域內，對于每個函數的調用，它們都有不同的作用域，這意味著具有相同名稱變量可以用于不同的函數，只是因為這些變量被綁定到它們各自的函數。每個函數具有不同的作用域，并且在其他作用域中是不可訪問的。

function foo(){
    var name = "哈士奇";
    console.log(name);
}

function bar(fn){
    var name = "泰迪";
    fn();
}

bar(foo);    // 哈士奇

無論函數在哪里被調用，也無論他如何被調用，他的作用域都只由函數聲明時的位置決定的

查找

作用域查找會在找到第一個匹配的標識符時停止。在多層的嵌套作用域中可以可以定義同名的變量，這叫做遮蔽效應(內部的變量遮蔽了外部的變量)

function foo(){
    var name = "哈士奇"
    function bar(){
        var name = "泰迪"
        console.log(name)
    }
    bar(); //泰迪
    console.log(name); // 哈士奇
}

foo();

欺騙詞法

javascript中的eval函數可以接受一個字符串為參數，并將其中的內容好像在書寫時就存在于程序中這個位置的代碼。

function foo(str, a){
    eval(str);
    console.log(a, b); //欺騙
}

var b = 2;

foo("var b = 3;", 1); //1, 3

在執行eval()之后的代碼時，引擎并不知道或在意前面的代碼是以動態形式插入進來，并對作用域的環境進行修改的，引擎只會如往常對詞法作用域進行查找。

塊作用域

像塊語句if和switch條件或while與for循環不創建一個新的作用域，在塊語句內定義的變量將保留在它們已經存在的作用域內

if(true){
    var name = "哈士奇"
}

console.log(name);    // 哈士奇

在ES6中新增的const和let關鍵字可以在塊語句內聲明局部作用域。

if(true){
    let name = "哈士奇";
}

console.log(name); // not defined

執行上下文堆棧

因為javascript是單線程語言，一次就只能執行一個函數，其他的函數會在執行上下文中排隊，
即會形成執行上下文堆棧。

在javascript引擎開始執行代碼時，它進入全局執行上下文，它是堆棧的底部和第一個元素。然后，全局代碼提供一些初始化，創建所需的對象和函數。在執行全局上下文期間，其代碼可能激活一些其他（已創建的）函數，這些函數將進入其執行上下文，將新函數推送到堆棧上，依此類推。初始化完成后，運行時系統正在等待一些事件（例如用戶的鼠標點擊），這將激活一些功能，并將進入新的執行上下文。

執行上下文

每個函數都會創建自己的執行上下文，但只能有一個全局上下文。執行上下文可以被簡單的表示一個對象，它擁有下面的屬性

變量對象(Variable object)

變量對象是一個數據容器與執行上下文相關聯。這是一個存儲上下文中定義的變量和函數聲明的特殊對象(請注意函數表達式)不包括在變量對象。

var name = "哈士奇"
function foo(){}
(function bar(){});

console.log(this.name = "哈士奇"); //true
console.log(bar); //bar is not defined;

全局上下文的變量對象將具有以下屬性

激活對象

當調用函數時，將創建一個稱為激活對象的特殊對象，他填充了形式參數和arguments對象，然后激活對象被用作函數上下文的變量對象。

function foo(x, y){
    var z = 30;
    function bar(){}
    (function baz(){});
}

foo(10, 20);

foo函數的上下文里有這些屬性，并且函數表達式bar沒有被包含在變量對象中。

作用域鏈

在執行上下文創建的時候，在變量對象之后創建作用域鏈，作用域鏈本身就包含變量對象，當函數被調用的時候，作用域鏈包含的是激活對象。
當被要求解析變量時，JavaScript始終從代碼嵌套的最內層開始，并保持對父作用域的連接，直到找到變量或其他所需的資源。作用域鏈可以簡單地定義為包含其自己的執行上下文的變量對象的對象，以及父作用域的所有執行上下文。

var x = 10;
 
(function foo() {
  var y = 20;
  (function bar() {
    var z = 30;
    console.log(x + y + z);
  })();
})();

我們可以用__parant__這個屬性來假定作用域鏈的連接，它指的是鏈中的下一個對象。

云服務器 GPU云服務器 js作用域和上下文作用域中作用域作用域規則

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

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

【JavaScript】核心語法之作用域

摘要：作用域一作用域是什么就是變量和函數所被訪問范圍，控制變量和函數的可見性和生命周期作用域分為全局作用域和局部作用域全局作用域是指在所有函數之外聲明的變量，因為當前文檔中的其他代碼可以訪問它局部作用域是指在函數內部聲明的變量，因為該函數只能在它 JS(JavaScript)作用域；一.作用域是什么；就是變量和函數所被訪問范圍，控制變量和函數的可見性和生命周期作用域分為全局作用域和局部作用域...

huashiou 2019-08-23 11:32 評論0 收藏0
1-5. Vue.js核心知識之組件化

摘要：組件是最強大的功能之一。組件的創建和注冊我們可以使用注冊一個全局組件。父組件的數據需要通過才能下發到子組件中。如果傳入的數據不符合要求，會發出警告。這對于開發給他人使用的組件非常有用。組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。組件的創建和注冊我們可以使用 Vue.component(tagName, opti...

weknow619 2019-08-23 18:00 評論0 收藏0
JavaScript 闖關記

摘要：對象數組初始化表達式，闖關記之上文檔對象模型是針對和文檔的一個。闖關記之數組數組是值的有序集合。數組是動態的，根闖關記之語法的語法大量借鑒了及其他類語言如和的語法。《JavaScript 闖關記》之 DOM（下） Element 類型除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現 XML 或 HTML 元素...

mj 2019-08-21 18:45 評論0 收藏0
JavaScript 之核心語法 [ 函數和作用域 ]

摘要：函數描述表示定義一段代碼，并且可重復使用函數的定義函數聲明方式字面量表達方式函數聲明方式語法函數名稱小括號不可省去函數體函數聲明方式在定義函數時，函數體中的內容不會被執行啞吼吼調用函數使用函數名稱調用函數的時候會執行函數體中的內容字面量方函數描述表示定義一段JavaScript代碼，并且可重復使用函數的定義函數聲明方式字面量表達方式函數聲明方式語法 function...

joy968 2019-08-23 10:59 評論0 收藏0
node學習系列之基礎(二)

摘要：由于這種特性，某一個任務的后續操作，往往采用回調函數的形式進行定義。另外，回調函數本身的第一個參數，約定為上一步傳入的錯誤對象。這種寫法有一個很大的好處，就是說只要判斷回調函數的第一個參數，就知道有沒有出錯，如果不是，就肯定出錯了。 REPL環境在命令行鍵入node命令，后面沒有文件名，就進入一個Node.js的REPL環境（Read–eval–print loop，讀取-求值-輸出...

zhaot 2019-08-22 10:40 評論0 收藏0