JavaScript 学习笔记之变量及其作用域

2019-11-20 13:24:33

字体：大中小

来源：转载

供稿：网友

一、变量

ECMAscript变量是松散型变量，所谓松散型变量，就是变量名称可以保存任何类型的数据，每个变量仅仅是一个用于保存值的占位符。

定义：var firstDemo;

二、变量的作用域

2.1基本概念

使用var 定义变量：定义该变量的作用域的局部变量，这种定义变量的方法也被成为显式声明。

这么说不理解的话可以看看下面这个简单粗暴的例子：

复制代码代码如下:

test();
function test(){
var firstDemo="hello";//定义局部变量
    alert(firstDemo);//hello
}
 test();
 function test(){
    var firstDemo="hello";//定义局部变量firstDemo            
 }    
 alert(firstDemo);//报错，firstDemo is not define

由以上两个例子可以看出，如果在一个函数中使用var 定义一个变量，那么该变量在函数退出后会被销毁。

省略var 定义变量：只要调用一次定义该变量的函数，全局范围内都可访问该变量。这种定义变量的方法也被成为隐式声明

复制代码代码如下:

 <script type="text/javascript">
        test();
        alert(firstDemo);   //hello 
        function test(){
             firstDemo="hello";            
        }        
    </script>

tips:显式声明的变量是在预编译时就已经编译到调用对象中了，（例如var t=1;预编译时执行var t;解释时执行t=1;）不同于隐式声明变量在解释时才被定义为全局变量。

弄清楚变量的作用域，可以帮助我们思考如何合理声明变量，这样既减小了不必要的内存开销，同时能很大程度地避免变量重复定义而覆盖先前定义的变量所造成的麻烦。

2.2作用域分析

复制代码代码如下:

<script type="text/javascript">
    function demoFunction(s){ 
        document.writeln(s) 
    } 
    var i=0; //定义全局变量 
    function test(){ 
        demoFunction(i); 
        function innerFunction(){ 
            var i = 1; //定义局部变量 
            demoFunction(i); 
        } 
        innerFunction(); 
        demoFunction(i); 
   } 
   test();    
</script>

输出结果：0 1 0

复制代码代码如下:

<script type="text/javascript">
　　function demoFunction(s){ 
　　　　document.writeln(s) 
} 
　　var i=0; 
　　function test(){ 
　　　　demoFunction(i); 
　　　　function innerFunction(){ 
　　　　　　demoFunction(i); 
　　　　　　var i=1; 
　　　　demoFunction(i);
　　　　} 
　　　　innerFunction(); 
　　　　demoFunction(i);
} 
test();
</script>