JavaScript 预解析的原理及实现

JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?

事实上或某种现象证明并不是这样的,通过《JavaScript权威指南》及网上相关资料了解到,JavaScript有“预解析”行为。理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在。为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正。
(1)如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先定义函数,然后才调用它。

事实上或某种现象证明并不是这样的,通过《JavaScript权威指南》及网上相关资料了解到,JavaScript有“预解析”行为。理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在。为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正。

复制代码 代码如下:

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

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

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

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

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

复制代码 代码如下:

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

showMsg(); // This is message
function showMsg()
澳门新葡萄京官网注册 ,{
alert(‘This is message’);
}

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

(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有“预解析”行为。

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

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

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

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

复制代码 代码如下:

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

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

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

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

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

复制代码 代码如下:

以上就是JavaScript 预解析的原理及实现,希望对你有帮助。

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>

作者:WebFlash
出处:

发表评论

电子邮件地址不会被公开。 必填项已用*标注