JavaScript詞法作用域

文章目錄

JavaScript詞法作用域
- 詞法作用域是什么？
- 示例（難度加深）

詞法作用域是什么？

js詞法作用域是什么？個人理解：它是一種規則，規定了我們的js程式按照特定方式去查找變數，詞法作用域又叫靜態作用域，函式的作用域在函式定義的時候就規定了，這個規則其實粗俗的理解就是就近原則，通過下方試驗可得出，

// 示例一
var value = 1;
function foo() {
  console.log(value);
}
function bar() {
  var value = 2;
  foo();
}
bar();  // 1

這個結果輸出是1 ，根據我們的詞法作用域，我們的foo函式在定義階段其實是跟bar函式沒有關系的這只是兩個函式，不關心函式內部，因此上面的代碼也可以理解成下面示例二：

// 示例二
var value = 1;
function foo() {
  console.log(value);
}
bar(); // 1

在你寫完第四行的時候作用域就決定了，value會先找同一級的，然后發現沒有就會找上一級的，結果輸出就為1，接下來變化一種形式如下：

// 示例三
function foo() {
  console.log(value);
}
function bar() {
  var value = 2;
  foo();
}
bar();

這次這個會輸出什么呢？根據上面的結論我們不難得出應該輸出undefined，我們可以參考示例二來推出我們這個結果，函式定義階段決定了我們js查找變數的方式，而不是呼叫階段

示例（難度加深）

接下來升級一下難度，看如下的代碼：

// 示例四
var scope = "global scope";
function checkscope() {
    var scope = "local scope";
    function func() {
        return scope;
    }
    return func();
}
console.log(checkscope())

function checkscope2() {
    var scope = "local scope";
    function func() {
        return scope;
    }
    return func;
}
console.log(checkscope2()())

這兩個輸出的結果都是local scope 不知道這個結果有沒有讓大家出乎意料，下面我給大家分析一下：

首先分析第一個函式:
1. checkscope() 這個函式我們回傳了func()
2. 然后我們的func() 回傳了scope
3. 然后我們再呼叫checkscope()，就相當于則個回傳值是scope，這個時候我們函式checkscope()函式內有一個scope，全域中也有一個scope，還是根據我們的詞法作用域，不管外面呼叫的是多么的花里胡哨，它的規則就是固定的，所以輸出 local scope
然后分析第二個函式
1. checkscope2() 這個函式回傳了我們的func函式
2. 然后我們checkscope2()()就相當于在全域中呼叫了我們的func()函式，它回傳scope ，這里很容易迷惑我們，因我我們這個函式是在全域中執行的，那它的值是不是就變成了global scope？如果這樣想，那就錯了，我們一定要把詞法作用域放在首位，func函式定義階段始終不會改變，所以它一定還是local scope

為了讓大家有更清晰的理解有了下面這個圖（指出部分就是函式定義階段）：

在這里插入圖片描述

詞法作用域簡單就講到這里了，希望能讓大家明白什么是詞法作用域，和怎么判斷一個變數的作用域(大致就是就近原則)，

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝，

參考檔案:

作者：Louis 深入學習js之——詞法作用域和動態作用域

作者：冴羽 JavaScript深入之詞法作用域和動態作用域

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249081.html

標籤：其他

上一篇：原生js 和 jQuery 分別實作隔行變色（簡單的方法）

下一篇：HTML5 彈性布局