JavaScript 作用域、作用域链的理解

751 阅读2分钟

1. 作用域

作用域表示当前的执行上下文,表达式在其中可见可被访问到的上下文。作用域决定了代码区块中变量和其他资源的可见性

JavaScript中,作用域可分为全局作用域局部作用域块级作用域

1. 全局作用域

在代码中任何地方都能访问到的对象,拥有全局作用域

JavaScript中,一般有三种情况拥有全局作用域:

(1)window对象的属性、方法

如图所示,所有window对象的属性都拥有全局作用域。之所以可以在JavaScript的任何地方使用alert函数,是因为它被定义在了window对象上的,拥有全局作用域。

(2)定义在最外层的变量、函数、对象

// 最外层变量
let a = 1;

// 最外层函数
function func1() {
    // 内层变量
    let b = 2;
    // 内层函数
    function func2() {
        console.log(b);
    }
}

console.log(a); // 1
console.log(b); // b is not defined

console.log(func1); // [Function: func1]
console.log(func2); // func2 is not defined

在此例中,变量a和函数func1拥有全局作用域,在任何地方都能访问到。

但变量b和函数func2没有定义在全局作用域中,在全局作用域中无法访问。

(3)未定义直接赋值的变量

所有未定义直接赋值的变量,会自动声明为全局变量。

function func() {
    a = 1;
}

func();

console.log(a); // 1
console.log(window.a); // 1

以上代码中,变量a在函数func中直接被赋值,没有定义,那么变量a会自动挂到window对象上,用于全局作用域,在全局作用域下可被访问。

2. 局部作用域

局部作用域相当于函数作用域,指函数内部的空间。函数内部的变量,在外部无法访问。

function func() {
    let a = 1;
}

console.log(a); // a is not defined

3. 块级作用域

块级作用域指被大括号{}包裹在内的部分。比如,如果if语句使用{}包裹,就生成了一个块级作用域。

if (true) {
    let a = 1;
}

console.log(a); // a is not defined

另外,也可以直接使用{}包裹代码,形成块级作用域。

{
    let a = 1;
}

console.log(a); // a is not defined

2. 作用域链

当在某个函数的内部作用域中查找某个变量时,如果没有找到就会到他的父级作用域中查找,如果父级也没找到就会接着一层一层的向上寻找,直到找到全局作用域还是没找到的话,就结束寻找,认定为变量未定义。这种一层一层的作用域嵌套关系,就是作用域链

let a = 1;
function func1() {
    let b = 2;
    function func2() {
        let c = 3;
        console.log(a); // 全局作用域的变量
    }
    func2();
}
func1(); // 1

作用域存在的意义

变量隔离,不同作用域下同名变量不会出现冲突。