ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【学习笔记】变量的作用域

2022-09-14 19:04:21  阅读:257  来源: 互联网

标签:function console 变量 作用域 笔记 alert var log


【学习笔记】变量的作用域

 

  • 在JavaScript中,var定义的变量实际是有作用域的。

假设在函数体中声明,则在函数体外不可以使用,会报错。如果非要使用,要使用闭包

<script>
    function zyy(){
        var x = 1;
    }
    x = x + 1;
</script>

image-20220914163740133

 

  • 如果两个函数使用了相同的变量名,只要在函数内部,就不冲突

function zyy(){
    var x = 1;
}
function zyy1(){
    var x = 1;
}

 

  • 内部函数可以访问外部函数的成员,反之则不行。

function zyy(){
    var x = 1;
    function zyy1(){
        var y = x+1;
    }
    zyy1();
    var z = y + 1;
}

image-20220914164328126

这个y就是 var z = y + 1;的y

 

  • 假设内部函数变量和外部函数变量重名

    function zyy(){
        var x = 1;
        function zyy1(){
            var x = 'A';
            console.log('inner' + x);
        }
    ​
        console.log('outer' + x);
        zyy1()
    }

    image-20220914164901171

    在JavaScript中函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。

    从这个例子看就是,zyy1() 屏蔽了 zyy() 的 变量x

 

  • 提升变量的作用域

    function zyy(){
        var x = x + y;
        console.log(x);
        var y = 1;
        
    }

    image-20220914165542593

    可以看到结果是 xundefined

    js执行引擎,自动提升了y的声明,但不会提升y的赋值。等价于下面的代码

    function zyy(){
        var y;
        var x = "x" + y;
        console.log(x);
        y = 1;
    ​
    }

    所以在js中写变量的习惯是,把所有的声明写在前面,养成规范,便于代码维护

    function zyy(){
        var x,
            y = x + 1,
            z,
            a;
        
        //之后随意用,如果要加变量,就加在前面
    }

 

  • 全局函数

    全局变量在函数内部和外部都可使用

    var x = 1;
    function zyy(){
        console.log(x)
    }
    zyy();
    console.log(x);

 

 

  • 全局对象window

    默认所有的全局变量都自动绑定在window对象下

    var x = 1;
    console.log(x);
    console.log(window.x);

    image-20220914171524744

    alert() 这个函数本身也是一个window变量

    var x = 1;
    window.alert(window.x);
    ​
    var old_alert = window.alert;
    ​
    old_alert(window.x);

    这时候可以弹出两个弹框,一个是alert,一个是old_alert

    我们还可以重新定义alert,

    window.alert = function () {
        
    }
    window.alert(132);

    132没有弹出来,alert失效了,因为我们手动定义了这个alert,把之前的给顶掉了

     

    这些说明了JavaScript实际上只有一个全局作用域,任何变量(包括函数)没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错:RefrenceError

     

    所以我们要养成规范:由于我们所有的全局变量都会绑定到window上,如果不同的js文件使用了相同的全局变量,就会产生冲突,要解决冲突,就要定义一个唯一的全局对象

    //唯一全局对象
    var Wzt = {}
    ​
    //全局变量
    Wzt.name = 'wzt';
    Wzt.add = function (a,b) {
        return a + b;
    }

    把自己的变量和函数全部放入自己定义的全局对象中,降低全局命名冲突

     

  • 局部作用域 let

    function aaa() {
        for (var i = 0; i <= 100; i++) {
            console.log(i)
        }
        console.log(i+1);
    }

    image-20220914182900945

    出现了问题:i 出了这个作用域还可以使用,

    所以我们要使用let定义局部作用域的变量,解决作用域冲突问题

    function aaa() {
        for (let i = 0; i < 100; i++) {
            console.log(i)
        }
        console.log(i+1);
    }

    image-20220914183127011

    当把var换成let以后,出了作用域i就没有用了

 

  • 常量

    在ES6之前,全部用大写字母定义的变量就是常量,并且建议不要修改这样的值

    var PI = '3.14';
    ​
    console.log(PI);
    PI = '111';
    console.log(PI);

    我们可以发现,所谓的常量是可以修改的,并且没有报错。

    在ES6之后,引入了const关键字,用来定义常量

    const PI = '3.14';
    ​
    console.log(PI);
    ​
    PI = "111";

    image-20220914184123750

    当我们在试图去修改这个常量时就会报错

 

 

标签:function,console,变量,作用域,笔记,alert,var,log
来源: https://www.cnblogs.com/wztblogs/p/16694164.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有