JavaScript作用域和作用域链

Posted 2020-12-22 清风园

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript作用域和作用域链相关的知识，希望对你有一定的参考价值。

javascript作用域：就是代码名字（变量）在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突

js的作用域（es6）之前：全局作用域局部作用域

 <script>
  //全局作用域： 整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);

 //局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);

        }
        fn();
    </script>

变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量

全局变量：在全局作用域下的变量在全局下都可以使用

注意如果在函数内部没有声明直接赋值的变量也属于全局变量

 <script>
       
        var num = 10; // num就是一个全局变量
        console.log(num);

        function fn() {
            console.log(num);

        }
        fn();
        // console.log(aru);

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

<script>
        // js中没有块级作用域  js的作用域： 全局作用域  局部作用域  现阶段我们js 没有 块级作用域
        // 我们js 也是在 es6 的时候新增的块级作用域
        // 块级作用域 {}   if {}  for {}
        // java 
        // if(xx) {
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);
    </script>

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值这种结构我们称为作用域链就近原则

 <script>
      
        var num = 10;

        function fn() { // 外部函数
            var num = 20;

            function fun() { // 内部函数
                console.log(num);

            }
            fun();
        }
        fn();
    </script>

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 案例1 ： 结果是几？
        function f1() {
            var num = 123;

            function f2() {
                var num = 0;
                console.log(num); // 站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        f1();
        // 案例2 ：结果是几？
        var a = 1;

        function fn1() {
            var a = 2;
            var b = ‘22‘;
            fn2();

            function fn2() {
                var a = 3;
                fn3();

                function fn3() {
                    var a = 4;
                    console.log(a); //a的值 ?
                    console.log(b); //b的值 ?
                }
            }
        }
        fn1();
    </script>
</head>

<body>

</body>

</html>

以上是关于JavaScript作用域和作用域链的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript作用域和作用域链

JavaScript高级JavaScript的运行原理：V8引擎，JS代码执行原理，作用域和作用域链面试题

JavaScript 开发进阶：理解 JavaScript 作用域和作用域链

javascript数据类型--- 函数对象之作用域和作用域链

JavaScript 开发进阶：理解 JavaScript 作用域和作用域链