Methods in ES6 objects: using arrow functions
Arrow functions are not designed to be used in every situation merely as a shorter version of old-fashioned functions. They are not intended to replace function syntax using the function
keyword. The most common use case for arrow functions is as short "lambdas" which do not redefine this
, often used when passing a function as a callback to some function.
Arrow functions cannot be used to write object methods because, as you have found, since arrow functions close over the this
of the lexically enclosing context, the this
within the arrow is the one that was current where you defined the object. Which is to say:
// Whatever `this` is here...
var chopper = {
owner: 'Zed',
getOwner: () => {
return this.owner; // ...is what `this` is here.
}
};
In your case, wanting to write a method on an object, you should simply use traditional function
syntax, or the method syntax introduced in ES6:
var chopper = {
owner: 'Zed',
getOwner: function() {
return this.owner;
}
};
// or
var chopper = {
owner: 'Zed',
getOwner() {
return this.owner;
}
};
(There are small differences between them, but they're only important if you use super
in getOwner
, which you aren't, or if you copy getOwner
to another object.)
There was some debate on the es6 mailing list about a twist on arrow functions which have similar syntax but with their own this
. However, this proposal was poorly received because that is mere syntax sugar, allowing people to save typing a few characters, and provides no new functionality over existing function syntax. See the topic unbound arrow functions.
Arrow Function Created In An Object Returns undefined When Called Using .call() Method
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.
ES6 Arrow function: why this points differently when used in constructor and object literal?
function Obj() {
this.show = () => {
console.log(this);
};
}
const o = new Obj();
o.show();
Here "this" works based on the rules of the "new" keyword, pointing to a new object with the structure defined inside Obj() (the new object is the context).
More info at : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
const o2 = {
show: () => {
console.log(this);
}
}
o2.show() // window || undefinded
Here "this" gets its value at runtime and because neither lambda functions nor object literals define a context, the context remaining is the global one and that is why you get that value.
this keyword in arrow function
Arrow functions have a lexical this
which means that the value of this
inside the function is the same as the value of this
outside the function.
It does not mean that this
points to an object containing all the variables from outside the function.
const anObject = {
aValue: "example value",
aMethod: function() {
console.log("aMethod", this.aValue);
const arrow = () => {
console.log("arrow", this.aValue);
}
arrow();
}
}
anObject.aMethod();
const copyOfAMethod = anObject.aMethod;
copyOfAMethod();
Related Topics
How to Access the Contents of an Iframe With JavaScript/Jquery
Weird Behavior With Objects & Console.Log
Why Is the Method Executed Immediately When I Use Settimeout
How to Find Event Listeners on a Dom Node in JavaScript or in Debugging
Events Triggered by Dynamically Generated Element Are Not Captured by Event Handler
What Is Spreadelement in Ecmascript Documentation? Is It the Same as Spread Syntax At Mdn
How to Retrieve Get Parameters from JavaScript
Get Selected Text from a Drop-Down List (Select Box) Using Jquery
How May I Sort a List Alphabetically Using Jquery
Does JavaScript Have a Method Like "Range()" to Generate a Range Within the Supplied Bounds
Why Is Settimeout(Fn, 0) Sometimes Useful
When Is .Then(Success, Fail) Considered an Antipattern For Promises
Get All Non-Unique Values (I.E.: Duplicate/More Than One Occurrence) in an Array
Deleting Array Elements in JavaScript - Delete VS Splice
Get the Highlighted/Selected Text
When Are You Supposed to Use Escape Instead of Encodeuri/Encodeuricomponent