js参数作用域

深碍√TFBOYSˉ_ 2021-07-27 01:05 382阅读 0赞

###### 在函数外的变量称为全局变量, 在函数内的变量和参数叫做局部变量,在函数内部定义的变量和参数都不能在函数外被调用 ######

// 在函数外的变量称为全局变量
     var a=0;
     function fn(b){ 
     // 在函数内的变量和参数叫做局部变量
     // 在函数内部定义的变量和参数都不能在函数外被调用
         var c=20;
         console.log(a);//0
         console.log(b);//10
         console.log(c);//20
     }
    
     fn(10);
    console.log(a+'aaaa');//0aaaa
    console.log(b+'bbbb'); 不打印b是局部变量
    console.log(c+'cccc'); 不打印b是局部变量

###### 全局变量可以用于全局存储数据 ######

var a=3;
     function fn1(){ 
         a++;
     }
     fn1();
     fn1();
     console.log(a);//5

###### 全局变量只调用一次,局部变量可以调用多次 ######

1.div为全局变量时

var div;
    function fn(){ 
    	 div="<div style='width:50px;height:50px;background-color:#FF0000'></div>";
    	 return div;
    }
    document.body.innerHTML+=fn();
    document.body.innerHTML+=fn();
    document.body.innerHTML+=fn();
    console.log(div);

打印结果如图所示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70]  
2.div是局部变量时

function fn(){ 
     	var div="<div style='width:50px;height:50px;background-color:#FF0000'></div>";
        return div;
     }
     document.body.innerHTML+=fn();
     document.body.innerHTML+=fn();
     document.body.innerHTML+=fn();
     var div=fn();
     console.log(div);
     var div=fn();
     console.log(div);
     var div=fn();
     console.log(div);

打印结果如图所示:  
![在这里插入图片描述][20200524110049952.png]

###### 全局和局部发生冲突 ######

如果在局部变量使用var定义之前调用时,该变量任然属于局部变量,只不过没有赋值undefined  
只要在该函数中使用了var定义或者参数定义,在该函数中任意位置都是局部变量

1.例一:

var a=3;
    function a(a){ 
       console.log(a);
    }
    
    a(0);//报错

函数存在堆中,所以比变量a先执行,现在a是变量a所以不能传入值,结果如图所示:  
![在这里插入图片描述][20200524144500618.png]  
2.例二:

var a=3;
    function b(a){ 
    	console.log(a);//undefined 在局部变量使用var定义之前调用时,
    	//该变量任然属于局部变量,只不过没有赋值undefined
        var a=5;
    }
    
     b();
     console.log(a);//5 只能打印全局的变量a

3.例三:

function a(a){ 
       var a=5;
        console.log(this.a);//打印的a函数
        console.log(a);//5 
    }
    
    a(0);

结果如图所示:  
![在这里插入图片描述][20200524145337819.png]  
4.例四:  
参数这种局部变量是在进入函数后先被赋值的局部变量,一旦参数名和全局变量重复,该函数中优先使用参数

var a=3;
    function b(a){ 
        console.log(a);//0
    }
    
    b(0);

5.例五:

var name = 'World!';
    (function () { 
        if (typeof name === 'undefined') { 
            var name = 'Jack'
            console.log(name)
        } else { 
            console.log(name)
        }
    
    })()  //执行结果为jack

**注意**:在函数内部一旦使用var定义变量名或者参数名与全局变量名相同  
在该函数中不再使用这个全局变量名,该函数中这个变量名是局部变量

6.例六:

for(var i=0;i<bns.length;i++){ 
        (function(n){ 
            bns[n].onclick=function(){ 
            // 这里打印的n变量就是自执行函数执行瞬间传入的参数值
                console.log(n);
            }
        })(i)
    }

![在这里插入图片描述][2020052415100095.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY1NjM5Mg_size_16_color_FFFFFF_t_70]: /images/20210726/5a87ad121917432aa9a5952cb47f4a05.png
[20200524110049952.png]: /images/20210726/c28448a0f81e4652871880365f1c542c.png
[20200524144500618.png]: /images/20210726/770d3d871d7d44e6893b68ccfb5969dd.png
[20200524145337819.png]: /images/20210726/ec666bd38fe0457eaefb8b3520d363de.png
[2020052415100095.png]: /images/20210726/819eb84511f74075be270577f1382500.png