What does “this” refer to in arrow functions in ES6?
I've read in several places that the key difference is that "this
is lexically bound in arrow functions." That's all well and good, but I don't actually know what that means.
I know it means it's unique within the confines of the braces defining the function's body, but I couldn't actually tell you the output of the following code, because I have no idea what this
is referring to, unless it's referring to the fat arrow function itself....which doesn't seem useful.
var testFunction = () => { console.log(this) };
testFunction();
javascript this ecmascript-6 arrow-functions
add a comment |
I've read in several places that the key difference is that "this
is lexically bound in arrow functions." That's all well and good, but I don't actually know what that means.
I know it means it's unique within the confines of the braces defining the function's body, but I couldn't actually tell you the output of the following code, because I have no idea what this
is referring to, unless it's referring to the fat arrow function itself....which doesn't seem useful.
var testFunction = () => { console.log(this) };
testFunction();
javascript this ecmascript-6 arrow-functions
3
It simply captures the value ofthis
from the containing scope, treating it like any other variable.
– Barmar
Feb 6 '15 at 18:08
1
It's just so you don't have to do the kludge ofvar self = this;
and then useself
in the function.
– Barmar
Feb 6 '15 at 18:09
4
In your case, there is no enclosing context, or it's the global context, or module context, sothis
is whatever it is in that case, most likely null or window. To put it another way,this
has exactly the same value as it would if you added aconsole.log(this)
before the function assignment.
– user663031
Feb 6 '15 at 18:18
add a comment |
I've read in several places that the key difference is that "this
is lexically bound in arrow functions." That's all well and good, but I don't actually know what that means.
I know it means it's unique within the confines of the braces defining the function's body, but I couldn't actually tell you the output of the following code, because I have no idea what this
is referring to, unless it's referring to the fat arrow function itself....which doesn't seem useful.
var testFunction = () => { console.log(this) };
testFunction();
javascript this ecmascript-6 arrow-functions
I've read in several places that the key difference is that "this
is lexically bound in arrow functions." That's all well and good, but I don't actually know what that means.
I know it means it's unique within the confines of the braces defining the function's body, but I couldn't actually tell you the output of the following code, because I have no idea what this
is referring to, unless it's referring to the fat arrow function itself....which doesn't seem useful.
var testFunction = () => { console.log(this) };
testFunction();
javascript this ecmascript-6 arrow-functions
javascript this ecmascript-6 arrow-functions
edited Oct 10 '15 at 17:50
Felix Kling
549k126853910
549k126853910
asked Feb 6 '15 at 18:03
temporary_user_nametemporary_user_name
16.5k2897162
16.5k2897162
3
It simply captures the value ofthis
from the containing scope, treating it like any other variable.
– Barmar
Feb 6 '15 at 18:08
1
It's just so you don't have to do the kludge ofvar self = this;
and then useself
in the function.
– Barmar
Feb 6 '15 at 18:09
4
In your case, there is no enclosing context, or it's the global context, or module context, sothis
is whatever it is in that case, most likely null or window. To put it another way,this
has exactly the same value as it would if you added aconsole.log(this)
before the function assignment.
– user663031
Feb 6 '15 at 18:18
add a comment |
3
It simply captures the value ofthis
from the containing scope, treating it like any other variable.
– Barmar
Feb 6 '15 at 18:08
1
It's just so you don't have to do the kludge ofvar self = this;
and then useself
in the function.
– Barmar
Feb 6 '15 at 18:09
4
In your case, there is no enclosing context, or it's the global context, or module context, sothis
is whatever it is in that case, most likely null or window. To put it another way,this
has exactly the same value as it would if you added aconsole.log(this)
before the function assignment.
– user663031
Feb 6 '15 at 18:18
3
3
It simply captures the value of
this
from the containing scope, treating it like any other variable.– Barmar
Feb 6 '15 at 18:08
It simply captures the value of
this
from the containing scope, treating it like any other variable.– Barmar
Feb 6 '15 at 18:08
1
1
It's just so you don't have to do the kludge of
var self = this;
and then use self
in the function.– Barmar
Feb 6 '15 at 18:09
It's just so you don't have to do the kludge of
var self = this;
and then use self
in the function.– Barmar
Feb 6 '15 at 18:09
4
4
In your case, there is no enclosing context, or it's the global context, or module context, so
this
is whatever it is in that case, most likely null or window. To put it another way, this
has exactly the same value as it would if you added a console.log(this)
before the function assignment.– user663031
Feb 6 '15 at 18:18
In your case, there is no enclosing context, or it's the global context, or module context, so
this
is whatever it is in that case, most likely null or window. To put it another way, this
has exactly the same value as it would if you added a console.log(this)
before the function assignment.– user663031
Feb 6 '15 at 18:18
add a comment |
5 Answers
5
active
oldest
votes
Arrow functions capture the this
value of the enclosing context
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
So, to directly answer your question, this
inside your arrow function would have the same value as it did right before the arrow function was assigned.
3
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,this
is thewindow
object if we're in a browser andmodule.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value ofthis
.
– temporary_user_name
May 18 '17 at 18:33
2
The comment from @dave, 'this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.
– Kevin
Nov 12 '17 at 7:41
add a comment |
In order to provide the big picture I'm going to explain both, dynamic and lexical binding.
Dynamic Name Binding
this
refers to the object the method is called on. This is a regularly to be read sentence on SO. But it is still only a phrase, pretty abstract. Is there a corresponding code pattern to this sentence?
Yes there is:
const o = {
m() { console.log(this) }
}
// the important patterns: applying methods
o.m(); // logs o
o["m"](); // logs o
m
is a method because it relies on this
. o.m()
or o["m"]()
means m
is applied to o
. These patterns are the Javascript translation to our famous phrase.
There is another important code pattern that you should pay attention to:
"use strict";
const o = {
m() { console.log(this) }
}
// m is passed to f as a callback
function f(m) { m() }
// another important pattern: passing methods
f(o.m); // logs undefined
f(o["m"]); // logs undefined
It is very similar to the previous pattern, only the parenthesis are missing. But the consequences are considerable: When you pass m
to the function f
, you pull outm
of its object/context o
. It is uprooted now and this
refers to nothing (strict mode assumed).
Lexical (or Static) Name Binding
Arrow functions don't have their own this
/super
/arguments
binding. They inherit them from their parent lexical scope:
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
Apart from the global scope (Window
in browsers) only functions are able to form a scope in Javascript (and {}
blocks in ES2015). When the o.foo
arrow function is called there is no surrounding function from which baz
could inherit its this
. Consequently it captures the this
binding of the global scope which is bound to the Window
object.
When baz
is invoked by o.bar
, the arrow function is surrounded by o.bar
(o.bar
forms its parent lexical scope) and can inherit o.bar
's this
binding. o.bar
was called on o
and thus its this
is bound to o
.
add a comment |
Hope this code show could give you clearer idea. Basically, 'this' in arrow function is the current context version of 'this'. See the code:
// 'this' in normal function & arrow function
var this1 = {
number: 123,
logFunction: function () { console.log(this); },
logArrow: () => console.log(this)
};
this1.logFunction(); // Object { number: 123}
this1.logArrow(); // Window
add a comment |
Arrow function this
is pointing to the surrounding parent in Es6, means it doesn't scope like anonymous functions in ES5...
It's very useful way to avoid assigning var self to this which is widely used in ES5...
Look at the example below, assigning a function inside an object:
var checkThis = {
normalFunction: function () { console.log(this); },
arrowFunction: () => console.log(this)
};
checkThis.normalFunction(); //Object {}
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}
add a comment |
You can try to understand it by following the way below
// whatever here it is, function or fat arrow or literally object declare
// in short, a pair of curly braces should be appeared here, eg:
function f() {
// the 'this' here is the 'this' in fat arrow function below, they are
// bind together right here
// if 'this' is meaningful here, eg. this === awesomeObject is true
console.log(this) // [object awesomeObject]
let a = (...param) => {
// 'this is meaningful here too.
console.log(this) // [object awesomeObject]
}
so 'this' in fat arrow function is not bound, means you can not make anything bind to 'this' here, .apply won't, .call won't, .bind won't. 'this' in fat arrow function is bound when you write down the code text in your text editor. 'this' in fat arrow function is literally meaningful here. What your code write here in text editor is what your app run there in repl. What 'this' bound in fat arror will never change unless you change it in text editor.
Sorry for my pool English...
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f28371982%2fwhat-does-this-refer-to-in-arrow-functions-in-es6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
Arrow functions capture the this
value of the enclosing context
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
So, to directly answer your question, this
inside your arrow function would have the same value as it did right before the arrow function was assigned.
3
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,this
is thewindow
object if we're in a browser andmodule.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value ofthis
.
– temporary_user_name
May 18 '17 at 18:33
2
The comment from @dave, 'this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.
– Kevin
Nov 12 '17 at 7:41
add a comment |
Arrow functions capture the this
value of the enclosing context
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
So, to directly answer your question, this
inside your arrow function would have the same value as it did right before the arrow function was assigned.
3
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,this
is thewindow
object if we're in a browser andmodule.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value ofthis
.
– temporary_user_name
May 18 '17 at 18:33
2
The comment from @dave, 'this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.
– Kevin
Nov 12 '17 at 7:41
add a comment |
Arrow functions capture the this
value of the enclosing context
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
So, to directly answer your question, this
inside your arrow function would have the same value as it did right before the arrow function was assigned.
Arrow functions capture the this
value of the enclosing context
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
So, to directly answer your question, this
inside your arrow function would have the same value as it did right before the arrow function was assigned.
edited Feb 6 '15 at 18:30
answered Feb 6 '15 at 18:11
davedave
8,75122748
8,75122748
3
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,this
is thewindow
object if we're in a browser andmodule.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value ofthis
.
– temporary_user_name
May 18 '17 at 18:33
2
The comment from @dave, 'this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.
– Kevin
Nov 12 '17 at 7:41
add a comment |
3
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,this
is thewindow
object if we're in a browser andmodule.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value ofthis
.
– temporary_user_name
May 18 '17 at 18:33
2
The comment from @dave, 'this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.
– Kevin
Nov 12 '17 at 7:41
3
3
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,
this
is the window
object if we're in a browser and module.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value of this
.– temporary_user_name
May 18 '17 at 18:33
@torazaburo belated response -- the answer is it depends where that code snippet in the original question was placed. If it was at the top level,
this
is the window
object if we're in a browser and module.exports
if we're in a Node environment. The point is, the arrow function has no effect on the value of this
.– temporary_user_name
May 18 '17 at 18:33
2
2
The comment from @dave, '
this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.– Kevin
Nov 12 '17 at 7:41
The comment from @dave, '
this
inside your arrow function would have the same value as it did right before the arrow function was assigned' is what finally made it clicked for me.– Kevin
Nov 12 '17 at 7:41
add a comment |
In order to provide the big picture I'm going to explain both, dynamic and lexical binding.
Dynamic Name Binding
this
refers to the object the method is called on. This is a regularly to be read sentence on SO. But it is still only a phrase, pretty abstract. Is there a corresponding code pattern to this sentence?
Yes there is:
const o = {
m() { console.log(this) }
}
// the important patterns: applying methods
o.m(); // logs o
o["m"](); // logs o
m
is a method because it relies on this
. o.m()
or o["m"]()
means m
is applied to o
. These patterns are the Javascript translation to our famous phrase.
There is another important code pattern that you should pay attention to:
"use strict";
const o = {
m() { console.log(this) }
}
// m is passed to f as a callback
function f(m) { m() }
// another important pattern: passing methods
f(o.m); // logs undefined
f(o["m"]); // logs undefined
It is very similar to the previous pattern, only the parenthesis are missing. But the consequences are considerable: When you pass m
to the function f
, you pull outm
of its object/context o
. It is uprooted now and this
refers to nothing (strict mode assumed).
Lexical (or Static) Name Binding
Arrow functions don't have their own this
/super
/arguments
binding. They inherit them from their parent lexical scope:
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
Apart from the global scope (Window
in browsers) only functions are able to form a scope in Javascript (and {}
blocks in ES2015). When the o.foo
arrow function is called there is no surrounding function from which baz
could inherit its this
. Consequently it captures the this
binding of the global scope which is bound to the Window
object.
When baz
is invoked by o.bar
, the arrow function is surrounded by o.bar
(o.bar
forms its parent lexical scope) and can inherit o.bar
's this
binding. o.bar
was called on o
and thus its this
is bound to o
.
add a comment |
In order to provide the big picture I'm going to explain both, dynamic and lexical binding.
Dynamic Name Binding
this
refers to the object the method is called on. This is a regularly to be read sentence on SO. But it is still only a phrase, pretty abstract. Is there a corresponding code pattern to this sentence?
Yes there is:
const o = {
m() { console.log(this) }
}
// the important patterns: applying methods
o.m(); // logs o
o["m"](); // logs o
m
is a method because it relies on this
. o.m()
or o["m"]()
means m
is applied to o
. These patterns are the Javascript translation to our famous phrase.
There is another important code pattern that you should pay attention to:
"use strict";
const o = {
m() { console.log(this) }
}
// m is passed to f as a callback
function f(m) { m() }
// another important pattern: passing methods
f(o.m); // logs undefined
f(o["m"]); // logs undefined
It is very similar to the previous pattern, only the parenthesis are missing. But the consequences are considerable: When you pass m
to the function f
, you pull outm
of its object/context o
. It is uprooted now and this
refers to nothing (strict mode assumed).
Lexical (or Static) Name Binding
Arrow functions don't have their own this
/super
/arguments
binding. They inherit them from their parent lexical scope:
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
Apart from the global scope (Window
in browsers) only functions are able to form a scope in Javascript (and {}
blocks in ES2015). When the o.foo
arrow function is called there is no surrounding function from which baz
could inherit its this
. Consequently it captures the this
binding of the global scope which is bound to the Window
object.
When baz
is invoked by o.bar
, the arrow function is surrounded by o.bar
(o.bar
forms its parent lexical scope) and can inherit o.bar
's this
binding. o.bar
was called on o
and thus its this
is bound to o
.
add a comment |
In order to provide the big picture I'm going to explain both, dynamic and lexical binding.
Dynamic Name Binding
this
refers to the object the method is called on. This is a regularly to be read sentence on SO. But it is still only a phrase, pretty abstract. Is there a corresponding code pattern to this sentence?
Yes there is:
const o = {
m() { console.log(this) }
}
// the important patterns: applying methods
o.m(); // logs o
o["m"](); // logs o
m
is a method because it relies on this
. o.m()
or o["m"]()
means m
is applied to o
. These patterns are the Javascript translation to our famous phrase.
There is another important code pattern that you should pay attention to:
"use strict";
const o = {
m() { console.log(this) }
}
// m is passed to f as a callback
function f(m) { m() }
// another important pattern: passing methods
f(o.m); // logs undefined
f(o["m"]); // logs undefined
It is very similar to the previous pattern, only the parenthesis are missing. But the consequences are considerable: When you pass m
to the function f
, you pull outm
of its object/context o
. It is uprooted now and this
refers to nothing (strict mode assumed).
Lexical (or Static) Name Binding
Arrow functions don't have their own this
/super
/arguments
binding. They inherit them from their parent lexical scope:
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
Apart from the global scope (Window
in browsers) only functions are able to form a scope in Javascript (and {}
blocks in ES2015). When the o.foo
arrow function is called there is no surrounding function from which baz
could inherit its this
. Consequently it captures the this
binding of the global scope which is bound to the Window
object.
When baz
is invoked by o.bar
, the arrow function is surrounded by o.bar
(o.bar
forms its parent lexical scope) and can inherit o.bar
's this
binding. o.bar
was called on o
and thus its this
is bound to o
.
In order to provide the big picture I'm going to explain both, dynamic and lexical binding.
Dynamic Name Binding
this
refers to the object the method is called on. This is a regularly to be read sentence on SO. But it is still only a phrase, pretty abstract. Is there a corresponding code pattern to this sentence?
Yes there is:
const o = {
m() { console.log(this) }
}
// the important patterns: applying methods
o.m(); // logs o
o["m"](); // logs o
m
is a method because it relies on this
. o.m()
or o["m"]()
means m
is applied to o
. These patterns are the Javascript translation to our famous phrase.
There is another important code pattern that you should pay attention to:
"use strict";
const o = {
m() { console.log(this) }
}
// m is passed to f as a callback
function f(m) { m() }
// another important pattern: passing methods
f(o.m); // logs undefined
f(o["m"]); // logs undefined
It is very similar to the previous pattern, only the parenthesis are missing. But the consequences are considerable: When you pass m
to the function f
, you pull outm
of its object/context o
. It is uprooted now and this
refers to nothing (strict mode assumed).
Lexical (or Static) Name Binding
Arrow functions don't have their own this
/super
/arguments
binding. They inherit them from their parent lexical scope:
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
Apart from the global scope (Window
in browsers) only functions are able to form a scope in Javascript (and {}
blocks in ES2015). When the o.foo
arrow function is called there is no surrounding function from which baz
could inherit its this
. Consequently it captures the this
binding of the global scope which is bound to the Window
object.
When baz
is invoked by o.bar
, the arrow function is surrounded by o.bar
(o.bar
forms its parent lexical scope) and can inherit o.bar
's this
binding. o.bar
was called on o
and thus its this
is bound to o
.
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
const toString = Object.prototype.toString;
const o = {
foo: () => console.log("window", toString.call(this)),
bar() {
const baz = () => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
edited Sep 27 '16 at 14:45
answered Sep 27 '16 at 14:40
ftorftor
6,6962547
6,6962547
add a comment |
add a comment |
Hope this code show could give you clearer idea. Basically, 'this' in arrow function is the current context version of 'this'. See the code:
// 'this' in normal function & arrow function
var this1 = {
number: 123,
logFunction: function () { console.log(this); },
logArrow: () => console.log(this)
};
this1.logFunction(); // Object { number: 123}
this1.logArrow(); // Window
add a comment |
Hope this code show could give you clearer idea. Basically, 'this' in arrow function is the current context version of 'this'. See the code:
// 'this' in normal function & arrow function
var this1 = {
number: 123,
logFunction: function () { console.log(this); },
logArrow: () => console.log(this)
};
this1.logFunction(); // Object { number: 123}
this1.logArrow(); // Window
add a comment |
Hope this code show could give you clearer idea. Basically, 'this' in arrow function is the current context version of 'this'. See the code:
// 'this' in normal function & arrow function
var this1 = {
number: 123,
logFunction: function () { console.log(this); },
logArrow: () => console.log(this)
};
this1.logFunction(); // Object { number: 123}
this1.logArrow(); // Window
Hope this code show could give you clearer idea. Basically, 'this' in arrow function is the current context version of 'this'. See the code:
// 'this' in normal function & arrow function
var this1 = {
number: 123,
logFunction: function () { console.log(this); },
logArrow: () => console.log(this)
};
this1.logFunction(); // Object { number: 123}
this1.logArrow(); // Window
answered Jun 22 '16 at 23:32
Xin WangXin Wang
6,59343741
6,59343741
add a comment |
add a comment |
Arrow function this
is pointing to the surrounding parent in Es6, means it doesn't scope like anonymous functions in ES5...
It's very useful way to avoid assigning var self to this which is widely used in ES5...
Look at the example below, assigning a function inside an object:
var checkThis = {
normalFunction: function () { console.log(this); },
arrowFunction: () => console.log(this)
};
checkThis.normalFunction(); //Object {}
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}
add a comment |
Arrow function this
is pointing to the surrounding parent in Es6, means it doesn't scope like anonymous functions in ES5...
It's very useful way to avoid assigning var self to this which is widely used in ES5...
Look at the example below, assigning a function inside an object:
var checkThis = {
normalFunction: function () { console.log(this); },
arrowFunction: () => console.log(this)
};
checkThis.normalFunction(); //Object {}
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}
add a comment |
Arrow function this
is pointing to the surrounding parent in Es6, means it doesn't scope like anonymous functions in ES5...
It's very useful way to avoid assigning var self to this which is widely used in ES5...
Look at the example below, assigning a function inside an object:
var checkThis = {
normalFunction: function () { console.log(this); },
arrowFunction: () => console.log(this)
};
checkThis.normalFunction(); //Object {}
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}
Arrow function this
is pointing to the surrounding parent in Es6, means it doesn't scope like anonymous functions in ES5...
It's very useful way to avoid assigning var self to this which is widely used in ES5...
Look at the example below, assigning a function inside an object:
var checkThis = {
normalFunction: function () { console.log(this); },
arrowFunction: () => console.log(this)
};
checkThis.normalFunction(); //Object {}
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}
answered Sep 22 '17 at 13:58
AlirezaAlireza
47k12168119
47k12168119
add a comment |
add a comment |
You can try to understand it by following the way below
// whatever here it is, function or fat arrow or literally object declare
// in short, a pair of curly braces should be appeared here, eg:
function f() {
// the 'this' here is the 'this' in fat arrow function below, they are
// bind together right here
// if 'this' is meaningful here, eg. this === awesomeObject is true
console.log(this) // [object awesomeObject]
let a = (...param) => {
// 'this is meaningful here too.
console.log(this) // [object awesomeObject]
}
so 'this' in fat arrow function is not bound, means you can not make anything bind to 'this' here, .apply won't, .call won't, .bind won't. 'this' in fat arrow function is bound when you write down the code text in your text editor. 'this' in fat arrow function is literally meaningful here. What your code write here in text editor is what your app run there in repl. What 'this' bound in fat arror will never change unless you change it in text editor.
Sorry for my pool English...
add a comment |
You can try to understand it by following the way below
// whatever here it is, function or fat arrow or literally object declare
// in short, a pair of curly braces should be appeared here, eg:
function f() {
// the 'this' here is the 'this' in fat arrow function below, they are
// bind together right here
// if 'this' is meaningful here, eg. this === awesomeObject is true
console.log(this) // [object awesomeObject]
let a = (...param) => {
// 'this is meaningful here too.
console.log(this) // [object awesomeObject]
}
so 'this' in fat arrow function is not bound, means you can not make anything bind to 'this' here, .apply won't, .call won't, .bind won't. 'this' in fat arrow function is bound when you write down the code text in your text editor. 'this' in fat arrow function is literally meaningful here. What your code write here in text editor is what your app run there in repl. What 'this' bound in fat arror will never change unless you change it in text editor.
Sorry for my pool English...
add a comment |
You can try to understand it by following the way below
// whatever here it is, function or fat arrow or literally object declare
// in short, a pair of curly braces should be appeared here, eg:
function f() {
// the 'this' here is the 'this' in fat arrow function below, they are
// bind together right here
// if 'this' is meaningful here, eg. this === awesomeObject is true
console.log(this) // [object awesomeObject]
let a = (...param) => {
// 'this is meaningful here too.
console.log(this) // [object awesomeObject]
}
so 'this' in fat arrow function is not bound, means you can not make anything bind to 'this' here, .apply won't, .call won't, .bind won't. 'this' in fat arrow function is bound when you write down the code text in your text editor. 'this' in fat arrow function is literally meaningful here. What your code write here in text editor is what your app run there in repl. What 'this' bound in fat arror will never change unless you change it in text editor.
Sorry for my pool English...
You can try to understand it by following the way below
// whatever here it is, function or fat arrow or literally object declare
// in short, a pair of curly braces should be appeared here, eg:
function f() {
// the 'this' here is the 'this' in fat arrow function below, they are
// bind together right here
// if 'this' is meaningful here, eg. this === awesomeObject is true
console.log(this) // [object awesomeObject]
let a = (...param) => {
// 'this is meaningful here too.
console.log(this) // [object awesomeObject]
}
so 'this' in fat arrow function is not bound, means you can not make anything bind to 'this' here, .apply won't, .call won't, .bind won't. 'this' in fat arrow function is bound when you write down the code text in your text editor. 'this' in fat arrow function is literally meaningful here. What your code write here in text editor is what your app run there in repl. What 'this' bound in fat arror will never change unless you change it in text editor.
Sorry for my pool English...
answered Apr 12 '17 at 8:44
PlasmatiumPlasmatium
28437
28437
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f28371982%2fwhat-does-this-refer-to-in-arrow-functions-in-es6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
It simply captures the value of
this
from the containing scope, treating it like any other variable.– Barmar
Feb 6 '15 at 18:08
1
It's just so you don't have to do the kludge of
var self = this;
and then useself
in the function.– Barmar
Feb 6 '15 at 18:09
4
In your case, there is no enclosing context, or it's the global context, or module context, so
this
is whatever it is in that case, most likely null or window. To put it another way,this
has exactly the same value as it would if you added aconsole.log(this)
before the function assignment.– user663031
Feb 6 '15 at 18:18