首先,看看下面一个js例子,你觉得会输出什么呢?
function fn(a){ a(); function a(){ console.log(2); } var a = function(){ console.log(3); }}fn(function(){console.log(1)});
如果你看不出来,可以copy到浏览器中试试喔。
本人已经在IE,Firefox,360浏览器下测试过,这段代码都输出2。这时,一些人就会有疑问,为什么呢,为什么不是1和3呢,其实,是这样的:
var a = function(){console.log(3);}是预先"编译"好的,参数function(){console.log(1)}是在创建执行环境时创建的,而function a(){ console.log(2);}是在运行时即时"编译"的,所以,参数a覆盖var a, function a()又覆盖参数a,所以最后打印2。可明白?
谢谢1楼和2楼的建议,纠正之前“编译”的说法,因为是不需要“编译”,它是通过js解释器解释执行的。这段代码的执行顺序如下:
function fn(a){ var a; function a(){ console.log(2); } a(); a = function(){ console.log(3); }}fn(function(){console.log(1)});
再看看,下面一个例子,你能猜出结果么?
function fn(a) { a(); var a = function () { console.log(3); } } fn(function () { console.log(1) });
结果是1,相信你也能想到,道理跟前面一样。
再看下面的例子。
function fn(a) { var a = function () { console.log(3); } a(); }fn(function () { console.log(1) });
最后的结果是3,为什么呢,虽然参数a会在创建执行环境时覆盖var a,但是,因为运行时执行a()之前,又执行了一遍var a = function () { console.log(3);},
再次编译,又覆盖参数a,所以最后打印3。(这是我的理解,有不同意见,可以在下面发表评论喔)
希望对你有用喔,有问题可以评论一起交流哦~