今天遇到一个变量提升的问题,通过看网上的前辈的解说,弄明白了。以下是本人的见解,如果有些不是太对,望前辈指导,欢迎留言。
在运行代码的时候会有三步进行:语法分析,预编译,解释执行。语法分析就是js引擎分析写的代码是否有语法错误,解释执行就是运行写的代码,但是最最要的就是预编译。给我的感觉只要弄明白这个预编译的核心思想就可以解决遇到的问题了。在代码中有直接函数 function aa(){} 和用var 声明的匿名函数,var aa = function(){} 还有变量的声明。在进行代码执行就会进行要预编译,当遇到函数直接量就是function aa(){}就直接提前,用var 声明的变量和函数只把var aa提前,不会初始化,只有在解释执行的时候才会初始化。函数里面的变量也会提升,但是没有用var 声明的变量是隐式声明的全局变量提前都是undefined。以下是测试代码,测试代码是我看前辈的,感觉不错,写出来和大家一块分享以下。
<script language="JavaScript" type="text/javascript">
function myFn(){
alert('Fn1');
};
myFn();
function myFn(){
alert('Fn2');
};
myFn();
</script>
// 两次输出的结果都是Fn2,而不是我们认为的第一次输出Fn1,第二次输出Fn2
测试代码二:
<script type="text/javascript" type="text/javascript">
function myFn(){
alert('Fn1');
};
myFn();
</script>
<script type="text/javascript">
function myFn(){
alert('Fn2');
};
myFn();
</script>
这次第一次输出Fn1,第二次输出Fn2.继续测试,
测试代码三:
<script language="JavaScript" type="text/javascript">
var myFn = function(){alert('Fn1');};
myFn();
myFn = function(){alert('Fn2');};
myFn();
</script>
这次输出的结果是Fn1,Fn2.
测试代码四:
<script language="JavaScript" type="text/javascript">
function myFn(){alert('Fn1');};
myFn();
myFn = function (){alert('Fn2');};
myFn();
</script>
输出Fn1,Fn2.
测试代码五:
<script language="JavaScript" type="text/javascript">
var myFn = function(){alert('Fn1');};
myFn();
function myFn(){alert('Fn2');};
myFn();
</script>
输出Fn1, Fn1
测试代码六:
<script language="JavaScript" type="text/javascript">
myFn();
var myFn = function(){alert('Fn1');};
myFn();
function myFn(){alert('Fn2');};
myFn();
</script>
输出结果是Fn2,Fn1,Fn1
测试代码七:
<script language="JavaScript" type="text/javascript">
myFn();
function myFn(){alert('Fn1');};
</script>
输出Fn1,而不是未定义的函数
测试代码八:
<script language="JavaScript" type="text/javascript">
myFn();
var myFn = function(){alert('Fn1');};
</script>
则提示缺少对象,也就是函数没定义。
测试代码九:
<script language="JavaScript" type="text/javascript">
myFn();
</script>
<script type="text/javascript" type="text/javascript">
function myFn(){alert('Fn1');}
</script>