Question

At this link, Mozilla explains what ‘this’ references in the following way:

In general, the object bound to this in the current scope is
determined by how the current function was called, it can’t be set by
assignment during execution, and it can be different each time the
function is called.

Under normal circumstances, I understand this and how its reference changes.

The book Pro JavaScript Design Patterns says the following about lexical scope

JavaScript is also lexically scoped, which means that functions run in
the scope in which they are defined, not the scope they are executed
in.

So ‘this’ depends on how the current function was called, while lexical scope means functions are run in the scope in which they are defined.

My question is, can this ever be part of the lexical scope, and, if so, how do I understand the fact that this depends on how the current function was called, while lexical scope restricts functions to the scope in which they are defined.

Answer 1

Just think of them as separate concerns.

• The variable scope of a function will never change.

• The value of this will change depending on how the function is invoked. Given the same function, different invocations give the same function a different this.

  var foo = (function() {
                var bar = "bar";
                return function() { console.log(bar, this); };
            })();
  
  foo();    // the default `this`
  
  var someObj = {some: "object"};
  foo.call(someObj);    // `this` is someObj
  
  var aDiffObj = {aDiff: "object"};
  foo.apply(aDiffObj);  // `this` is aDiffObj
  
  var anotherObj = {another: "object", foo:foo}; 
  anotherObj.foo();     // `this` is anotherObj
  
  var binderObj = {binder: "object"};
  var bound = foo.bind(binderObj);
  bound();              // `this` is binderObj
  
  new foo(); // `this` is a new object being constructed, 
             //      which has the prototype of `foo` in its prototype chain
  

  All the invocations have access to the bar variable, but a different this value.

So given the current function syntax in ECMAScript, this will never be taken from the lexical scope, but will always be assigned a value based on the invocation.

There’s a new function syntax in the works that will likely have a lexical this, but that’s sometime in the future.