JavaScript this comprehensive parsing (2)

Before we understand the binding process of this, we first understand the invocation location (not the declaration location), and most importantly, the call stack is parsed (just to get to all the functions called at the current execution location).

The call location that we care about is in the previous invocation of the currently executing function, for example:

Well, the call location we've found, and then let's take a look at the four rules of this binding

The first rule: the default binding (Independent function call), which can be seen as the default rule when other rules cannot be applied, see the code

Foo () in the code is called directly with a function reference without any adornments, so only the default binding can be used and no other rules can be applied. If you use strict mode (strict modes),

The global object cannot be used for the default binding, so this is bound to undefined.

Second rule: implicit binding

Look at the code

When a function refers to a context object, the implicit binding rule binds this to the context object, because when Foo is called

This is bound to obj, so this.a and obj.a are the same. The object property reference chain has only the previous layer, or the last layer is in the calling position.

Such as:

Implicit loss: See Code

Although bar is a reference to Obj.foo, in fact it refers to the Foo function itself, so bar () at this point is actually a function call without any adornments, so the default binding is applied.

Parameter passing is actually an implicit assignment, so the result is the same as the result above

If you pass the function into a language built-in function instead of passing in the function you declared, the result is the same, no difference

Third rule: Show bindings

When it comes to the call and apply functions, how do they work?

Their first argument is an object that is prepared for this, and then binds it to this when the function is called. Because you can specify this binding object directly, it is called a display binding

Look at the code:

If you pass in a primitive value (String type, Boolean type, or number type) as the bound object of this, the original value is converted to his

The object form (that is, the new String (...), the new Boolean (...) or new number (...). This is often referred to as boxing.

Hard binding: Method 1

Method 2

Because hard binding is a very common pattern, ES5 provides a built-in approach to Function.prototype.bind, using the following

Rule four: New binding

Using new to invoke the function, the following actions are performed automatically:

1. Create a new object

2. This new object will be executed [[prototype]] connected

3. This new object is bound to this of the function call

4, if the function does not return other objects, then the function call in the new expression will automatically return the new object

Look at the following code, the new this binding

JavaScript this comprehensive parsing (2)