What does “this” refer to in arrow functions in ES6?












40















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();









share|improve this question




















  • 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 use self 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 a console.log(this) before the function assignment.

    – user663031
    Feb 6 '15 at 18:18


















40















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();









share|improve this question




















  • 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 use self 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 a console.log(this) before the function assignment.

    – user663031
    Feb 6 '15 at 18:18
















40












40








40


10






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();









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 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 use self 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 a console.log(this) before the function assignment.

    – user663031
    Feb 6 '15 at 18:18
















  • 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 use self 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 a console.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














5 Answers
5






active

oldest

votes


















27














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.






share|improve this answer





















  • 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








  • 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



















14














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.






share|improve this answer

































    2














    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





    share|improve this answer































      2














      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…}





      share|improve this answer































        1














        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...






        share|improve this answer























          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          27














          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.






          share|improve this answer





















          • 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








          • 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
















          27














          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.






          share|improve this answer





















          • 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








          • 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














          27












          27








          27







          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.






          share|improve this answer















          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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 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





            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





            @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





            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













          14














          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.






          share|improve this answer






























            14














            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.






            share|improve this answer




























              14












              14








              14







              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.






              share|improve this answer















              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]






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Sep 27 '16 at 14:45

























              answered Sep 27 '16 at 14:40









              ftorftor

              6,6962547




              6,6962547























                  2














                  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





                  share|improve this answer




























                    2














                    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





                    share|improve this answer


























                      2












                      2








                      2







                      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





                      share|improve this answer













                      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






                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Jun 22 '16 at 23:32









                      Xin WangXin Wang

                      6,59343741




                      6,59343741























                          2














                          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…}





                          share|improve this answer




























                            2














                            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…}





                            share|improve this answer


























                              2












                              2








                              2







                              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…}





                              share|improve this answer













                              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…}






                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Sep 22 '17 at 13:58









                              AlirezaAlireza

                              47k12168119




                              47k12168119























                                  1














                                  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...






                                  share|improve this answer




























                                    1














                                    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...






                                    share|improve this answer


























                                      1












                                      1








                                      1







                                      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...






                                      share|improve this answer













                                      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...







                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Apr 12 '17 at 8:44









                                      PlasmatiumPlasmatium

                                      28437




                                      28437






























                                          draft saved

                                          draft discarded




















































                                          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.




                                          draft saved


                                          draft discarded














                                          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





















































                                          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







                                          Popular posts from this blog

                                          Monofisismo

                                          Angular Downloading a file using contenturl with Basic Authentication

                                          Olmecas