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 3 months ago.
Why arrow function fails to identify this pointer in the following case. I know that regular functions have their own execution scope and this but I could not identify why following failed. In the arrow function case, this is undefined. If someone can shed light, it would be great. Thank you!
PS: This code is just for experimental purposes, not anything serious.
const addProperty = function(op, func) {
String.prototype.__defineGetter__(op, func);
};
// works
addProperty('upper', function() {
return this.toUpperCase();
});
// fails to identify this
addProperty('lower', () => {
return this.toLowerCase();
});
Arrow functions preserve the this of the outside scope. function keyword functions, in this context, get the this of the object they're put on. That's just what they do.
Related
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I want to write a log method for String that can print the string, but it not work on the correct way
String.prototype.log = () => console.log(this.toString())
'Print Me'.log() // [object Window]
I want to print Print Me, not [object Window], how can I make it work
Oh yes! It does. The error is that this doesn't point to the string in an arrow function:
String.prototype.log = function() {
console.log(this.toString())
}
'Print Me'.log();
You can see that it works when you do it using a regular function. You need to read more about lexical scoping of arrow functions.
this in arrow functions belongs to the enclosing context. You shouldn't be using arrow function here since you will need to access the string object.
Make it
String.prototype.log = function() { console.log(this.toString()) }
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
I have this function call in jQuery:
image.save(comment);
and I've defined the save function like this:
Image.prototype.save = association => {
debugger;
this
}
How do I get this to equal the recipient of the function call which is image? Right now at the debugger, it equals the window object.
Do not use arrow functions
Arrow functions have a lexical this; its value is determined by the surrounding scope.
Image.prototype.save = function(association){
debugger;
this
}
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 5 years ago.
I saw this question in a quiz, how is a fat arrowed question works? is there any difference in the following code, if if yes why, if no why?:
var abc = function() {
return {
log : function() {
console.log(this.val);
}
};
}
var def = function(){
return{
log : () => {
console.log(this.val);
}
};
}
A fat arrow function automatically binds to this. It help avoid code where you have to save this in some other variable like that... such as in deeply nested callback hell. It is also more terse.
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
Lets say I have this Object:
api = {
x: 2,
func: () => {
this.x
}
}
If I call api.function, how come this is scoped to the window and not api?
If I turn func into a regular anonymous function this is scoped to the api and not the window.
Can anyone explain this to me? I thought the arrow notation inherited the parent this, which is api
Arrow functions inherit this from their lexical scope, meaning the same value that this would mean in the scope they're defined in.
That's whatever this is in the function that contains that code; it has nothing to do with where in that scope you put the arrow function.
Simple explanation: problem is that the function is created before the api object and it is specifically bound to the window in your case because you are in a window scope. If I slightly rewrite your code using ES5 bind you can get the following
const func = function() {
this.x
}.bind(this); // here this is a window in your case
api = {
x: 2,
func: func
}
This code is equivalent to yours. Here you can clearly see that your function does not belong to the object api.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 6 years ago.
I've seen this a few times with redux code:
const mapDispatchToProps = (dispatch) => {
...
}
function mapStateToProps(state) {
...
}
Is there any reason why this is done, is it just a convention, a case of copy-paste code, or is there some benefit to doing it this way?
I've read that arrow functions vs regular functions automatically bind this, but it doesn't appear that these functions exist within a class at all, so maybe that makes no difference?
I think it's a matter of taste; aside from the obvious differences (ex. function expressions won't be hoisted) both work pretty much the same in your case.
Taking defensive-programming into account, the former syntax causes the interpreter to raise a SyntaxError if you try to redefine the constant whereas re-declaring a function (silently) replaces the previously declared one.