js函数作用域的问题

Question

在看阮一峰老师的es6入门的函数作用域部分时，乱搞出了一段代码，发现了一些问题

var x = 2;
function foo(x, y) {
    var x = 3;
    y();
    console.log(x);
}
foo(1, function() {
            console.log(x);
            x = 5;
        });

结果y中打印出x = 2，为什么不是1或3呢？
foo打印出x = 3

然后稍作调整，

var x = 2;
function foo(x) {
    var x = 3;
    function y () {
        console.log(x);
        x = 5;
    }
    y();
    console.log(x);
}
foo(1);

y中打印的是3，foo中打印的是5，倒是符合预期，这是为什么呢？

Answer 1

因为你上面代码传入参数function的函数作用域为外层，并非foo里面的，你上面的代码可以改写成这样

var x = 2

function test() {
    console.log(x) // 会找到外层的 x = 2
    x = 5
}

function foo(x, y) {
    var x = 3
    y()
    console.log(x) // 会找到foo 函数中的 x = 3
}

foo(1, test)

倘若你要是这样，便可以得到foo里面的x

var x = 2

function test(x) {
    console.log(x) // 会找到外层的 x = 2
    x = 5
}

function foo(x, y) {
    var x = 3
    y(x)
    console.log(x) // 会找到foo 函数中的 x = 3
}

foo(1, test)

希望能帮到你

Answer 2

这样写也许你能明白
var x = 2;
function foo(x, y) {
    var x = 3;
    y();
    console.log(x);//这里是实用的局部变量x
}
foo(1,fun);//这里的fun是实参 是下面的fun，而fun实用的全局的x
function fun() {//定义foo的第二个参数
     console.log(x);//你这里实用的是全局的变量所以是2
     x = 5;
}