"this" in javascript

Here we will talk about this keyword in javascript and how it is different from any other javascript object.


"this" is and current context object in runtime engine, but unlike any other object the properties of this cannot be modified directly or cannot be assigned into another variable.


But the real question is if it doesn't get assigned any value how does it gets its values? to answer this i will emphasize on the fact that it is current context, so the value it holds depends on the execution context of the code that is running in the javascript engine.

For example, in global execution context the value of "this" is window, in the context of a block of code like functions the value of "this" is determined by how a function is called (runtime binding).

There are ways to override this behavior in ES5 using bind() to bind the value of this regardless of how it is called.


Global execution context


console.log(this === window); // true

a = 47; console.log(window.a); // 47


Function execution context


In non-strict mode, "this" will be global window object


function f1() { return this; } // In a browser: f1() === window; // true


In strict mode, "this" will be the object which has called it otherwise it will be undefined.


function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true


Class execution context


Classes behave almost same as functions since both are in block scopes, but there are some limitations.

Within a class constructor, "this" is a regular object. All non-static methods within the class are added to the prototype of "this". Static methods are not properties of this. They are properties of the class itself.


class Example { constructor() { const proto = Object.getPrototypeOf(this); console.log(Object.getOwnPropertyNames(proto)); } first(){} second(){} static third(){} } new Example(); // ['constructor', 'first', 'second']


Derived Class execution context


Derived or Parent child class unlike base or parent class doesn't have a "this" by default until in derived constructor super() is called. If you try to access this before super() call the it will throw ReferenceError.


class Base {} class Good extends Base {} class AlsoGood extends Base { constructor() { return {a: 5}; } } class Bad extends Base { constructor() {} } new Good(); new AlsoGood(); new Bad(); // ReferenceError




What "this" when calling a function, use call(), or apply()


An object can be passed as the first argument to call or apply and this will be bound to it. var obj = {a: 'Custom'}; We declare a variable and the variable is assigned to the global window as its property. var a = 'Global'; The value of this is dependent on how the function is called

function whatsThis() { return this.a; }

'Global' as this in the function isn't set, so it defaults to the global/window object whatsThis();

'Custom' as this in the function is set to obj whatsThis.call(obj);

'Custom' as this in the function is set to obj whatsThis.apply(obj);



Conclusion


"this" is the brief introduction, there are more complexity and concepts related to "this" which is very relevant in order to write more complex application in javascript. Knowing the fundamentals will help build the concept going forward in javascript programming.

9 views0 comments

Recent Posts

See All