JS声明变量背后的编译原理剖析
更新时间：2012年12月28日 15:02:25 作者：
只要是写过点JS代码，很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢？那就一步步通过代码来讲起,需要了解的朋友研究下哦
只要是写过点JS代码，很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢？那就一步步通过代码来讲起。
x = 1;
alert(x);
var y = function() {
alert(x);
var x = 2;
alert(x);
}
y();
上面的代码也会你答对了它会分别输出：1,undefined,2。对于我来说，第一反应它会输出：1,1,2。为什么第二个会输出undefined？在上面我明确定义了一个全局变量x，为何找不到？
那是因为：js编译器在执行这个y函数的时候，会把把它body里面的声明变量提前到最前面进行声明。比如：var x=2; 编译器先会在body最前面进行var x 声明。其实上面的代码等同于下面的这段代码：
x = 1;
alert(x);
var y = function() {<BR>var x;//此时x还未赋值，所以为undefined。
alert(x);
x = 2;
alert(x);
}
y();
所以也就不难理解x=undefined的了.但是如果把var x = 2;这段代码给删掉，在内部它没有进行var声明。它会一直沿着作用域向上找，此时的x 就为全局x.
接下来再看一个更有趣的例子。
var a = 1;
function b() {
a = 10;
return;
}
b();
alert(a);
///////////////////////////////////
var a = 1;
function b() {
a = 10;
return;
function a() {}
} b(); alert(a);
例子很简单。第一个例子为输出10，第二个会输出1。这是为什么呢？况且第二个例子我都return 了。按理都应当输出10才对呀！那时因为JS编译器在背后作怪。
两段代码差别就是第二个例子多了个function a(){};便这个函数体里面什么也没有，并且也没有对它进行任何调用。
其实JS编译器在背后会把function a() {}编译成 var a=function (){}。此时对于函数内部也有一个a=10; 外面的a些也还是1;根据JS作用域。会先找内部的a,如果找不到再向上一级一级找。
最张alert(a) 就会显示1;
复制代码 代码如下:
x = 1;
alert(x);
var y = function() {
alert(x);
var x = 2;
alert(x);
}
y();
上面的代码也会你答对了它会分别输出：1,undefined,2。对于我来说，第一反应它会输出：1,1,2。为什么第二个会输出undefined？在上面我明确定义了一个全局变量x，为何找不到？
那是因为：js编译器在执行这个y函数的时候，会把把它body里面的声明变量提前到最前面进行声明。比如：var x=2; 编译器先会在body最前面进行var x 声明。其实上面的代码等同于下面的这段代码：
复制代码 代码如下:
x = 1;
alert(x);
var y = function() {<BR>var x;//此时x还未赋值，所以为undefined。
alert(x);
x = 2;
alert(x);
}
y();
所以也就不难理解x=undefined的了.但是如果把var x = 2;这段代码给删掉，在内部它没有进行var声明。它会一直沿着作用域向上找，此时的x 就为全局x.
接下来再看一个更有趣的例子。
复制代码 代码如下:
var a = 1;
function b() {
a = 10;
return;
}
b();
alert(a);
///////////////////////////////////
var a = 1;
function b() {
a = 10;
return;
function a() {}
} b(); alert(a);
例子很简单。第一个例子为输出10，第二个会输出1。这是为什么呢？况且第二个例子我都return 了。按理都应当输出10才对呀！那时因为JS编译器在背后作怪。
两段代码差别就是第二个例子多了个function a(){};便这个函数体里面什么也没有，并且也没有对它进行任何调用。
其实JS编译器在背后会把function a() {}编译成 var a=function (){}。此时对于函数内部也有一个a=10; 外面的a些也还是1;根据JS作用域。会先找内部的a,如果找不到再向上一级一级找。
最张alert(a) 就会显示1;
相关文章
本文整理了一些页面、鼠标、表单等等事件，以备开发者在项目中使用，感兴趣的朋友可以参考下哈，希望对你学习有所帮助2013-04-04
js Math 对象的方法向上取整、向下取整、四舍五入等等,数字运算经常会用到，需要的朋友可以参考下2013-09-09
主要是为了使自己更加熟练操作DOM，记录自己的点滴，规范自己的代码！希望大家共同进步！2011-04-04
这篇文章主要介绍了js图片预加载示例,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了JS实现的一个随机点名功能,逻辑简单,用在班级或活动时是个不错的选择,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JavaScript构造函数及new运算符，通过认识new运算符，代码解读，重点解析，new存在的意义，总结等全面介绍了知识点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
学了这么久，你真的了解javascript吗？很多不知道的小白总是把它和java联系在一起，在这里阿牛很负责任的告诉你们，两者没有任何关系，今天就来带你们一起揭开javascript的神秘面纱2022-03-03
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
这篇文章主要介绍了JavaScript onkeypress事件入门实例,onkeypress事件捕捉按下或按住一个键盘按键的情况,需要的朋友可以参考下2014-10-10
本文是对javascript中的内存管理进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
java script编程起步（第三课）...2007-01-01
最新评论