1.

When You Create A Function Inside Of A Method, What Does The “this” Keyword Refer To When Used In That Function?

Answer»

The “window” object, Inside of a function, the “this” keyword ALWAYS refers to the window object. But when a funciton is a PROPERTY of on object, the “this” keyword always refers to the object that the function is a method of.

var myObject = {

color : "red",
test : function(){
function testThis(){
console.LOG(this.color); //undefined
console.log(window === this); //true
};
testThis();
console.log(this.color); //red
console.log(window === this); //false
return "done!"
}
};
myObject.test();

In the above example, the output to your JavaScript console should be:

  1. undefined
  2. true
  3. red
  4. false
  5. “done!”

The reason for the output is: The testThis function inside of the myObject.test method attempts to log the value of “this.color”. That function is NOT a method, it is just a function declaration, so “this” refers to the window object. In this code, the window object, does not have a “color” property, so “this.color” is undefined. Next, the testThis function inside of the myObject.test method compares, window to the “this” keyword (just to prove the previous point). Again, because the testThis function inside of the myObject.test method is NOT a method, it is a property of the window object, so “this” DOES equal the window object.

Next, the myObject.test method attempts to log the value of “this.color”. Since the test metod is a property of the myObject object, and the myObject object has a property named “color”, the value of that property is LOGGED to the console. Next, the myObject.test method attempts to compares window to the “this” keyword. Since the test metod is a property of the myObject object, the “this” keywork refers to the myObject object, and the COMPARISON to the window object returns false.

The “window” object, Inside of a function, the “this” keyword always refers to the window object. But when a funciton is a property of on object, the “this” keyword always refers to the object that the function is a method of.

var myObject = {

color : "red",
test : function(){
function testThis(){
console.log(this.color); //undefined
console.log(window === this); //true
};
testThis();
console.log(this.color); //red
console.log(window === this); //false
return "done!"
}
};
myObject.test();

In the above example, the output to your JavaScript console should be:

The reason for the output is: The testThis function inside of the myObject.test method attempts to log the value of “this.color”. That function is NOT a method, it is just a function declaration, so “this” refers to the window object. In this code, the window object, does not have a “color” property, so “this.color” is undefined. Next, the testThis function inside of the myObject.test method compares, window to the “this” keyword (just to prove the previous point). Again, because the testThis function inside of the myObject.test method is NOT a method, it is a property of the window object, so “this” DOES equal the window object.

Next, the myObject.test method attempts to log the value of “this.color”. Since the test metod is a property of the myObject object, and the myObject object has a property named “color”, the value of that property is logged to the console. Next, the myObject.test method attempts to compares window to the “this” keyword. Since the test metod is a property of the myObject object, the “this” keywork refers to the myObject object, and the comparison to the window object returns false.



Discussion

No Comment Found