关于js全局变量和局部变量以及点击事件能否改变全局变量

清疚 2022-12-28 07:48 126阅读 0赞

## 1.定义函数,普通函数不影响全局变量 ##

var num =1;
            function a() {
                num=2;
            }
    
            function b() {
                console.log(num);
            }
    
            b();//输出1

<div></div>
        <span></span>
        <script>
            var num = 1;
    
            var div = document.querySelector('div');
            div.addEventListener('click', function() {
                num=2;
            })
    
            function b() {
                num=3;
            }
    
            var span = document.querySelector('span');
            span.addEventListener('click', function() {
               console.log(num);
            })//不点击div 输出1

## 2.涉及点击事件 异步 ##

普通函数算主线程执行栈

var num = 1;
    
            var div = document.querySelector('div');
            div.addEventListener('click', function() {
                num=2;
            })
    
            function b() {
                console.log(num);
            }
    
            b();//输出1

点击事件后 全局变量num发生变化

<div></div>
        <span></span>
        <script>
            var num = 1;
    
            var div = document.querySelector('div');
            div.addEventListener('click', function() {
                num=2;
            })
    
            var span = document.querySelector('span');
            span.addEventListener('click', function() {
               console.log(num);
            })
    //点击div后再点击span  输出  2
        </script>

## 3.局部变量重复定义 ##

<div></div>
        <span></span>
        <script>
            var num = 1;
    
            var div = document.querySelector('div');
            div.addEventListener('click', function() {
                num=2;
            })
    
            function b() {
                
                console.log(num);
                var num =4
                
            }
    
            b();//这里主线栈输出undefined,同时也不会影响全局变量
    
            var span = document.querySelector('span');
            span.addEventListener('click', function() {
               console.log(num);
            })

（1）啥也不干 输出undefined  
（2）点击div再点击span 输出 undefined 和 2  
（3）直接点击span 输出 undefined 和 1