When is the .this keyword unbound in Javascript? [duplicate] - javascript

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?

Related

What does react 18 docs mean by "In JavaScript, class methods are not bound by default"? [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How to access the correct `this` inside a callback
(13 answers)
Value of this in React event handler
(3 answers)
Closed 5 months ago.
Please note this question is not talking about previous versions of react as in this 2017 question Reactjs: In JavaScript, class methods are not bound by default
In reactjs docs on Handling events, they mention the following for this example
In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
I think the bold statement is technically incorrect. Consider the following example:
class component2 {
prop = 3;
foo() {
console.log(this.prop);
}
}
var obj = new component2();
obj.foo();
<button id="one">Print prop</button>
As you can see I didn't have to bind this. This contradicts react18 documentation and also contradicts react2017 answer

setInterval and how it interacts with objects [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
JavaScript setInterval and `this` solution
(9 answers)
How do JavaScript closures work?
(86 answers)
Closed 10 months ago.
I've noticed when using setInterval() with objects, it accepts this:
setInterval(function(){auto1.increaseValue(s);}, auto1.interval);
Where auto1 is an object from a class.
However, the program throws an error when I put an object or object of an array of another object inside the function.
Ex.
let index = this.arrayForItems.length-1;
setInterval(function(){this.arrayForItems[index].increaseValue(s);header.innerHTML = s.value;}, this.arrayForItems[index].interval);
setInterval(function(){this.item.increaseValue(s);header.innerHTML = s.value;}, this.item.interval);//Where item is the object inside object shop
But this works.
let index = this.arrayForItems.length-1;
let referenceToPurchase = this.arrayForItems[index];
setInterval(function(){referenceToPurchase.increaseValue(s);header.innerHTML = s.value;}, referenceToPurchase.interval);
Why is this so?

"This" keyword inside a Class and Object [duplicate]

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
}
};

How to dynamically instntiate a class? [duplicate]

This question already has answers here:
Create object from class name in JavasScript ECMAScript 6
(8 answers)
ES6 classes : what about instrospection?
(1 answer)
Javascript ES6 class definition not accessible in window global
(2 answers)
Closed 2 years ago.
I have a class and a function, as follows:
class A {}
function B {}
I need to dynamically instantiate them, in a way similar to Java's class.forName().
I am able to instantiate the function as follows:
new window["B"]
However
window["A"] === undefined
Why the difference? Aren't classes just syntactic sugar for functions?

Function expression call in JavaScript [duplicate]

This question already has answers here:
JavaScript object functions and `this` when unbound and returned in expression/parens
(2 answers)
Closed 3 years ago.
I came across this (document.createElement)('a');.
How is it different from document.createElement('a');
No difference.
Please read doc for more.

Categories