JavaScript - 为什么此代码记录 'undefined' 但显示在 Chrome 控制台中？ (关闭)

Question

我做了这个例子:

(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 控制台中时等于 undefined？

查看 JS Bin

编辑: 我知道它变得未定义，因为在分配 app.foo 之前调用了 stack.run() 。问题是它怎么会出现在控制台中？

Answer 1

this.foo 在你运行时不可用

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

但是，如果您在设置 app.foo 变量后调用 app.run();，您的代码仍然有效。

// 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