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.
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 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.
This question already has answers here:
Meaning of "this" in node.js modules and functions
(4 answers)
Closed 2 years ago.
Consider the following example:
const f1 = () => this;
function f2() {
return this;
}
console.log(f1(), f2());
When this code is executed in a browser, the result is as follows:
> window window
But when this code is executed in Node.js, the result is not quite as expected:
> {} global
Why in Node.js the empty object was taken as the context of an arrow function instead of Global Object (global on this platform)?
In nodejs, when you use arrow operator, the this operator won't contain the reference object by nature....thatswhy if we wanted to refer any variables using 'this' , we avoid using arrow operators in function definition.
Therefore in your case this is the reason why it's printing empty object.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 4 years ago.
In ES5, other properties in object can be accessed by using this keyword.
Same behavior but can't able to access other property in object by using this in arrow function (ES6)
Kindly run attached code snippet see the output
var person={
"firstName":"PraveenRaj",
"lastName":"D",
"getFullName": function() { return this.firstName+" "+this.lastName}
}
var person1={
"firstName":"PraveenRaj",
"lastName":"D",
"getFullName": () => this.firstName+" "+this.lastName
}
console.log(person.getFullName());
console.log(person1.getFullName());
Like all JavaScript variables, both the object name (which could be a normal variable) and the property name are case sensitive. You access the properties of an object with a simple dot-notation.
Following is the syntax for accessing Object Properties.
objectName.propertyName
An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
Credits: Docs, Reference Answer
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:
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 5 years ago.
In the following code, in the object literal for obj1, I would assume that the 'this' in both functions would refer to obj1, but in the fat arrow function, it does not. Can someone explain why? I would have assumed that the functions would either be equivalent or that in the fat arrow function, 'this' would be defined lexically as obj1.
var obj1 = {
name : 'name1',
standardFunction : function() {
console.log(this.name); // Refers to obj1
},
fatArrowFunction : () => { // Refers to the global object
console.log(this.name);
}
}
obj1.standardFunction();
obj1.fatArrowFunction();
By definition arrow functions behave differently than the traditional ones. A function defined with () => {} syntax inherits context from the outer scope.