JavaScript的作用域

最新推荐文章于 2025-05-25 10:37:12 发布

原创最新推荐文章于 2025-05-25 10:37:12 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

本文深入探讨JavaScript中作用域的概念，包括顶层作用域、代码块作用域、子作用域的访问规则及变量覆盖现象，通过实例解析作用域的层次结构和变量的可见性。

在JavaScript中作用域占很重要的一部分，我们总是看到for，if，function后面跟着{}，所有{}包起来的代码称之

为代码块。每个代码块都有自己的作用域，作用域决定了变量能否被访问（不论修改变量还是读取变量）。作用域就像在做数学题时有时要求xy的取值范围。

[1]在最上层中没有任何{}的作用域为顶层作用域，声明变量是哪里都可以访问的。

var numbers = {a : 2, b : 3};//顶层作用域
function get_sum(a, b){//可以访问
    var result = a + b;//可以访问
    return result;
}
var sum = get_sum(numbers.a, numbers.b);//可以访问
console.log(sum);

[2]代码块是有层级的，在一个代码块里写的新的代码块，后者是前者的子作用域。

if(true){
    //相对于下面的代码块的父作用域
    var x = 5;
    if(x > 0){
        //子作用域
    }
}

[3]子作用域可以访问父作用域的变量，而父作用域无法访问子作用域的变量。

if(true){//父作用域
    var x = 5;
    if(x > 0){//子作用域
        var y = "a";
        console.log(x); //可以访问
        x = 6; //也可以访问
    }
    console.log(y); //不应该在这里再访问了。
}
注：在js中作用域 for,if是可以打印出console.log(y);除了function，父作用域是可以全部访问的。

[4]作用域的父级的父级作用域的变量，该作用域里也可以访问，甚至无穷多级父的作用域里的变量都

可以被访问，这种无穷多级的父，被称之为祖先。

if(true){
    var x = 5;
    if(x > 0){
        console.log(x); //可以访问
        for(var i = 0; i < x; i++){
            console.log(x); //也可以访问
        }
    }
}

[5]顶层作用域是所有作用域的祖先

var x = 5;
function a(x){
    if(x > 0){
        x++;
    }
    console.log(x);//这时访问x不是父作用域的x，而是参数x
}
a(1);
console.log(x);

当子作用域有变量与父作用域重名时，在子作用域里只能访问到子作用域的变量，称之为覆盖。覆盖并不会

改变父作用域的变量。