javascript - Javascript 中对象成员的创建和初始化顺序

Question

我对 JS 对象中成员的初始化和创建顺序有一些疑问。
根据我的理解，当调用任何函数时，都会创建一个函数执行上下文。在这些函数中处理代码还有两个阶段:创建和执行。

那么，让我们看这个简单的例子:

function Main() {
  var a = "1";

  this.sayHello = function() {
     console.log("Hello!");
  }

  function inner() {
     var b = 2;
  }
}

new Main();

所有成员的创建和初始化顺序是什么？我知道当我们不使用对象时它是如何工作的:

创建新的执行上下文并将其添加到堆栈中

扫描代码中的函数 [除非被调用，否则代码不会被评估——它只是知道那里有一个特定的函数]

所有变量都被提升

这个变量正在被赋值

执行阶段开始:代码逐行执行(包括所有变量赋值等；如果调用任何函数，则会创建另一个执行上下文，并且整个过程重新开始)

在这个步骤列表的哪个位置创建和定义this.method？我研究了一下，发现在执行阶段，如果我在实际定义之前调用 this.method ，则会抛出错误(意味着实例方法尚不存在)。但是，如果我在实例方法内部调用稍后在代码中定义的另一个实例方法，则一切正常: 函数主() { var a = "1";

  // this.sayHello() -- error!!

  this.sayHello = function() {
     this.sayHello2(); // no error (???)
     console.log("Hello!");
  }

  this.sayHello2 = function() {
     console.log("Hello2!");
  }

  function inner() {
     var b = 2;
  }
}

new Main();

有人可以帮助我理解实例方法何时创建以及何时定义吗？ JS 中的原型(prototype)对象如何使执行上下文不同(除了更改 this 的引用对象之外)？

谢谢!

Answer 1

sayHello方法是对函数的引用，函数this.sayHello将在初始化sayHello2方法之后执行。如果你做了这样的事情:

  this.sayHello = (function() {
     this.sayHello2(); //error
     console.log("Hello!");
  }).call(this);

  this.sayHello2 = function() {
     console.log("Hello2!");
  }

  function inner() {
     var b = 2;
  }
}

new Main();

使用 iife，以便该函数将立即调用，而不是抛出错误，因为 js 不知道 this.sayHello2。如果您在定义 this.sayHello2 方法之前尝试执行 this.sayHello()，您会看到同样的结果。

Js 解释器并没有简单地到达 sayHello 函数中的代码，因此没有错误