JavaScript 变量定义与作用域机制详解

JavaScript 变量定义

一、变量

在 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>

提示：显式声明的变量在预编译阶段即被编译至调用对象中（例如 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>

输出结果：

A、0 0 1 0

B、0 undefined 1 0

C、0 报错i is not defined

各位可以猜测一下结果是哪一个，原因会在留言里详解。

以上就是本文的全部内容了，简单的说任何程序语言中变量的作用域都是一个很关键的细节。JS中变量的作用域相对与JAVA、C这类语言显得更自由，一个很大的特征就是JS变量没有块级作用域，函数中的变量在整个函数都中有效。