一个有意思的js实例,你会吗??[原创]

时间:2023-03-08 15:52:08

  首先,看看下面一个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。(这是我的理解,有不同意见,可以在下面发表评论喔)

  希望对你有用喔,有问题可以评论一起交流哦~