zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Ext.grid.行相关
    FORM 布局
    rs.open sql,conn,1,1全接触
    arguments.callee
    Ext.window.MessageBox xtype: messagebox ; Ext.Msg Ext.MessageBox
    Ext.grid.column
    sql
    正则
    转JS
    quickFilters
  • 原文地址:https://www.cnblogs.com/qingfengyuan/p/12966870.html
Copyright © 2011-2022 走看看