👋👋 Hi, I’m Chuck, a not-so-serious kid who loves the front end.

This is the 4th day of my participation in the August More Text Challenge

🚀🚀 the first man of today’s article is this. I will try to make you understand this further by making it as easy as possible. Without further ado, let’s see ~ 💪

Two misunderstandings

There are two common misconceptions about this, and the main culprit is that we subconsciously try to take this literally, but both are not quite right.

To self? ❌

The first common mistake is to interpret it as referring to the function itself. Although it is true that a function is an object, it is not true.

Let’s say we have an example here. A foo function has a loop that loops through five times and calls foo five times, and foo has a count property (the function is an object) that internally wants to count that number of times on each call.

Is that ok? Of course not.

Why is that? Foo does have a count attribute, but the two count attributes are different, okay?

How can I put it? Here’s a picture that might be a little more intuitive:

Foo. count calls the count on foo, whereas this.count calls the count on the window object (I’ll explain why). Two counts are different, so if you mix them up, you won’t get the desired effect.

Point to function scope? Also ✅ ❌, too

This understanding is correct in one case and wrong in another.

Note that this does not point to lexical scope in any case. In some cases, the wrong move can have the desired result, but it’s always unreliable, and if you make a big mess, you can just go home.

So, what is this?

When a function is called, an execution context is created. The execution context contains information about the function call stack, how the function was called, the parameters passed in, and so on.

This is an attribute of the execution context.

How to find the correct “this”

The eight-part essay is really annoying, say to go, you pour say how to find this ah.

Don’t worry, it’s coming. The following method is universal and simple!

1. Locate the call location

What do we mean by call location? The call location is where the function is executed in the code!

How to find the call location quickly? We can use the call stack, and the second element of the call stack is our call location. Here’s a quick example:

Don’t look at the answer, think for yourself, where are the three functions called?

Here are the correct answers:

2. Apply binding rules

There are a total of 4 binding rules, here to give you a complete list, with priority selection.

  • Default binding: independent function calls
  • Implicit binding: Consider context objects
  • Explicit binding: call, apply, bind
  • new
  1. The default binding is independent function calls

What do we mean by independent function calls?

Bar (), foo(), baz(), that’s an independent function call, that’s a direct function name call, nothing in front of it.

If the default binding is applied, this will be bound to the Window.

It is important to note that the function must run in non-strict mode,thisIs bound toWindowOn. In strict mode, the default binding will saythisBound to theundefined.

  1. Implicit binding considers context objects

Consider the context object when you call a function. For example:

Note here that there is an implicit loss problem, look at the following code!

This is a bit surprising, because both bar and obj.foo are references to function foo. So calling bar directly here applies the default binding rules directly.

  1. Explicitly bind call, apply, and bind

Since this has such complicated rules, can I manually bind it to an object in case I always accidentally make an error? Sure. Call, apply, and bind can do this.

First say: call, apply

The first argument is the same as the object to which this is bound!

Where they differ are the remaining parameters.

function foo(num1, num2) {
  console.log(num1, num2);
} 

var obj = {};

foo.call(obj, 1.2); // Move the parameter one position back
foo.apply(obj, [1.2]); // The parameters are written in an array

Copy the code

Again, bind

Bind is a Function attached to function. prototype that takes an argument, the object to which this is bound.

  1. new

When it comes to constructors, what does the flow of constructors look like? Let’s start with a constructor:

function Person(name, age, height, weight) {
  this.name = name;
  this.age = age;
  this.height = height;
  this.weight = weight;
}

let chuck = new Person('Chuck'.18.180.120);
Copy the code

Do you know what happens when you use new?

Let me tell you one by one:

  1. Create an empty object.
  2. Link empty object [[prototype]]
  3. willthisBind to the empty object or the same face and assign the parameter tothis.
  4. If the function does not return another object (normally our constructor does not return another object), it willthis.

All right, so far. All four binding rules for this are complete. Of course, it’s only sketchy here. More details, I am preparing.

In fact, these days in nuggets more text, I have been thinking about a thing, a long technical article we really can see? I’m trying my best to give you a different experience, but so far I haven’t found a good idea. Take your time and you will find one day, and I have a feeling that it will be very soon. This idea will have a big impact on me too!