思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然！

JavaScript 採用是詞法作用域(lexical scoping)，也就是靜態作用域：

函數的作用域在函數定義的時候就決定了

• 函數的作用域是在函數呼叫的時候才決定的；

1.3 全域變數和局部變數
• 根據定義變數的方式又可以分為：

定義在函數中的變數

function fn(){ var name = '余光'; console.log(name);}console.log(name); // ？fn(); // ？

全域：任何地方都能訪問到的物件擁有全域作用域。

var a = 100;console.log('a1-',a);function fn(){ a = 1000; console.log('a2-',a);}console.log('a3-',a);fn();console.log('a4-',a);

• 二、理解作用域
• #根據第一節的描述，我們一一驗證
• #2.1 理解詞法作用域

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

  登入後複製
  我們結合定義去分析：
• 執行bar
函數，函數內部形成了局部作用域;
• 宣告value變量，並賦值2
執行

函數，函數foo的作用域內沒有value這個變量，它會向外尋找

根據詞法作用域的規則，函數定義時，foo的外部作用域為全域作用域

列印

就是2

2.2 全域變數

var str = '全局变量';function func(){ console.log(str+1); function childFn(){ console.log(str+2); function fn(){ console.log(str+3); }; fn(); }; childFn();}func();// 全局变量1// 全局变量2// 全局变量3

var a = 100;function fn(){ a = 1000; console.log('a1-',a);}console.log('a2-',a);fn();console.log('a3-',a);// a2- 100 // 在当前作用域下查找变量a => 100// a1- 1000 // 函数执行时，全局变量a已经被重新赋值// a3- 1000 // 全局变量a => 1000

2.3 局部作用域
• #局部作用域一般只在固定的程式碼片段內可訪問到，最常見的就是以函數為單位的：

function fn(){ var name="余光"; function childFn(){ console.log(name); } childFn(); // 余光}console.log(name); // name is not defined

會先從目前上下文的變數物件中找出；

如果沒有找到，就會從父級(詞法層面上的父層級)執行上下文的變數物件中查找；

• 查找一个普通对象的属性，但是在当前对象和其原型中都找不到时，会返回undefined
• 查找的属性在作用域链中不存在的话就会抛出ReferenceError。

3.3 作用域嵌套

既然每一个函数就可以形成一个作用域（词法作用域||块级作用域），那么当然也会存在多个作用域嵌套的情况，他们遵循这样的查询规则：

• 内部作用域有权访问外部作用域;
• 外部作用域无法访问内部作用域;（真是是这样吗？）
• 兄弟作用域不可互相访问;

在《你不知道的Js》中，希望读者可以将作用域的嵌套和作用域链想象成这样：

四、思考与总结

4.1 总结

4.2 思考

最后，让我们看一个《JavaScript权威指南》中的两段代码：

var scope = "global scope";function checkscope1(){ var scope = "local scope"; function f(){ return scope; } return f(); // 注意}checkscope1();var scope = "global scope";function checkscope2(){ var scope = "local scope"; function f(){ return scope; } return f;}checkscope2()();

两段代码的结果都是"local scope"，书中的回答是：JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。

但是它们内部经历的事情是一样的吗？

相关免费学习推荐：javascript视频教程

以上是思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然！的詳細內容。更多資訊請關注PHP中文網其他相關文章！