About "this" keyword/variable in Javascript

 1) JavaScript this:

In JavaScript, this keyword refers to the object where it is called.


2)1. this Inside Global Scope

When this is used alone, this refers to the global object (window object in browsers).

let a = this;
console.log(a); // Window {}


this.name = 'Swati';
console.log(window.name); // Swati











3)2. this Inside Function

When this is used in a function, this refers to the global object (window object in browsers).


function greet() {
// this inside function
// this refers to the global object
console.log(this);
}
greet(); // Window {}















4)3. this Inside Constructor Function

In JavaScript, constructor functions are used to create objects. When a function is used as a constructor function, this refers to the object inside which it is used.


function Person() {
this.name = "Swati";
console.log(this);
}
let person1 = new Person();
console.log(person1.name);









Note: When this is used with ES6 classes, it refers to the object inside which it is used(similar to constructor functions).


5)4. this Inside Object Method

When this is used inside an object's method, this refers to the object it lies within. 


const person = {
name: "Swati",
age: 25,


// this inside method
// this refers to the object itself
greet() {
console.log(this);
console.log(this.name);
},
};


person.greet();









6)5. this Inside Inner Function

When you access this inside an inner function (inside a method), this refers to the global object. 


const person = {
name: "Swati",
age: 25,
// this inside method
// this refers to the object itself
greet() {
console.log(this); // {name: "Swati", age ...}
console.log(this.age); // 25
// inner function
function innerFunc() {
// this refers to the global object
console.log(this); // Window { ... }
console.log(this.age); // undefined
}
innerFunc();
},
};
person.greet();










7)6. this Inside Arrow Function

Inside the arrow function, this refers to the parent scope. Arrow functions do not have their own this. When you use this inside an arrow function, this refers to its parent scope object.


Example 1:

const greet = () => {
console.log(this);
}
greet(); // Window {...} basically in the browser console it will give window in vs code its not giving the correct output thats why I haven't taken screenshot of the terminal for this example

Example 2:

let greet = {
name: "Swati",


sayHi() {
let hi = () => console.log(this.name);
hi();
},
};
greet.sayHi();







Example 3:

let person = {
name: 'Swati',
greet() {
console.log(this);
console.log(this.name);


let innerFunc = () => {
console.log(this);
console.log(this.name);
}
innerFunc();
}
}
person.greet();










8) 7. this Inside Function with Strict Mode

When this is used in a function with strict mode, this is undefined. 


"use strict";
this.name = "Swati";
function greet() {
// this refers to undefined
console.log(this);
}
greet(); // undefined










Note: When using this inside a function with strict mode, you can use JavaScript Function call().

'use strict';
this.name = 'Swati';


function greet() {
console.log(this.name);
}


greet.call(this); // Swati







The call() method calls a function by passing this and specified values as arguments.


9)Static Methods:


Static class methods are defined on the class itself.

You cannot call a static method on an object, only on an object class.


class User {
// constructor(name1){
// this.name1 = name1;
// }

static getUser(x) {
return "Hello" + x;
}
}
//let object = new User("Swati");
//console.log(object.getUser());
console.log(User.getUser("Swati"));

Comments

Post a Comment

Popular posts from this blog

Object.getOwnPropertyDescriptor & Object.defineProperty Methods.

Image
  1)  Property Descriptor: When we create a JavaScript object, whether using object literal syntax or some other means and add some properties to it, each property (key) gets a default property descriptor. A property descriptor is a simple JavaScript object associated with each property of the object that contains information about that property such as its value and other meta-data. 2) Access Property Descriptor: We need to use a static method provided by the Object. The Object.getOwnPropertyDescriptor method returns the property descriptor of the "prop" which is the property name on the "obj" object. Object.getOwnPropertyDescriptor(obj, prop); Own here means return the property descriptor of prop property only if that property belongs to the object obj and not on its prototype chain. If the property prop doesn’t exist on obj, it returns undefined. The Object.getOwnPropertyDescriptor method returns an object with keys describing the setting and current value of th...
Read more

Scope and Closures / Callback Hell

Image
  1)  Scope: 1) Scope in JavaScript actually determines the accessibility of variables and functions at various parts in one’s own code or program. 2) Scope will help us to determine a given part of a code or a program, what variables or functions one could access and what variables or functions one cannot access. 3) Within a scope itself, a variable or a function, or a method could be accessed. Outside the specified scope of a variable or function, the data cannot be accessed. 4) There are three types of scopes available in JavaScript: Global Scope, Local / Function Scope, and Block Scope.  //global scope let global = "Swati" ; function func1 () { return global; } function func2 () { return func1 (); } console. log ( func2 ()); //local scope function func1 () { let a = 2 ; let multiply = function () { console. log (a * 5 ); } multiply (); } func1 (); //Block scope { let a = 5 ; } console. log (a); 2) Scope Nesting: //Bl...
Read more

DOM - Document Object Model (document.getElementById etc.)

Image
  1)  DOM: What is the DOM? The DOM stands for Document Object Model. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript. The ability to manipulate the DOM is one of the most unique and useful abilities of JavaScript. ** A "node", in this context, is simply an HTML element. The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node".   “document” is an object of the Document interface in the browser's Document Object Model (DOM). The Document interface represents an HTML or XML document that can be loaded in a web browser or processed by JavaScript code running in the browser. The “document” object provides a way for JavaScript code to access and manipulate the contents of the web page represented by the Document interface. The document object has properties and methods that allow you to get ...
Read more