[Day3] 作用域

作用域是原始码中定义变数的区域，他规范了目前程序码应该要去哪里查找变数，而作用域又可分为 静态作用域 与 动态作用域，首先先来了解两者的差别。

静态作用域

定义

静态作用域又称作语法作用域(Lexical scoping)，他在函数定义时就已经决定作用域，而且不会再改变，JavaScript 属於此类。

范例

以下为静态作用域范例，运作步骤如下：

1. 先在全域命名一个 变数 num 赋予值 1。
2. 呼叫 函式 fn2，在函式内命名一个 变数 num 赋予值 2，因静态作用域的关系，函式 fn2 中的 变数 num，作用域只在 函式 fn2 中，接着呼叫 函式 fn1。
3. 函式 fn1 内因没有 变数 num，又因静态作用域的关系，所以会向外层(全域)查找，故 console.log(num); 显示为 1。

// 静态作用域范例

var num = 1;

function fn1() {
    console.log(num); // 1
    // 因静态作用域，又因 fn1 没有变数 num，所以会向外(全域)查找
}

function fn2() {
    var num = 2;
    //变数 num 作用域只在函式 fn2 中
    fn1();
}

fn2();

动态作用域

定义

动态作用域会在函式调用时才会决定作用域。

范例

以下为动态作用域范例，运作步骤如下：

1. 先在全域命名一个 变数 num 赋予值 1。
2. 呼叫 函式 fn2，在函式内命名一个 变数 num 赋予值 2，接着呼叫 函式 fn1。
3. 函式 fn1 内因没有 变数 num，又因动态作用域的关系 - 函式调用时才会决定作用域，所以会向上一层 函式 fn2 查找 变数 num，故 console.log(num); 显示为 2。

// 动态作用域范例

var num = 1;

function fn1() {
    console.log(num); // 2
    // 因动态作用域，在函式调用时才会决定作用域，所以会向上一层 fn2 宣告的位置找变数的值
}

function fn2() {
    var num = 2;
    fn1();
}

fn2();

错误讯息

若所有作用域都找不到变数时，则会出现 ReferenceError: 变数 is not defined 的错误讯息，范例如下。

参考文献

六角学院 - JavaScript 核心篇