This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
React - uncaught TypeError: Cannot read property 'setState' of undefined
(20 answers)
Closed 3 years ago.
I need to convert an arrow function into a function. This is due to a problem with Slick Slider, as it does not support properly arrow functions.
I have convert this:
beforeChange={(current, next) => this.setState({slideIndex: next})}
Into this:
beforeChange={function(current, next) {
this.setState({slideIndex: next});
}}
But does not work. Already tried this solution:
beforeChange={function(current, next) {
this.setState(function() {
return {slideIndex: next};
});
}}
Use bind for passing the context to the function:
beforeChange={function(current, next) {
this.setState({slideIndex: next});
}.bind(this)}
This will pass this to the function so that when referencing this inside the function will be the one passed through bind.
Arrow functions do this automatically, they pass the context of where they're being called to the function itself, so by removing the arrow function you removed the correct context.
Other functions that will allow you to manually pass the context are: apply, call and the aforementioned bind.
Related
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 8 months ago.
i just created an object with an arrow function :
const user={
fName:"0xN1nja",
about:()=>{
return this.fName;
}
}
now, when i call that arrow function with .call() method, it returns undefined :
a=user.about.call(user);
console.log(a);
>>> undefined
But when i replaced that arrow function with a normal function expression, it returns the value
const user={
fName:"0xN1nja",
about:function(){
return this.fName;
}
}
a=user.about.call(user2);
console.log(a);
>>> 0xN1nja
what is happening here?
PS : im new to javascript
Arrow functions don't bind to this as function do. That's one of the main reason they were introduced (probably the most important one).
You cannot even bind them.
This question already has answers here:
Arrow Functions and This [duplicate]
(5 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 1 year ago.
Why is $(this) returning undefined instead of the clicked element?
I've replaced $(this) with event.target and it works fine but would like to understand the issue with $(this), thank you!
$('.nav-search-options').on('click', (event) => {
console.log($(this))
})
#JamesJavascript.
It is partially right what Justinas said in the comment about arrow function - although there are more things to add.
Arrow functions do not have their own "this", instead they bind one from their parent scope.
To see what I mean, try this and see that it returns you the window object:
const myFunction = () => {
console.log(this);
};
// call it
myFunction();
Read more about it here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
How do I return the response from an asynchronous call?
(41 answers)
Closed 2 years ago.
This is likely a beginners question, but I'm having trouble using 'this' for global variables.
I am using Ionic 4. And I'm trying to post a location to my database.
I have declared the following global variable in my class:
export class HomePage {
myVar:any;
I can use it in a function like this:
mainFunction(coordinates) {
this.myVar = coordinates.coords.latitude;
The problem is that when i go one function deeper. The variable can not be accessed with 'this.'.
mainFunction(coordinates) {
navigator.geolocation.getCurrentPosition(this.helperFunction);
console.log(this.myVar);
helperFunction(coordinates) {
this.myVar = coordinates.coords.latitude;
For some reason a nested function can not read or write the global variable. I get the following error:
ERROR TypeError: Cannot read property 'myVar' of null
How do I pass the value of myVar back to mainFunction?
Thanks in advance.
I am calling the mainFunction with a button in a .html
<ion-button expand="block" (click)="mainFunction()"></ion-button>
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:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
i have this object literal
let p = {
name : 'Amir',
say: () => {
console.log(this.name)
console.log(this)
}
}
and I want the say function works using this
p.say();
but the arrow function obviously gets the window object as 'this'. I know I could use a regular function for 'say' instead of arrow and it will work fine.
BUT
I would like to ONLY change the call to say function to make it work, but the binding won't work.
I mean something like p.say.bind(p)() or p.say.call(p) aint gonna work as desired.
Is it possible to change the call to function ONLY and not the say function?