javascript的变量范围

javascript里的变量范围一直比较搞脑子，其实弄懂了一点也不复杂

入门知识

在了解以前，须要看懂如下2个语句

var left1="right";
left2="right";

我解释一下

1. 第一句的意思是先声明一个名字为left1的变量，声明完后，再将值“right”赋给这个left1变量
2. 第二句的意思是，将值“right”赋给名字为left2的变量，并无“声明”这个动做，须要注意如下几点：
3. 在赋值前，若是并无写过声明变量left2的语句(即 “var left2;”)，则javascript会隐性的声明此变量,而后再进行赋值

做用域范围

在javascript中，一个做用域里的一个变量是全局的，正由于是全局的，因此该变量在其子做用域里也为可见状态 ###变量是全局的（初版）### 输出结果是**oneone**

<script language="javascript">
    var left="one";//声明一个变量，自动变成全局变量
    function f() {   //这个f牌方法算是一个子做用域，因为变量left是全局的，因此在f牌方法下left是能够看见的，也是起做用的
    	document.write(left); //第一个打印出来的one是因该句的做用打出
    }
    f();//调用f牌方法，打印出第一个one
    document.write(left);//第二个打印出来的one是因该句的做用打出
</script>

没什么好说的看注释吧，但我比较好奇，改一下代码看看会怎样，因而有了第二版 ###变量是全局的（第二版）### 输出结果是**twotwo**

<script language="javascript">
    var left="one";
    function f() {   
            left="two";  //我就加了这一行++++++++++++++++++++++++++
            document.write(left); 
    }
    f();//调用f牌方法
    document.write(left);
</script>

这个也很好理解，在打印前，变量left被从新赋值了，继续看下一版吧 ###变量是全局的（第三版）### 输出结果是**twoonetwo**

<script language="javascript">
    var left="one";
    function f() {   
            var left;  //我又加了这一行++++++++++++++++++++++++++
            left="two";  
            document.write(left); //打印出two
    }
    f();//调用f牌方法
    document.write(left);//打印出one
    f();//调用f牌方法，也加了这一行++++++++++++++++++++++++++
</script>

第三版就比较关键了
在子做用域下(就是那个f牌方法体啦)又声明(注意前面有var的哦)了一个同名的变量left
那么该变量left，在当前做用域内（也就是f的方法体内）是全局变量，而之前那个记录为one的left在当前做用域会消失不见，而在外面（f方法体的外面）是可见的，两个left变量相互隔离的
这点必须理解，才能继续 ###喜欢捉迷藏的undefined（初版）### 先从简单的出发

第一段不解释，打印出one
<script language="javascript">
    var left;
    left="one";
    document.write(left);//打印出one
</script>

第二段不解释，打印出undefined
<script language="javascript">
    var left;
    document.write(left);//打印出undefined
</script>


第三段，打印出undefined，由于打印在先，声明在后
<script language="javascript">
    document.write(left);//打印出undefined
    var left;
    left="one";
</script>

第四段，left变量在赋值前没有声明过，javascript会隐形的帮你自动声明一下left
致使第二行的声明语句无效，属于重复声明，但也不报错
<script language="javascript">
    left="one";//两行颠倒后
    var left;    //这行成为无效代码
    document.write(left);//打印出one
</script>

###喜欢捉迷藏的undefined（第二版）### 加入一个子做用域，也就是f方法体

第一段，打印出undefined，left为全局变量，子做用域也属于全局的范围以内
<script language="javascript">
    var left;
    function f() {   
            document.write(left); //打印出undefined
    }
    f();
</script>

第二段，打印出one，理由同上
<script language="javascript">
    var left;
    left="one";
    function f() {   
            document.write(left); //打印出one
    }
    f();
</script>

第三段（关键），打印出undefined，子做用域有声明语句，父做用域的left被隐藏
<script language="javascript">
    var left;
    left="one";
    function f() { 
            var left;//声明一个变量left  
            document.write(left); //打印出undefined
    }
    f();
</script>

第四段，同上，打印出two，子做用域有声明语句，父做用域的left被隐藏
<script language="javascript">
    var left;
    left="one";
    function f() { 
            var left;//声明一个变量left  
            left="two";
            document.write(left); //打印出two
    }
    f();
</script>

第五段（关键），打印出twoone，f方法执行完后，f方法里的left变量被销毁，父做用域的left又回来了
<script language="javascript">
    var left;
    left="one";
    function f() { 
            var left;//声明一个变量left  
            left="two";
            document.write(left); //打印出two
    }
    f();
    document.write(left); //打印出one
</script>

第六段（关键中的关键），打印出undefinedone
只要一个做用域里有var left;语句，不管出如今第一行仍是最后一行，那这个left就是新的子做用域的全局变量
简单点说就是，当程序执行document.write这个命令前，就已经把当前的做用域的声明语句（var开头的语句）先执行了
即使var是写在write后面，但仍是var先执行
<script language="javascript">
    var left;
    left="one";
    function f() { 
            document.write(left); //打印出undefined
            var left;//声明一个变量left
    }
    f();
    document.write(left); //打印出one
</script>

###喜欢捉迷藏的undefined（第三版）### 那开始捉迷藏吧

第一段

<script language="javascript">
    var left;
    left="one";
    function f() { 
            left="two";
            document.write(left); 
    }
    f();
    document.write(left); 
</script>

会打印出什么呢？twotwo

第二段

<script language="javascript">
    var left;
    left="one";
    function f() { 
            left="two";
            document.write(left); 
    }
    document.write(left); 
    f();
</script>

会打印出什么呢？onetwo

第三段

<script language="javascript">
    var left;
    left="one";
    function f() { 
            left="two";
            document.write(left); 
    }
    document.write(left); 
    f();
    document.write(left); 
</script>

会打印出什么呢？onetwotwo

第四段

<script language="javascript">
    var left;
    function f() { 
            document.write(left); 
            left="two";
    }
    document.write(left); 
    f();
    document.write(left); 
</script>

会打印出什么呢？undefinedundefinedtwo

以上四段里，始终只有一个做用域，不存在两个left变量互相打架的状况，应该比较好判断吧，继续看下去 下面是两个做用域了，开始打架了

第五段（请对比第三段）

<script language="javascript">
    var left;
    left="one";
    function f() { 
            var left="two";
            document.write(left); 
    }
    document.write(left); 
    f();
    document.write(left); 
</script>

会打印出什么呢？onetwoone

第六段（请对比第四段）

<script language="javascript">
    var left;
    left="one";
    function f() { 
            var left;
            document.write(left); 
            left="two";
    }
    document.write(left); 
    f();
    document.write(left); 
</script>

会打印出什么呢？oneundefinedone

第六段

<script language="javascript">
    var left;
    left="one";
    function f() { 
            document.write(left); 
            var left="two";
    }
    document.write(left); 
    f();
    document.write(left); 
</script>

会打印出什么呢？oneundefinedone 这段和第五段类似，var left="two"; 能够当作var left;+left="two"; 而var left;会浮到最上面优先执行，因此和第五段类似

第七段

<script language="javascript">
    var left;
    left="one";
    function f() { 
            document.write(left); 
            var left="two";
            document.write(left); 
    }
    document.write(left); 
    f();
    document.write(left); 
</script>

会打印出什么呢？oneundefinedtwoone，不解释