This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
How to access the correct `this` inside a callback
(13 answers)
Arrow Functions and This [duplicate]
(5 answers)
Self-references in object literals / initializers
(30 answers)
Closed 1 year ago.
I know that arrow functions don't have their own "this" keyword, and "this" will point to parent (if it has it).
Can someone please explain why "this" in class points to class and why "this" in object points to global window?
So question is about differences between class and object here.
In class:
class App {
getPosition = () => {
//this points to class App
};
getPosition2(){
//this undefined
}
}
Object:
const obj = {
someFunction: () => {
//this points to global window
}
someFunction2(){
//this points to object
}
};
Related
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 9 months ago.
I want to modify the HTMLElement prototype to have a custom function in an instance of HTMLELement. I need for that function to be able to access the HTMLElement Instance's properties like the tagName. The problem is that inside the custom prototype function this points to the Window object instead of the HTMLElement instance. How can I achieve this?
HTMLElement.prototype.doSomething = () => {
console.log(this)
// Here I need to do something like console.log(this.tagName)
}
let elem = document.createElement('div')
elem.doSomething()
// -> Window Object, instead of HTMLElement Instance object.
Thank you
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Can you bind 'this' in an arrow function?
(14 answers)
Closed 2 years ago.
I have defined a JS class:
class Animation{
constructor(name, el, func){
this.name = name;
this.target = el;
this.animate = func.bind(this, this.target);
this.running = true;
}
// more methods here controlling animations
}
When creating an Animation object, I would like to have this behaviour:
... new Animation("animation", objToOperateOn, (target) => {
doStuff();
this.anAnimationMethod() // causes error because this is undefined
});
How can i get the anonymous function given as an argument to the constructor to have a refrence to the Animation object in the this keyword? The bind method that I'm using in the constructor doesn't seem to work, as logging this on the arrow function returns undefined.
PS. The target argument would be useless given we have a refrence to this, i just got it there for testing purposes.
Thanks for your time.
This question already has answers here:
Arrow Functions and This [duplicate]
(5 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 3 years ago.
I read this on w3schools that:-
https://www.w3schools.com/js/js_arrow_function.asp
"In regular functions, the 'this' keyword represented the object that called the function, which could be the window, the document, a button or whatever."
"With arrow functions, the 'this' keyword always represents the object that defined the arrow function."
var name = "ABC";
var obj =
{
name: "abc",
func: () => {
console.log(this.name);
}
};
obj.func();
So here, 'this' in the arrow function should be representing 'obj' object, but the output is "ABC", whereas according to me it should be "abc", there should be some concept that I am not aware of right now?
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
scope of the object literal methods
(3 answers)
Closed 4 years ago.
I am quite new to JavaScript, I am really confused by the below two examples of 'this', on what 'this' is bound to and why:
Example 1:
function Person(age) {
this.age = age;
this.growOld = () => {
this.age++;
}
}
var person = new Person(1);
setTimeout(person.growOld,1000);
Example 2:
var Actor = {
name: 'RajiniKanth',
movies: ['Kabali', 'Sivaji', 'Baba'],
getName: () => {
alert(this.name);
}
};
Actor.getName();
Why even though both examples use arrow function, but 'this' is bound to different context?
A method inside an object using an arrow function this will bind to the object, if if not inside an object this refers to the global scope, even if encapsulated by another method.
The keyword this has different meanings in function expressions and function declarations.
Arrow functions are expressions. Accordingly, this is bound to a lexical context.
See MDN this
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Why is JavaScript bind() necessary?
(4 answers)
why do you need to bind a function in a constructor
(6 answers)
Closed 5 years ago.
In what circumstance is the .this keyword unbound? In my react code, I have found that I have to use this.someMethod = this.someMethod.bind(this) in the constructor() to access the properties of that method. Is this only when my method is triggered by an event listener, or is this necessary for all methods? Also are there any other situations that will break the access to .this?