{"id":4719,"date":"2018-10-03T23:55:09","date_gmt":"2018-10-03T23:55:09","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=40"},"modified":"2018-10-03T23:55:09","modified_gmt":"2018-10-03T23:55:09","slug":"understanding-this-keyword-in-javascript","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/understanding-this-keyword-in-javascript\/","title":{"rendered":"Understanding this Keyword in JavaScript"},"content":{"rendered":"

Note<\/strong>: This post is work-in-progress learning-note and still in active development. This was initially drafted on March 8 and updated recently.<\/p>\n

In JavaScript (JS), use of function’s this<\/code> keyword is very confusing, it means different thing depending on the context how a function is called. There is also some difference in whether this is called in strict mode<\/a> or non-strict<\/em> mode. For example, Is it used outside of a function? Is it a regular function call? Methods in ES6 classes? Called in an arrow function? etc. Based on how a function is called, value of this<\/code> could be different. Even more confusing is that this<\/code> keyword will have different value in the same function depending upon whether it is called as a\u00a0 object method or callback function.<\/p>\n

In this learning-note post, how the value of this<\/code> keyword differs in different context is discussed.<\/p>\n

1. Global Context<\/h5>\n

When this<\/code> keyword is used outside of a function in a browser, it refers to global object. In a a browser, global object refers to window.<\/p>\n

\/\/used in browser \nconsole.log(this === window); \/\/ OUTPUT =>true\n\/\/assign variable\ngreeting = "Hello World!";\nconsole.log(window.greeting); \/\/ OUTPUT =>Hello World!\n\/\/ this.var asignment\nthis.year = 2018;\nconsole.log(window.year); \/\/ OUTPUT => 2018\nconsole.log(year); \/\/ OUTPUT => 2018<\/code><\/pre>\n
In the example above, this<\/code> when used in a browser refers to window<\/code> (line 2). Likewise, a global variable (outside of a function) also refers to window (lines: 4-5). In line 7, this.year<\/code> is assigned to 2018<\/code>, which refers to window<\/code> object as well (lines: 8-9).<\/p>\n
2. Simple Function Call<\/h5>\n
When calling a function in non-strict mode, this<\/code> refers to global object, which is window in a browser.<\/p>\n
\/\/define a function\nfunction greeting() {\n  return this;\n}\n\/\/in a browser\ngreeting() === window; \/\/ OUTPUT = true<\/code><\/pre>\n
In non-strict mode, this<\/code> in function call refers to global (window) object (line: 6) because the value of this<\/code> is not set by call. In strict mode, the value of this<\/code> remains at whatever it was set to when entering the execution context<\/a>.<\/p>\n
\/\/simple function\nfunction greeting() {\n  'use strict'; \/\/strict mode\n  return this;\n}\n\/\/invoke greeting()\ngreeting(); \/\/ OUTPUT => undefined\ngreeting() === undefined; \/\/ OUTPUT => true<\/code><\/pre>\n
In the example above, this<\/code> defaults to undefined<\/code> (lines: 13-14) because it was not defined and called directly not as method<\/em> or property of an object<\/em> (see explanation below).<\/p>\n
Setting a this<\/code> Value<\/strong>: Value of this<\/code> keyword can be set to current context by assigning a value to this<\/code> as shown in the example below:<\/p>\n
\/\/define a function\nfunction greeting() {\n  this.msg = "Hello World!";\n  return this;\n}\n\/\/in a browser\nconsole.log(greeting()); \/\/OUTPUT => window\nconsole.log(new greeting()); \/\/OUTPUT => greeting {msg: "Hello World!"}<\/code><\/pre>\n
In the example above,\u00a0 the greeting()<\/code> logs to global (window) scope (line 7). However when it is invoked with new constructor operator as new greeting()<\/code> it returns as greeting\u00a0{msg: "Hello World!"}<\/code> because the new<\/code> operator bounds the value of this<\/code> to the instance greeting()<\/code> as shown in line 8.<\/p>\n
Passing the value of this<\/code> from one context to another will be discussed below in a separate section.<\/p>\n
a. Setting this<\/code> value with call()<\/code>, apply()<\/code> & bind()<\/code> Methods<\/h5>\n
When a function is called directly or a property of an object then it returns global (window) because this is not bound and not aware of its calling function. This problem can be fixed by passing this value from one context to another using <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/call" target="_blank" rel="noopener">call()<\/a><\/code> or <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/apply" target="_blank" rel="noopener">apply()<\/a><\/code> method as shown below:<\/p>\n
\/\/ define helloWorld object\nvar helloWorld = {msg: 'Hello World!'};\n\n\/\/global context\nvar msg = "Hello USA!";\n\n\/\/ define function\nfunction valueOfThis() {\n  return this.msg; \/\/ value depends how it is called\n}\n\/\/invoke function\nvalueOfThis(); \/\/ OUTPUT => "Hello USA!"\n\/\/set with call()\nvalueOfThis.call(helloWorld); \/\/ OUTPUT => "Hello World!"\n\/\/set with apply()\nvalueOfThis.apply(helloWorld); \/\/ OUTPUT => "Hello World!"<\/code><\/pre>\n
In the example above (adopted from MDN<\/a>) value of this<\/code> keyword in valueOfThis()<\/code> call (line ) refers to global variable "Hello World!"<\/code> defined inline 5. If and when a this<\/code> keyword is used in function body (eg. valueOfThis()<\/code> in line 9), then value of this<\/code> can be bound to an object in the function call using the call()<\/code> and apply()<\/code> methods.<\/p>\n
All functions inherit call()<\/code>, apply()<\/code>, bind()<\/code> methods from <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function#Methods" target="_blank" rel="noopener">function.prototype<\/a><\/code>, which are defined in MDN documents as follows:<\/p>\n