xxxxxxxxxx
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
xxxxxxxxxx
//this refer to global object or window object
//but when we call this inside method of object it refers to current object
//COMMENT::1)This understanding
console.log(this === window); //true
let user = {
name: 'shirshak',
age: 25,
say() {
//here this is current object which is user
console.log(this.name); //print shirshak
},
};
//COMMENT::2)Reduced duplicated code inside object
let developer = {
name: 'shirshak',
};
let admin = {
name: 'admin',
};
function sayHi() {
console.log(this.name);
}
developer.hi = sayHi;
admin.hi = sayHi;
developer.hi(); //log shirshak
admin.hi(); //log admin
//this reduced writing same code in each object.
//COMMENT::3)Using this in dom
const lists = document.querySelectorAll('li');
lists.forEach(list => {
list.addEventListener('click', function () {
console.log(this); //click li will be log
});
});
//COMMENT::4) New this which refer to window when calling function inside function of object
user = {
name: 'shirshak',
skill: ['html', 'css', 'javascript', 'react', 'nextjs', 'ethers.js', 'nodejs', 'express'],
greet() {
const self = this;
console.log(`Hello there ${this.name}`); //here this is user object
// const getSkills = function () {
// console.log(`You currently have ${this.skill.length} skills`);
// //this.skill is undefined as here this is window
// };
const getSkills = function () {
console.log(`You currently have ${self.skill.length} skills`);
//self.skill is user object
};
getSkills();
// when we call getSkills it will create new execution context
//with this being window
},
geetArrow() {
console.log(`Hello there ${this.name}`);
this.skill.forEach(video => {
console.log(this.name);
});
const getSkills = () => {
console.log(`You currently have ${this.skill.length} skills`);
};
getSkills();
},
};
user.greet();
//here new execution context create with this refer to user object
user.geetArrow();
//here we use arrow function so new function will not create new this which refer to window in new global execution context.
xxxxxxxxxx
// In web browsers, the window object is also the global object:
console.log(this === window); // true
a = 37;
console.log(window.a); // 37
this.b = "MDN";
console.log(window.b) // "MDN"
console.log(b) // "MDN"
xxxxxxxxxx
// this keyword
// This keyword belongs to the object it belongs to
// (1).Alone, this refers to the global object.
// (2).In a regular function,this refers to the global object.
// (3).In a method, this refers to the owner object.
// 1
console.log(this);
// 2
function abc() {
console.log(this);
}
abc();
// 3
const obj = {
name: "Abhishek",
no: 1,
sum: function (a, b) {
console.log("hello sum", a + b);
console.log("this:::", this);
console.log("this name:::", this.name);
},
};
obj.sum(4, 3);
xxxxxxxxxx
const user = {
name: 'Mike';
call() {
console.log(this);
}
}
user.call();
// ⚙️ Output: {name: 'Mike, call: f}
xxxxxxxxxx
let user = {
name: "John",
age: 30,
sayHi() {
// "this" is the "current object"
alert(this.name);
}
};
user.sayHi(); // John
xxxxxxxxxx
/*In general, the 'this' references the object of which the function is a property.
In other words, the 'this' references the object that is currently calling the function.
Suppose you have an object called 'counter' that has a method 'next()'.
When you call the 'next()' method, you can access the this object. */
let counter = {
count: 0,
next: function () {
return ++this.count;
},
};
counter.next();
//Inside the next() function, the this references the counter
Code language: JavaScript (javascript)
xxxxxxxxxx
// In JavaScript, the this keyword refers to an object.
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
xxxxxxxxxx
var Backbone = {};
Backbone.a = "aaa";
Backbone.b = "bbbb";
Backbone.c = "ccccc";
Backbone.t = function()
{
console.log(this);
}
function clickMe()
{
Backbone.t();
/*console.log(this) is Backbone object (remember how "this" is "whoever owns the function"*/