<center>作用域链</center>

    <script>
        // js中没有块级作用域  js的作用域: 全局作用域  局部作用域  现阶段我们js 没有 块级作用域
        // 我们js 也是在 es6 的时候新增的块级作用域
        // 块级作用域 {}   if {}  for {}
        // java 
        // if(xx) {
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);
		
		      // 变量的作用域: 根据作用域的不同我们变量分为全局变量和局部变量
        // 1. 全局变量: 在全局作用域下的变量 在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);

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

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

        // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
        // 注意: 函数的形参也可以看做是局部变量
        function fun(aru) {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        // console.log(num2);
        // 3. 从执行效率来看全局变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁,比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁, 比较节约内存资源
        
    // 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);
            
        // 5.作用域链  : 内部函数访问外部函数的变量,采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链   就近原则
        var num = 10;

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

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

            }
            fun();
        }
        fn();

      // 案例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();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是对这段代码的优化: 1. 在`<meta>`标签中添加`viewport`,以适应不同设备的屏幕大小。同时,将`<meta>`标签移动到`<title>`标签前面,符合 HTML 5 标准。 ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 将样式表放到`<head>`标签内,并将`type`属性设置为`text/css`,这样浏览器可以正确解析样式表。 ```html <style type="text/css"> /* 样式表代码 */ </style> ``` 3. 将`<script>`标签放到`<body>`标签底部,这样可以让页面更快地加载。 4. 将`<table>`标签的`border`、`cellspacing`和`cellpadding`属性移除,这些属性可以使用 CSS 设置。 5. 将重复的`id`属性`button`修改为`button-calculate`和`button-reset`。 6. 将`<input>`标签的`type`属性设置为`number`,这样用户只能输入数字。 7. 将`onclick`属性修改为`addEventListener()`,这样可以避免全局作用域污染。 8. 将`show()`函数改为`calculate()`,这样更符合函数的语义。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算∑N!</title> <style type="text/css"> table { background-color: #f2f2f2; width: 600px; height: 300px; margin: 20px auto; color: black; border: 20px ridge #9999cc; border-collapse: collapse; } td { font-size: 20px; font-weight: bold; text-align: center; padding: 10px; border: 1px solid #9999cc; } #button-calculate, #button-reset { width: 180px; height: 60px; } </style> </head> <body> <table> <tr> <td colspan="4">计算∑N!</td> </tr> <tr> <td colspan="2">输入整数N的值:</td> <td colspan="2"><input type="number" id="n_text" value="" /></td> </tr> <tr> <td colspan="2">∑N!=</td> <td colspan="2"><input type="text" id="sum_text" value="" /></td> </tr> <tr> <td colspan="2"><input type="button" id="button-calculate" value="计算∑N!" /></td> <td colspan="2"><input type="reset" id="button-reset" value="清空" /></td> </tr> </table> <script src="sum_factorial.js"></script> <script> const buttonCalculate = document.getElementById("button-calculate"); buttonCalculate.addEventListener("click", calculate); function calculate() { const n = parseInt(document.getElementById("n_text").value); const sum = sumFactorial(n); document.getElementById("sum_text").value = sum; } </script> </body> </html> ``` 注意:这里只是对 HTML 和 CSS 的优化,对于`sum_factorial.js`文件中的代码没有进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值