This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

Learn this pointing in Chinese

  • You need to know the difference between first person and second person and third person in Chinese
  • This article is aimed at students who have basic JS but still can’t figure out what this refers to
  • If you know the call and apply and bind methods, that’s great

Let’s start with the news

“The demon in me has been locked away for so many years, and now the chains are loose.”

“I was scared, I was lonely, I was confused, AND I was going to fight back against society, the source of my suffering, and I wanted to hurt society as much as I could and then die.”

The chilling words were written by Joseph Duncan, a serial killer in North Dakota, on May 11, 2005.

By the time the text was read nearly two months later, he had brutally murdered three members of a family of five and kidnapped two other children, aged eight and nine.

Let’s say you’re a cop and you’ve arrested a suspect

How did you feel when you found this diary in his house?

You’d think, if the suspect wrote it himself, wouldn’t that be an admission of guilt?

Of course, the suspect could also argue that the diary was not written by me at all, but a joke I copied from the Internet

In fact, we only need to make a small change in the above text, the strong evidence of murder, suddenly become less strong

The demon in him had been locked away for so many years, and now the chains were loose. He’s scared, he’s lonely, he’s confused, he’s going to fight back against society, the source of his suffering, and he wants to hurt society as much as he can and then die.

See? I’m just changing the first person to the third person.

You can hardly convict a suspect for that. Because it looks so much like a novel

Why the difference?

With that in mind, let’s begin today’s “This” lesson.

1. What is this

This: This, this

So let’s look at some code

The result is very predictable, printing the OBJ object itself

In JS, this belongs to a keyword, that is, it can be understood as a system command

In general, we interpret this to mean: the current object

Which begs the question: who is the current object?

In the code example above, this stands for the object obj

Let’s look at one more piece of code

The result prints the Window object

If you’re wondering about this print, you may be missing a common sense question

Window objects can be omitted!

So, the above code is actually equivalent to:

Let’s look at another common example, event binding

btn.onclick = function() {
    console.log(this);
}
btn.onclick(); // Call the function manually
// The function can also be called automatically by the browser by clicking the button with the mouse
Copy the code

Eventually, whether manually called or automatically called by a mouse click browser

The printed results are all BTN objects

2. We seem to have concluded a rule that this refers to

This always refers to the object calling the function

If your code is structured like this

Object. Function ();Copy the code

So, this in the function must refer to the object itself

Assuming this conclusion is true, let’s test our conjecture!

You can see this in the example above

The window object shares a function show with obj1 and obj2 objects

Three objects, using the same function

But the “this” printed out is different

window.show(); Print out the window object

obj1.show1(); Print out the obj1 object

obj2.show2(); Print out the obj2 object

This, once again, seems to confirm our conjecture: this refers to the object from which the function is called

3. Science is rigorous, and we still need to check and verify before drawing conclusions

Here’s another example:

In fact, I just added a delayer to the original code and set the time to 0

Will the printed “This” change?

You can think about it first

It is often intuitive to think that the retarder merely slows down the execution time and the print remains the same as the BTN object, unchanged

But after testing, it turns out that the actual print result is a Window object

Were we wrong about what we just thought?

To explain this phenomenon, we need to look at the code again

Notice that there are two functions in this code, and we’ll call them function A and function B

As we guessed earlier, this refers to the object from which the function is called

So, this refers to the function that will depend on it

And this function, is it function A or is it function B?

And you can see that in the code, this is clearly in function B

So, it turns out that no BTN is printed, and now we’re not surprised

Because this is no longer inside function A, it’s inside function B

You might also ask, why functionBIn the thisPoint to thewindow?

In fact, this is a special case, the function passed in timer, which object is called, we do not know

In this case, this all refers to the window

Just keep this in mind for now, and when you’re done with scope chains, you’ll understand the nature of it

4. Back to where we started

Assuming the suspect wrote the journal. But it’s all in the third person. Then it’s hard to say who “he” is

Conversely, if the diary is written in the first person. So “I” must be referring to the suspect himself

The this keyword in the JS function is equivalent to the first person pronoun I when we speak

Here’s an example:

A to B: “I’m going to kill you!”

Here I’m referring to A, you’re referring to B

B says to A, “I’ll kill you!”

Here I’m referring to B, you’re referring to A

So you see, the same word, it can refer to anyone, depending on whose mouth it comes from

So far, we can almost reach the conclusion thatHere are a few exercises to finally verify

The code above finally prints the obj object

No matter how many twists and turns we go through, we only end up with one conclusion, which object calls this function?

I took the code a step further

In the above code, the final print is still an OBJ object

Of course, there are always a few exceptions, like this one:

We have to ask, from which object is m2 called?

We tried every possible way, but it turned out to be wrong. We never know which object m2 is called by, as if it were just executed

And the actual print?

Not surprisingly, the window object

Final conclusion

  1. The this keyword is only identified at runtime

  2. This refers to the object on which the function is called

  3. When a function executes without an explicit call object, this points to the window

6. The problem derived from this

I left a problem unsolved just now

We expect this to point to BTN, but this now points to window

How can this problem be fixed? There are many ways

If you don’t know call, apply, or bind, then I’m afraid you can only understand method A

7. Next, learn the arrow function of ES6

1. How to determine this of arrow function?

Since the arrow function doesn’t have its own this, it’s easy to pretend it doesn’t exist, like this:

So this is pretty clear

2. Can the arrow function use call to change the direction of this?

Can’t!!!!! Trying to change the this of the arrow function is futile.

8. One last exceptionThe constructor

1. What is a constructor?

Let’s say we have a function Fn, and we have two ways to call it

  • Ordinary call Fn()
  • Cooperate withnewKeyword to callnew Fn()

In the second call, the function becomes a constructor

Note that in the constructor, the above conclusion is not true!!

2. Who is this in the constructor?

Look forward to the next article, constructors and Classes.