JavaScript的变量预解析特性

JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?事实上或某种现象证明并不是这样的,通过《JavaScript权威指南》及网上相关资料了解到,JavaScript有“预解析”行为。理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在。为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正。池州市贲生工艺品

我们先来看一个例子:

var lastName = "Gonn";
(function DisplayLastName() {
	console.log(lastName);
	var lastName = "Zeng";
	console.log(lastName);
})();//谁能猜出结果是什么?

感觉应该是输出 Gonn 再输出 Zeng。

但结果是 undefined Zeng。为什么呢?

Javascript在执行前会进行类似“预解析”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用var申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。

在解释执行阶段,遇到变量需要解析时,会首先从当前执行环境的活动对象中查找,如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找,否则将会按照作用域链查找。遇到var a = …这样的语句时会给相应的变量进行赋值(注意:变量的赋值是在解释执行阶段完成的,如果在这之前使用变量,它的值会是undefined)。

也就是说,解释执行前,先做一遍预解析,给var变量赋值为undefined。当局部变量有var时,这时lastName在函数内部作为局部变量存在。如果上述函数中var lastName=改为lastName=,结果就不一样了。这时预解析时就不会作为局部变量,赋值为undefined。

下面再举一些例子说明下。

function handle(){
	alert(arg1);
} ;  

handle();
var arg1 = 20;

结果是:undefined。因为在解释到 var arg1 = 20; 这句之前就打印了arg1的值,此时尚未给arg1赋值。

handle();  

var handle = function(){
	alert(20);
};

结果:handle is not a function. 因为在执行handle()这句时,并没有给handle赋值–函数定义。如果改为:

handle();  

var handle = function handle (){
	alert(20);
};

在IE下会弹出对话框,因为它将var handle…这句同时解释为函数定义,而函数定义在预编译时就应经有值,所以可以执行。但在FF中,依然只解释为一个变量申明,知道执行到这一句时才会赋值。

正因为如此应避免在变量被初始化之前使用变量。

try/catch的例外,有如下代码:

try{
	alert(var1);
	alert(varFun);
	alert(Fun);
	var var1 = 1;  

	var varFun = function(){};  

	function Fun(){
		alert(1);
	}
}
catch(e){
	function Fun(){
		alert(2);
	}
}

以上代码在IE、Chrome中的运行结果是undefined、undefined和fuction(){alert(2);},而在Firefox中的结果是undefined、undefined和“Fun未定义”报错。还不太清楚Firefox对于try/catch的“预解析”是怎么处理的。

1. 如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先定义函数,然后才调用它。

function showMsg()
{
    alert(‘This is message‘);
}
showMsg(); // This is message

2. 我们也知道函数可以定义在调用代码之后,如下代码也是能正常工作的。看起来调用showMsg()的时候showMsg()还是没有定义的,但能正常工作,则表明JavaScript是“预解析”的。

showMsg(); // This is message
function showMsg()
{
    alert(‘This is message‘);
}

3. 上面是函数的例子,下面再来一个普通变量的例子。以下例子运行将会弹出undefined,表明第一句的msg已经是定义了,只是没有初始化,它与var msg; alert(msg);是一样的。如果你把下面第二句注释掉,则会报“msg未定义”错误。这亦表明JavaScript是“预解析”的。

alert(msg); //undefined
var msg=‘This is message‘;

4. 再来看一个例子,加深对JavaScript“预解析”印象。以下代码你将看到两次弹出的对话框都是显示This is message 2,为什么会这样呢?其实下面一前一后定义了两个同名函数,后面的showMsg()覆盖了前面定义的(在JavaScript中,同名变量一样会存在覆盖问题),等于第一个showMsg()报废了。为什么第二次调用的showMsg()不是调用它上面定义的那个message 1函数呢?这再次证明JavaScript有“预解析”行为。

showMsg(); // This is message 2
function showMsg()
{
    alert(‘This is message 1‘);
}
showMsg(); // This is message 2
function showMsg()
{
    alert(‘This is message 2‘);
}

5. JavaScript“预解析”是把变量或函数预解析到它们能调用的环境(变量运行时环境)中。如下代码看起来alert(msg)之前有看到msg的定义,但是程序运行还是报“msg未定义”错误,这是因为函数里定义的变量是函数的私有变量,外面不能直接调用,这表明JavaScript“预解析”并不是把所有定义的变量统一解析到一个全局对象中,比如window。

function showMsg()
{
    var msg=‘This is message‘;
}
alert(msg); // msg未定义

6. JavaScript“预解析”是分段进行的,准确说是分<script>块进行的。以下代码出现在同一个页面的两个脚本块中,同时定义了三个同名函数。程序运行结果表明第二个脚本块的showMsg()没有覆盖前面两个showMsg(),而第一个脚本块的第二个showMsg()则覆盖了第一个showMsg()。

