作用域和作用域链

Posted 2020-10-31 鱼樱、、

1.作用域的概念和特点
<script type="text/javascript">
 //1.作用域:变量和函数的可访问范围，可见性；
 //创建变量或者函数同时就规定了它的作用域；js没有块级作用域；
 //外部作用域可以不可以访问内部作用域，内部作用域可以访问外部作用域；
 //变量没有在声明或者没有在函数内声明的时候没带var就是全局作用域；
 //window对象的所有属性拥有全局作用域；任何地方都可访问；
 var a =10 ;
 function fn1(){
     console.log(a); //10 (往上不往下找)
 }
 function fn2(){
     var a =20;
     fn1();
 }
 fn2();
</script>

2.变量作用域
<script type="text/javascript">
//变量提升 ，本作用域优先使用变量，如果没有去它父级作用域直到全局作用域查找；
//全局变量会占用内存；变量覆盖应当注意减少使用；
 var a = ‘abcd‘ ;
 function fn(){
     //第一个打印实际上是 把a提升到函数第一行var a; a =‘bcd‘;
     console.log(a); //undefined
     var a = ‘bcd‘;
     console.log(a) //bcd
 }
fn();
console.log(a); //不会干扰 依旧是全局abcd
</script>

3.函数参数的（变量）的机制
<script type="text/javascript">
//
function fn(a,b){
    //第一行相当于var a,b
    console.log(a,b);// 1,2
}
fn(1,2);
console.log(a,b) //报错a,b is not defined
</script>

4.常见函数作用域情况一
<script type="text/javascript">
//简单的往外层找
var a = 1;
function fn(){
    var a = 6;
    function fn2(){
        console.log(a); //6
    }
    return fn2;
}
var test = fn();
test();
</script>

5.常见的函数作用域二
<script type="text/javascript">
//简单的往外层找
var a = 1;
function fn(){
    var a = 6;
    function fn2(){
        console.log(a); //20
    }
    a = 20; //替代a = 6;了
    return fn2;
}
var test = fn();
test();
</script>

作用域链：根据在内部函数可以访问外部函数变量的这种机制（个人理解）