JavaScript基础语法9-作用域

最新推荐文章于 2025-12-25 09:07:35 发布

原创最新推荐文章于 2025-12-25 09:07:35 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文深入讲解JavaScript中的作用域概念，包括全局作用域、局部作用域（函数作用域）、块级作用域及其区别，并探讨作用域链的工作原理。

1.作用域

<script>

// 1.JavaScript作用域：就是代码名字(变量)在某个范围内起作用和效果

// 目的：为了提高程序的可用性，减少命名冲突

// 2. js的作用域(es6)之前：全局作用域、局部作用域

// 3.全局作用域：整个script标签或者是一个单独的js文件

var num = 10;

console.log(num);

// 4. 局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起作用和效果

function fn(){

num = 20;

console.log(num);

}

fn();

</script>

2.变量的作用域

在JavaScript中，根据作用域的不同，变量分为两种：全局变量、局部变量
全局变量

局部变量

全局变量和局部变量的区别

    <script>
        // 根据作用域的不同，变量分为两种：全局变量、局部变量
        // 1. 全局变量： 在全局作用域下的变量
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num为全局变量
        console.log(num);
        function fn(){
            console.log(num);
        }
        fn();
        // 2. 局部变量：在局部作用域下的变量 就是在函数内部的变量
        // 注意： 函数的形参也可以看做是局部变量
        function fun(){
            var num1 = 10;
            num2 = 20;
        }
        fun();
        // console.log(num1); //num1 is not defined
        console.log(num2);
        // 3.从执行效率来看全局变量和局部变量
        // （1） 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
        // （2） 局部变量 当程序执行完毕就会销毁，比较节约内存资源 
    </script>

块级作用域 { } if { } for { } （ES6才有的）

3.作用域链

<script>

// 作用域链: 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值

// 作用域链采取就近原则

var num = 10;

function fn(){ // 外部函数

var num = 20;

function fun(){ //内部函数

console.log(num);

}

fun();

}

fn();

</script>