<body>
<script type="text/javascript">
showMsg(); //This is message 2
function showMsg()
{
    alert(‘This is message 1‘);
}
function showMsg()
{
    alert(‘This is message 2‘);
}
</script>

<script type="text/javascript">
function showMsg()
{
    alert(‘This is message 3‘);
}
</script>
</body>
时间: 2024-10-28 22:13:08

JavaScript的变量预解析特性的相关文章

0143 JavaScript预解析:概念、变量预解析、函数预解析、函数表达式声明函数问题

4.1 预解析的相关概念 JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的. JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析 和 代码执行. 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义. [提升到当前作用域的最顶部.] 代码执行: 从上到下执行JS语句. 预解析会把变量和函数的声明在代码执行之前执行完成.[声明提前,赋值留在原地.] 4.

vars 变量预解析

JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为称为 hoisting(悬置/置顶解析/预解析).当你使用了一个变量,然后不久在函数中又重新声明的话,就可能产生逻辑错误.对于JavaScript,只要你的变量是在同一个作用域中(同一函数),它都被当做是声明的,即使是它在var声明前使用的时候.看下面这个例子: JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为

从var func=function 和 function func()区别谈Javascript的预解析机制

var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function xx(){return 5;} } 不会出错,而 { var k = xx(); var xx = function(){return 5;} } 则会出错. 为什么会这样呢?这就要引出javascript中的预解析机制来解释了. JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个

JS变量、作用域、 内存(含 预解析面试题)

一.变量 1. 变量 命名: 变量名以$.字母.下划线开头 驼峰命名法 变量名要有意义 2. 变量 声明 声明多个变量:var message, name, age; 重复声明无效,只看第一次声明[特殊:函数内形参 与 函数内的函数名(函数声明方式创建的函数) 重名,以函数名声明为准] <script> console.log(typeof a); function a() {} var a = 10; </script> // 输出:function <script>

函数和变量中的预解析

1.js引擎运行 js 分为两步,预解析   代码执行 (1)预解析 js 引擎会把 js 里面的所有的 var 还有 function 提升到当前作用域的最前面 (2)代码执行 按照代码书写的顺序 从上往下执行 2.预解析分为 变量预解析(变量提升) 和 函数预解析 (函数提升) (1)变量提升 就是把所有的变量声明提升到当前的作用域最前面   不提升赋值操作 (2)函数提升  就是把所有的函数声明提升到当前作用域的最前面  不调用函数 案例1:(变量提升) console.log(num);

js全局变量与局部变量 预解析与作用域链详解

局部变量和全局变量同名时,会隐藏这个全局变量: 4.变量 关键字: 4.变量 4.1 变量的类型 JS是松散类型的语言 4.2 变量的声明 var 声明是变量的标准声明 var 声明的变量是永久性的,不能用delete运算符删除 全局对象,调用对象初始化时,JS解析器会在相应的代码段里寻找var声明的变量, 然后在全局对象,调用对象中创建相应的属性,此时它是未赋值的(undefined), 当程序执行到相应的var声明代码段时才会给相应对象的属性赋值 重复的声明:根据以上var声明作用的理解,重

作用域,预解析,对象,内置方法 Math Date Array

作用域 一段程序代码中所用到的名字并不总是有效可用的,而限定这个名字(变量)的可用性的代码范围,就是这个名字的作用域,作用域提高了逻辑程序的局部性,增强了可靠性,减少了名字冲突: JavaScript作用域(es6)之前:全局作用域,局部作用域 全局作用域:整个script标签或者是一个单独的JS文件 局部作用域(函数作用域):在函数内部就是作用域: 变量作用域 全局变量:在全局作用域下声明的变量:如果在函数内部没有声明(var)直接赋值的变量也是全局变量 num = 2; 局部变量:在函数内部

javascript的预解析与变量提升

JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢? 事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有“预解析”行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正. (1)如果JavaScript仅是运行时自上往下

死磕JavaScript变量和函数的预解析

预解析:在解析代码之前做一些处理 预解析做什么处理? 把变量的声明提前了----提前到当前所在的作用域的最上面 函数的声明也会被提前---提前到当前所在的作用域的最上面 那么我们现在开始举几个例子 1.观察下方的第一个红框中的代码,猜猜它的结果是什么? 通过运行我们发现,代码竟然神奇的没有报错?但是输出的也不是下面赋值的1而是undefined,这到底是为什么呢?其实这就是因为js引擎的预解析将num这个变量的声明提前到作用域的最上方(num是全局变量所以提前到最外层也就是script标签内的最