JavaScript[15] -- 做用域

时间 2019-11-10

原文原文链接

全局做用域

在<script></script>标签里，即为全局做用域。
在函数体以外,<script>标签内声明的变量就是全局变量。

全局做用域内的变量能够在任何其余的做用域访问和修改。函数

<script>
    vara = 0;
    function func1(){
        a = 1;
        console.log(a);     
        console.log(b);     
    };
    func1();     // 1  b is not defined
</script>

<script>
    varb = 2;        
    func1();    // 1 2
</script>

局部做用域

一个函数体就是一个新的局部做用域。
函数内部定义的变量在局部做用域内。
函数外部做用域不能访问内部做用域的变量。

每一个函数有不一样的做用域,在其余函数中是不能够访问的(一个函数访问另外一个函数变量的时候,经过传递参数)。this

<script>       
    function func1(){
        var a = 0;  
    };

    function func2(){
        var b = 2;             
        console.log(b);
        console.log(a);
    };

    func2();    // 2   a is not defined

    console.log(b); // b is not defined 
</script>

做用域链

函数做用域里面访问一个变量,先从自身开始找,若是没有,就依次往上一级做用域查找,直到全局做用域,全局做用没有就报错。

当咱们处于某一个做用域里面,修改某个变量值的时,先修改自身做用域,若是没有就依次修改上一个做用域。code

<script>       
    var a = 10;
    var b = 30;
    function func(){
        var a = 20; // 声明局部变量a
        a = 2;      // 改变局部变量a
        b = 3;      // 本做用域中无b变量，会依次更改上层做用域中的变量
        c = 4;      // 给未被声明的变量赋值，会泄露带window中
        d = 5;      // （未报错？）本做用域中无d变量，会依次更改上层做用域中的变量,所有没有则报错
        console.log(a);
    };

    console.log(b);     // 30       全局变量b
    // console.log(c);     //         c is not defined
    func();             // 2        局部变量a
    console.log(a);     // 10       全局变量a
    console.log(b);     // 3        被下层做用域修改的变量b
    console.log(c);     // 4        被泄露到window中的变量c
</script>

delete

删除未声明的变量,可是不能够删除已经声明的变量对象

<script>       
    var a = 10;
    b = 30;
   
    delete a;
    delete b;

    console.log(a);     // 10
    console.log(b);     // b is not defined
</script>

块做用域（ES6新增）

let , const 不单单是声明变量的区别,它们还有支持块做用域的机制(注意:不是大括号,if,switch,for产生的块)

let,consts声明的变量不会泄露到顶层对象，只能声明以后再使用,var能够先赋值,在声明ip

<script>
    if(true){
        var a = 10;
        let b = 20;
        const c = 30;
    };

    console.log(a);     // 10
    console.log(b);     // b is not defined
    console.log(c);     // b is not defined
</script>

注意

多个做用域问题作用域

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<script>

    var aDiv = document.getElementsByTagName("div");

    for(var i = 0; i < 5; i++){  

        aDiv[i].index = i;      // 解决i使用var声明时，在函数做用域中的变量i一直是最后执行结果的问题

        aDiv[i].onclick = function(){     

            console.log(i);             // i使用var声明，结果一直都是5， i使用let声明，结果是0 1 2 3 4 
                                       // 函数体和for循环不处于同一个做用域，需等前一个做用域执行完，才会执行本做用域
            console.log(this.index);    // 0 1 2 3 4 
        }
    }

</script>