What is lexical 'this'?

Question

Could someone please give me a brief introduction to lexical this?

\"An arrow function expression (also known as fat arrow function) has a shorter syn

Answer 1

Does it mean that when I call a function member using the 'this' ref from a 'Fat Arrow' Function the 'this' always refers to the enclosing 'this'?

The answer to your query is Yes. As you have already stated fat arrow functions don't have a this reference so they use the reference of the enclosing context, which in turn, gives us a chance to control how the call to this inside a fat arrow function would respond.

For e.g.:

Having fat arrow function inside an object which makes use of this would look for outer context. In this case, the context is window:

var foo = {
  bar: () => this.baz    // 'this' is window      
}

However, if you use the ES6 syntax which is public class field syntax:

class MyClass {
  handleEvent = () => {
    this.letsCode();    // 'this' is instance of MyClass
  }
}

There are many other instances (like using in render function of React on an HTML element to set click listeners) which are out of the scope of this question where fat arrow functions are used and this is appropriately bound to the context in which it is used thus giving us the facility to control its nature. Hope it helps!

Answer 2

As a way to describe the behavior of this in arrow functions, the term "lexical this" is somewhere between confusing and wrong.

The behavior is quite simply is that this in an arrow function refers to the this in the surrounding function--or perhaps it would be simpler and more accurate to just say that the arrow function does not define (or "bind") its own this.

The unfortunately terminology of "lexical this" may have been perpetuated by a poor choice of wording in the MDN article on arrow functions (which until recently also encouraged people to use the obsolete term "fat arrow function"). This has now been cleaned up. Note also that the spec never uses the term "lexical" in relation to this in arrow functions. I'd be curious to know who came up with this expression.

Answer 3

I wrote an article about this, the gist of which is: do not think about what "lexical this" means. Do not worry about what "this" means within an arrow function. You already know (or at least, if you don't, it's the fault of your own confusion about some outer functional scope, and not the fault of the arrow function).

You may have been conditioned over the years to get anxious about what "this" would end up meaning when you needed to use it within some nested or higher-order function. But with arrow functions, you just can STOP worrying about it. You almost certainly already know what "this" refers to in the context that you're currently in: BUT... within the arrow function, it hasn't changed. So you can think of arrow functions as the simple case, and function(){} as the more complex one.

Do you write some function and start an if(){} block and worry about what "this" could have changed to inside it? No? Same with arrow functions. That's what "lexical this" means. It means "Hakuna matata."

Answer 4

You seem to have the correct understanding of what happens with this in an arrow function. I will offer an explanation that I think adds to the conversation and hopefully solidifies your understanding.

As you probably know, when you define a function and use a variable inside of it, it checks if the variable has been defined in its scope. If it is, it uses it! If not, it checks the enclosing scope for that variable definition. It keeps checking enclosing scopes until it finds the variable or reaches global scope. Now, function definitions that are not arrow functions define this for you, implicitly. Thus, they will never check an enclosing scope when you try to use this in their scope (because they find it in their own scope!). Arrow functions do NOT define their own this, so they go to the enclosing scope and look for it just as they would with any variable you try to use in their scope.

Answer 5

Using this in es6 fat arrow function, makes this to have lexical scope in the sense that what this refers to in that particular scope is assigned to it, unlike the normal es5 function declaration which keeps checking for what this is referenced to starting from the innermost scope to the global scope till it finds it.

function foo() {
setTimeout(() => {
    // `this` here is lexically adopted from `foo()`
    console.log( this.a );
},100);
}
var obj = {
  a:2
};
foo.call(obj); //2

Meanwhile, pre es6, there was a way to implement lexical scoping in javascript, by assigning a this keyword to a variable, which to an extent makes this local to the scope

function foo() {
var self = this; // lexical capture of `this`
setTimeout( function(){
    console.log( self.a );
}, 100 );
}
var obj = {
  a: 2;
};
foo.call(obj); //2

Answer 6

Lets say you have a click listener. In that listener you are performing some AJAX operation like setTimeout. After the set time has been reached, the code inside the callback will be executed. Inside that callback you may have accessed this to change the color of the clicked button. But the control will be out of context due to AJAX operation. ES2015 introduced the arrow function to fix that problem. The arrow function captures the this value of the enclosing context.

The example use-case is:

$('.btn').click(function () {
    setTimeout(function () {
        $(this).text('new'); 
        // This will cause an error since function() defines this as the global object.
    } ,100); 
}); 

To avoid this case:

$('.btn').click(function () { // <- Enclosing context
    setTimeout( () => {
        $(this).text('new')  } 
        // This works, because this will be set to a value captured from the enclosing context.
      ,100);
});