Outside of functions (in the global execution context), this refers to the global window object. In browsers, the global object is the window object.
console.log(this) // Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}\n\nconsole.log(this === window) // trueIn functions that are not methods of objects, this refers to the global window object.
A function that is the property of an object is called its method.
\nfunction myFunc() {\n console.log(this)\n console.log(this === window)\n}\n\nmyFunc() // Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}\n// trueA function that is the property of an object is called its method. And inside the method of an object, this refers to the object the method is called on.
Consider the following:
\nconst developer = {\n name: "Hemanta",\n profession: "front-end developer",\n language: "JavaScript",\n about() {\n console.log(`${this.name} is an expert on ${this.language}`)\n },\n}\n\ndeveloper.about() // Hemanta is an expert on JavascriptAbove, we called the about method on the developer object. Therefore, this inside the about method refers to the developer object. Now, let's consider another example where we have another object inside the developer object.
const developer = {\n name: "Hemanta",\n profession: "front-end developer",\n language: "JavaScript",\n career: {\n company: "Automattic",\n about() {\n console.log(`Hemanta works for ${this.company}`)\n },\n },\n}\n\ndeveloper.career.about() // Hemanta works for AutomatticAbove, which object does this keyword inside the about method refer to?
We know that this always refers to the object the method is called on. We have invoked the about method on the career object; therefore, this keyword inside the method refers to the career object.
\n\nA nice shortcut to find out the object
\nthiskeyword refers to is to find out the object present on the immediate left of the method call.
Next, let's find out about the behavior of this keyword inside a nested function inside the about method of the developer object.
const developer = {\n name: "Hemanta",\n profession: "front-end developer",\n language: "JavaScript",\n about() {\n function aboutDeveloper() {\n console.log(`${this.name} is a ${this.profession}`)\n }\n aboutDeveloper()\n },\n}\n\ndeveloper.about() // undefined is a undefinedThe output of ${this.name} and ${this.profession} inside the aboutDeveloper function is undefined.
Do you know why?
\nLet's find out. As we have already discussed, in functions that are not methods of objects, this refers to the global window object.
In the example above, aboutDeveloper function is not a method of the developer object. It's a nested function inside the about method. As a result, this inside the aboutDeveloper function refers to the window object. And because the window object doesn't have name and profession properties, we get undefined as the output of ${this.name} and ${this.profession}.
So, what can we do so that this inside aboutDeveloper function (which is inside about method) refers to the developer object?
I'll show you two solutions:
\nconst developer = {\n name: "Hemanta",\n profession: "front-end developer",\n language: "JavaScript",\n about() {\n const that = this\n function aboutDeveloper() {\n console.log(`${that.name} is a ${that.profession}`)\n }\n aboutDeveloper()\n },\n}\n\ndeveloper.about() // Hemanta is a front-end developerWe have already discussed that a method refers to the object the method is called on. Above, this inside the about method refers to the developer object and therefore has access to its name, profession and language properties. So, all we need to do is to pass this from the about method to the aboutDeveloper function nested inside it. And thats exactly what we have done in the example above.
On line 6, we have saved this inside a variable called that, and have passed that variable inside aboutDeveloper function. Now, aboutDeveloper function has access to the properties of the developer object and we get the desired output.
\n\nAs a side note, you can name the variable anything you want. However, it's a convention to use
\nthatorselfas variable names.
const developer = {\n name: 'Hemanta',\n profession: 'front-end developer',\n language: 'JavaScript',\n about() {\n const aboutDeveloper = () => {\n console.log(${this.name} is a ${this.profession});\n }\n aboutDeveloper();\n }\n}\n\ndeveloper.about(); // Hemanta is a front-end developerWhat we have done above is we have changed aboutDeveloper function from a function declaration to an arrow function.
The problem is solved and we get our desired output. This is because arrow functions don't have their own this keyword. The value of this keyword inside an arrow function is taken from the outer scope. The scope of about method is the enclosing/outer scope of the aboutDeveloper function. Therefore, this inside the aboutDeveloper function refers to the same object this inside about method refers to - the developer object.
Using arrow functions to solve the issue of this keyword inside nested functions inside object methods is the preferred solution. As you move on to learn React (a Javascript UI library), you will come across extensive usage of arrow functions.
class Developer {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n selfTaught() {\n console.log(${this.name} is a self-taught developer.);\n }\n}\n\nconst hemanta = new Developer('Hemanta');\n\nhemanta.selfTaught(); // Hemanta is a self-taught developer.this inside of a class refers to an instance of that class. On line 8, this inside the selfTaught method refers to hemanta, which is an instance of the developer class.
Understanding this in JavaScript can be a bit challenging. However, with enough practice and perseverance you will be able to internalize the concepts.