ECMA-262 (JavaScript) standard in pictures, part 2

The first part of the article looked at the execution context , lexical environment, and Function objects . The second part is about using this .

How does this work?

In the execution context, in addition to VariableEnvironment, there is a ThisBinding field . When searching for ordinary variables, VariableEnvironment is used , while accessing through this is ThisBinding . ThisBinding is set in the execution context depending on how the function is called. If the function is called through the point of () , then ThisBinding will point to the o object . In all other cases, ThisBinding will reference the global object . In this case, the function can be the same.

For example, create a print function and an o object , and then add a function reference to the object. It turns out that the function can be called both print(), and how o.print(). ThisBinding will vary. If you copy the link to o.print into the new variable print2 , then when print2 is called , ThisBinding will point to the global object, despite the fact that the link was taken from the object.



Once again, if the call is "through the point", then ThisBinding indicates that it is up to the point. Otherwise, ThisBinding refers to the global object .

More on how to installthis when calling a function can be read in the following sections of the standard:

• 10.4.3 Entering Function Code
• 11.2.3 Function Calls
• 13.2.1 [[Call]]

What happens when you call setTimeout

When using callbacks , a reference is passed to the function, but not to the object. Therefore, when calling callback, this will point to a global object .

In the case of setTimout, the first argument is a reference to the func function . After the specified delay, setTimeout calls it. The call is made without a dot, just like func()that is why ThisBinding points to a global object .



The standard way to solve this problem is to save the reference to the object in the environment of the auxiliary function. Having a reference to an object, you can use the Function.prototype.call function. When calling a function using call, you can explicitly specify the link that will be written to thisBinding context.

So, when called print.call(o), a context will be created, in ThisBinding of which a reference to o will be written .

Such a function is usually called bind and can be implemented as follows.

...
// bind возвращает функцию, которая вызывает функцию f
function bind(thisArg, f) {
  return function wrapper() {
    f.call(thisArg);
  }
}
// пользоваться bind надо так
setTimeout(bind(o, o.print), 1);

When the bind function is called , an environment is created and a Function object named wrapper is created . In thisArg and f stored object reference function and print . The scope of the new Function object places a reference to the environment . When you exit bind, the context is destroyed, but the environment remains, since wrapper refers to it .



When setTimeout is called after a delay of milliseconds, the wrapper function is called . While creatingenvironment in the outer field the value of the scope of the called function is written . In this case, outer will refer to the environment of the bind function . When called f.call(thisArg)from wrapper, both variables will be found in this environment . Then, when calling call , a context will be created for print , where ThisBinding will point to o .



JavaScript has a standard Function.prototype.bind method that allows you to remember not only this , but also function arguments.

// вместо
setTimeout(bind(o, o.print), 1);
// правильнее использовать стандартный bind
setTimeout(o.print.bind(o), 1);

In the next part, we will talk about prototype inheritance.