“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

We saw four rules for the this binding in function calls in the previous article, but what if more than one rule can be applied to a call location? To solve this problem, these rules must be prioritized, which is what we’ll cover next.

preface

👉 JavaScript this binding rule

Rules to review

  • The default binding

    Example: the function foo () {… } foo() ,

    Foo’s this is the window.(strictly bound to undefined by default), and such a binding is called a default binding.

  • Implicit binding

    The function is called in some context object, and this is bound to that context object.

    Example: the function foo () {… }; var obj = { foo : foo }; obj.foo(); .

    This in foo is obj. This type of binding is called implicit binding

  • According to the binding

    The function is called with call,apply,bind, and this binds the first argument of call,apply,bind. ,

    Example: the function foo () {… }; foo.call(obj); .

    This in foo is obj, and such binding is called explicit binding.

  • The new binding

    The function is decorated with new, and this binds to the newly created object

    Var bar = new foo();

    This in the function foo is a newly created object named foo, which is then assigned to bar, called a new binding.

Priority analysis

Without a doubt, the default binding has the lowest priority of the four rules, so we can leave it out for now.

Which has higher priority, implicit or explicit binding?

function foo() { console.log( this.a ); } var obj1 = { a: 2, foo: foo }; var obj2 = { a: 3, foo: foo }; // implicitly bind obj1.foo(); // 2 obj2.foo(); // 3 // display binding obj1.foo.call(obj2); // 3 obj2.foo.call( obj1 ); / / 2Copy the code

Conclusion: Explicit binding has higher priority than implicit binding

Which has higher priority: new binding or implicit binding?

Conclusion: This binds the foo constructor when it exists in both the new keyword binding and the implicit binding, so the new keyword takes precedence over the implicit binding

How does the priority of the new binding compare with that of the display binding?

Conclusion: When present in both the new keyword binding and the display binding, this binds the bar constructor, so the new keyword takes precedence over the display binding.

Arrow function this

Note that the arrow function does not have its own this; its this comes from the parent scope.

As in the above example, foo is also called, because the arrow function does not bind this, so we go to the parent of foo to look for this and find the global object Window.

conclusion

The priority of the four types of binding is

New keyword > Explicit binding > Implicit binding > Default binding

Determine the this call rule

  • Does the function have a new binding call: if so, this is bound to the newly created object.var bar = new foo()
  • Does the function show binding via apply, call, or bind: if so, this is bound to the specified object.var bar = foo.call(obj2)
  • Whether the function is called implicitly in an object method: if so, this is bound to the calling object.var bar = obj1.foo()
  • In strict mode, this is bound to undefined; in non-strict mode, this is bound to global objects.var bar = foo()

References:

this & Object Prototypes

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 super detailed SUMMARY of JS mapping (Map)

👉 Do you really know JavaScript destruct assignment?

👉 JS guide to using the built-in Date object Date

👉 recursion of function progression and case analysis