JavaScript中的作用域

最新推荐文章于 2023-12-13 18:14:08 发布

小码哥呀

最新推荐文章于 2023-12-13 18:14:08 发布

阅读量759

点赞数

分类专栏： JavaScript 文章标签：前端 linux

本文链接：https://blog.csdn.net/qq_46112274/article/details/121503529

版权

JavaScript 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

JavaScript中的作用域

1、JavaScript中的作用域
- 1.1、作用域概述
2、变量的作用域
3、作用域链
- 3.1、作用域链案例

1、JavaScript中的作用域

1.1、作用域概述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、JavaScript作用域：就是代码名字（变量）在某个范围内起到的作用和效果，目的是为了提高程序的可靠性
        // 更重要的是减少命名冲突
        // 2、js作用域（es6）之前 ：全局作用域 局部作用域
        // 3、全局作用域：在整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);
        
        // 4、局部作用域（函数作用域）在函数内部就是局部作用域 这个代码的名字只在函数内部起作用和效果
        function fn(){
            // 局部作用域
            var num = 20;
            console.log(num);
            
        }
        fn()
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2、变量的作用域

2.1、变量作用域的分类

在这里插入图片描述

2.2、全局变量

在这里插入图片描述

2.3、局部变量

在这里插入图片描述

2.4、局部变量与全局变量的区别

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量
        // 1、全局变量 ：在全局作用域下的变量，在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10;//num就是一个全局变量
        console.log(num);

        function fn(){
            console.log(num);
            
        }
        fn();
        
        // 2、局部变量 在局部作用域下的变量，后者在函数内部的变量就是 局部变量
        function fun(){
            var num1 = 10; //num就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        console.log(num1);
        console.log(num2);
        // 3、从执行效率来看全局变量和局部变量
        // (1) 全局变量只有在浏览器关闭的时候才会销毁，比价占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁 ，比较节约内存资源
    </script>
</head>
<body>
    
</body>
</html>

3、作用域链

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定那个值，
        // 这种结构我们成为作用域链 就近原则
        var num = 10;
        function fn(){//外部函数
            var num = 20;

            function fun(){//内部函数
                console.log(num);
            }
            fun();
        }
        fn();
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.1、作用域链案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 案例1、结果是几？
        function f1(){
            var num = 123;
            function f2(){
                console.log(num);
            }
            f2();
        }
        var num = 456;
        f1();
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

小码哥呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的作用域

JavaScript中的作用域1、JavaScript中的作用域1.1、作用域概述2、变量的作用域2.1、变量作用域的分类2.2、全局变量2.3、局部变量2.4、局部变量与全局变量的区别3、作用域链3.1、作用域链案例1、JavaScript中的作用域1.1、作用域概述<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor
复制链接

扫一扫