js作用域（函数作用域、变量作用域、作用域链、with语句）

╰+哭是因爲堅強的太久メ 2022-06-16 09:50 368阅读 0赞

一：函数作用域

先看一小段代码：

var scope="global";  
    function t(){   
        console.log(scope);  
        var scope="local"  
        console.log(scope);  
    }  
    t();

第一句输出的是： “undefined”，而不是 “global”  
第二讲输出的是：”local”  
你可能会认为第一句会输出：”global”,因为代码还没执行var scope=”local”,所以肯定会输出“global”。我说这想法完全没错，只不过用错了对象。

我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。  
在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

函数作用域：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。  
所以根据函数作用域的意思，可以将上述代码重写如下：

var scope="global";  
    function t(){  
        var scope;  
        console.log(scope);  
        scope="local"  
        console.log(scope);  
    }  
    t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。  
为什么说Js没有块级作用域呢，有以下代码为证：

var name="global";  
    if(true){  
        var name="local";  
        console.log(name)  
    }  
    console.log(name);

都输出是“local”,如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

function t(flag){   
        if(flag){  
            var s="ifscope";  
            for(var i=0;i<2;i++)   
                ;  
        }  
        console.log(i);  
        console.log(s);  
    }  
    t(true);

输出：2 ”ifscope”

二、变量作用域

function t(flag){   
        if(flag){  
            s="ifscope";  
            for(var i=0;i<2;i++)   
                ;  
        }  
        console.log(i);  
    }  
    t(true);  
    console.log(s);

输出：2 ”ifscope”  
这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。  
所以你用console.log(window.s)也是会输出“ifconfig”  
三、作用链域

name="lwy";  
    function t(){   
        var name="tlwy";  
        function s(){   
            var name="slwy";  
            console.log(name);  
        }  
        function ss(){   
            console.log(name);  
        }  
        s();  
        ss();  
    }  
    t();

输出：slwy、tlwy  
执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy”

<html>  
    <head>  
    <script type="text/javascript"> function buttonInit(){ for(var i=1;i<4;i++){ var b=document.getElementById("button"+i); b.addEventListener("click",function(){ alert("Button"+i);},false); } } window.onload=buttonInit; </script>  
    </head>  
    <body>  
    <button id="button1">Button1</button>  
    <button id="button2">Button2</button>  
    <button id="button3">Button3</button>  
    </body>  
    </html>

当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？  
三个按钮都是弹出：”Button4”  
当注册事件结束后，i的值为4，当点击按钮时，事件函数即function()\{ alert(“Button”+i);\}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，  
所以弹出”button4“。  
四：with语句  
说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。  
看下面代码：

person={
       name:"yhb",age:22,height:175,wife:{
       name:"lwy",age:21}};  
    with(person.wife){  
        console.log(name);  
    }

with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy”.  
with语句结束后，作用域链恢复正常。