javascript - 下面的代码将向控制台输出什么？原因是什么？

Question

这是一个面试问题，我很好奇答案。

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

Answer 1

这是控制台输出:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

这是 Javascript function closure 的演示，这是编码面试中非常常见的问题。外部函数可以访问对象范围，该范围由 this 引用并分配给变量 self。因此，访问属性 foo 的两次调用都按预期工作，

然后，在这个函数内部定义了一个内部函数。该内部函数无法访问对象作用域，但可以访问其父函数的作用域，其中定义了self变量。可以说，这是闭包的闭包部分。因此，当我们尝试从内部函数访问 self.foo 时，我们可以访问它 - 因为它是在与调用函数相同的词法范围中定义的。另一方面，this.foo 存在于不同的范围内，因此无法访问。