Understand `this` in Constructor Invocation Pattern

Question

Trying to understand this, found an example in javascript the good parts book:

var first;
var second;

var Quo = function(string) {
    first = this;
    this.status = string;// first this
};

Quo.prototype.get_status = function() {
    second = this;
    return this.status;//second this
};

var myQuo = new Quo( "confused" );
console.log( myQuo.get_status() );

console.log( (first===second) + ',' + (second===myQuo) + ',' + (first===myQuo) );

Output:

$ node test.js 
confused
true,true,true

Does the first this and the second this both point to myQuo? How to print out the object name or function name or class name which each this point to? (Really confused by this currently.)

UPDATE

Another questions: Both this refer to the instance of Quo instead of Quo's prototype?

Also, trying:

console.log( myQuo.get_status() );
console.log(first.constructor.name);
console.log( first );
console.log( second );

Output:

confused

{ status: 'confused' }
{ status: 'confused' }

Why first.constructor.name is nothing? Why first is { status: 'confused' }?

Answer 1

In javascript, when a function defined on a prototype is called on an instance; "this" inside the function means (think like it is replaced with-) that instance (or the owning object having the prototype in its prototype chain).

In your case the constructor (which is also a function on the prototype) is called with a newly created object as "this" with the "new" keyword.

var Quo = function(string) {
    first = this; //this is the newly created instance
    this.status = string;// first this
};

Then first is also assigned the exact same instance.

When get_status is called on the same instance, this is again replaced with the instance;

Quo.prototype.get_status = function() {
    second = this; //this is myQuo
    return this.status;//second this
};

and this time second is assigned the same instance.

doing myQuo.get_status() is same as;

Quo.prototype.get_status.call(myQuo)

Therefore these two "this" keywords refer to the same object.

Doing the "===" check is perfectly fine to compare if two variables point to the same instance. Getting the constructor name just tell you they were constructed with a specific constructor name, not else. It is possible to make two different objects with the same constructor name.

Answer 2

This question is solely centered around this and context within JavaScript.

Whenever you question What is this? You should always ask yourself these 4 questions (in order) and you will always get your answer.

1. Was the function called with the new keyword?

   Example: var myObj = new Obj();

   This: The newly created object

2. Was the function called with call, apply, or bind with the this context explicitly passed?

   Example: myFunction.call(self)

   This: this inside myFunction will be equal to self

3. Was the function called via a containing/owning object?

   Example: myObj.myFunction()

   This: this inside myFunction will be equal to myObj

4. What is the default this context?

   This: If in strict-mode, default is undefined. If not in strict-mode, default is the global object

So, in your case:

first = this is inside the Quo function, and is called using the "new" keyword, therefore first will equal the newly created object.

myQuo is simply the return value of executing the Quo function with the "new" keyword, which returns the newly created object by default, so that is why first === myQuo

second = this is inside of the get_status() function, which means nothing until the function is called. Once the function is called, you can see question 3 above, to see that the this context will be bound to the owning object. Since it was called with myQuo.get_status(), myQuo is the owning object, which is why second === myQuo.

Hopefully this clears everything up! Let me know if you need additional explanation!

Answer 3

Does the first this and the second this both point to myQuo?

Correct they both point to the same instance of Quo.

How to print out the object name or function name or class name which each this point to?

console.log(first.constructor.name);
console.log(second.constructor.name);

Answer 4

Here's an explanation of how this works in the two cases you mentioned. First, you need to understand that this is set depending on how the function is called (unless we're dealing with fat arrow functions )

When calling new

var myQuo = new Quo( "confused" );

It's basically the same as doing

var myQuo = Object.create(Quo.prototype);
// Explicitly setting `this`
Quo.call(myQuo, "confused")

When calling a function on an object

myQuo.get_status()

Implies that the get_status function will be called with what's to the left of the ., that is, myQuo.

• You can never now the name of an object (if you mean that this is named myQuo)
• To get a reference to the constructor function, you can do myQuo.constructor (or this.constructor). If your function is named (as yours is), you can use this.constructor.name to get Quo.