What does "this" refer to in arrow functions in ES6?

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

Answer 1

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.

Answer 2

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 . om() 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 out m 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 .

Answer 3

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 

Answer 4

Arrow function this<\/code> is pointing to the surrounding parent in Es6, means it doesn't scope like anonymous functions in ES5...

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

Answer 5

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

Answer 6

In another example, if you click the age button below

<script>
var person = {
    firstName: 'John',
    surname: 'Jones',
    dob: new Date('1990-01-01'),
    isMarried: false,
    age: function() {
        return new Date().getFullYear() - this.dob.getFullYear();
    }
};

var person2 = {
    firstName: 'John',
    surname: 'Jones',
    dob: new Date('1990-01-01'),
    isMarried: false,
    age: () => {
        return new Date().getFullYear() - this.dob.getFullYear();
    }
};

</script>



<input type=button onClick="alert(person2.age());" value="Age">

Answer 7

Arrow function never binds with this<\/code> keyword

var env = "globalOutside";
var checkThis = {env: "insideNewObject", arrowFunc: () => {
console.log("environment: ", this.env);
} }

checkThis.arrowFunc()   // expected answer is environment: globalOutside

// Now General function 
var env = "globalOutside";
var checkThis = {env: "insideNewObject", generalFunc: function() {
console.log("environment: ", this.env);
} }
checkThis.generalFunc() // expected answer is enviroment: insideNewObject

// Hence proving that arrow function never binds with 'this'

Answer 8

this<\/em> will always refer to the global object when used inside an arrow function. Use the regular function declaration to refer to the local object. Also, you can use the object name as the context (object.method, not this.method) for it to refer to the local object instead of the global(window).

"

Answer 9

Differences between arrow functions to regular functions: (taken from w3schools<\/a> )

:
 <button id='btn'>click me regular function<\/button> <p id="demo">Regular function: 
 <hr> <p><i>With arrow function this represents the <b>owner of the function(=the window object):
 <button id='btn2'>click me arrow function<\/button> <p id="demo2">Arrow function: 
<\/code><\/pre>

"

Answer 10

A related issue: