Order of creation and initialization of object members in Javascript

Question

I have some questions about order of initialization and creation of members in JS objects.
In my understanding, when any function is called, a function execution context is created. There also 2 phases in which code gets processed in those functions: creation and execution.

So, let's take this simple example:

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

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

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

new Main();

What are is the order in which all the members will be created and initialized? I know how it works when we are not working with objects:

New execution context is created and added to the stack

Code is scanned for functions [the code is not evaluated unless called -- it just learns that there is a specific function there]

All variables are hoisted

this variable is getting assigned

Execution phase starts: code is getting executed line by line (including all variable assignments etc.; if any functions are called, another execution context is created and the process starts all over again)

Where in this list of steps this.method are getting created and defined? I poked around and figured that during execution phase, if I call a this.method before it's actually defined, an error is thrown (meaning that instance method does not exist yet). However, if I call inside of the the instance method another instance method that is defined later in the code, everything works fine: function Main() { 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();

Could anyone help me to understand when instance methods are created and when they are defined? How prototypal objects in JS make execution context different (besides changing the reference object of this) ?

Thanks!

Answer 1

sayHello method is a reference to a function, and the function this.sayHello will be executed later, after sayHello2 method will be initialized. if you make something like this:

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

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

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

new Main();

use an iife, so that function will invoke immediately than an error will be thrown because js doesn't know about this.sayHello2. The same thing you can see if you will try to execute this.sayHello() before this.sayHello2 method is defined.

Js interpreter haven't simply reached that code in sayHello function, so there is no error