JavaScript—为什么这段代码记录为'；未定义'；但是出现在Chrome控制台上？（关闭）

我举了一个例子：

(function(_stack_){
  var stack = {
    over: 'flow',
    run: function(){
      console.log(this);
    }
  };
  _stack_.app = stack;
  stack.run();
})(this);

app.foo = 'bar';

Chrome控制台中的输出：

但是，为什么会产生这样的结果：

(function(_stack_){
  var stack = {
    over: 'flow',
    run: function(){
      console.log(this.foo); // undefined
    }
  };
  _stack_.app = stack;
  stack.run();
})(this);

app.foo = 'bar';

等于

未定义的
，而它显示在Chrome控制台中

查看

编辑：
我知道它是未定义的，因为在分配
app.foo
之前调用了
stack.run（）
。问题是它为什么会显示在控制台中？
在您运行它时，this.foo不可用

这是一个糟糕的设计，当像这样使用javascript时，您可能会更多地使用自定义构造函数和事件处理。您的代码和问题建议在更新动态创建的变量
app
时执行run方法。除非为此实现一些事件处理，否则这种情况永远不会发生

但是，如果您调用
app.run（），您的代码就可以工作设置app.foo变量后

// Antipattern ahead!
(function(_stack_){
  var stack = {
    over: 'flow',
    run: function(){
      // Prevent error messages
      if(typeof this.foo === 'undefined') {
          return;
      }
      console.log("log: " + this.foo); // undefined
    }
  };
  _stack_.app = stack;
})(this);

app.foo = 'bar';
app.run(); // log: bar

原因是
stack.run（）
是在app对象上创建foo属性之前执行的

当您在调试器中查找时，foo属性已经创建。
它确实会在您在chrome 31上提供的js bin上返回
bar
。