Parse the mysteries of this in Javascript

This is a special keyword in JavaScript. It is widely used, and its flexibility makes it powerful, but it is doomed to be difficult to use at the same time. I was dizzy when I first started learning it. I checked a lot of information in order to thoroughly understand it. Then I sorted out what I learned and expressed it in an easy-to-understand manner. I thought of the right to take study notes. At the same time, I can also give reference to the required children's shoes. This is a special keyword in JavaScript. It is widely used, and its flexibility lays the foundation for its strength, but it is doomed to be difficult to use at the same time.. I was dizzy when I first started learning it. I checked a lot of information in order to thoroughly understand it. Then I sorted out what I learned and expressed it in an easy-to-understand manner. I thought of the right to take study notes. At the same time, I can also give reference to the required children's shoes. ^_^

What is this?

The meaning of this keyword is clear and specific, that is, it refers to the current object. This means that this is true under some circumstances.

This is divided into three situations: Global object, current object, or any object. Determining the condition depends entirely on the function call method. The main function calls in JavaScript include the following methods:

Called as a common function

Call as an object Method

Called as a constructor

Use apply or call

1. As a common function call

------ This is our most common method. this method is a global call. Here this refers to a global object.

function test(){ this.a = 5; alert(this.a); alert(this);}test(); // 5 [object Window]

As shown above: for a global function, the function owner is the current page, that is, the window object. Therefore, the call object of example () is the Window, so this indicates the Window;

In another way:

var a = 5;function test(){ var a = 10; alert(this.a);}test(); //5

As shown above: the test () function also declares a variable a, but the result of calling test () is 5, which indicates that this inside the function represents the global object, namely Window;

Another way:

var a = 5;function test(){ this.a = 10;}test();alert(a); //10

As shown above: Call the test () function and change the value of global variable a, that is, this represents a global object.

2. Call as an object function

------ When a function is called by an object, this points to this object.

Var name = "Zhang San"; var person = {name: "Li Si", showName: function () {alert (this. name) ;}} person. showName (); // output Li Si var other = person. showName; other (); // output Part 3

As shown above: the result of executing person. showName () is Li Si, indicating that this in showName points to person;

After the person. showName is assigned to other, because other is a global variable, it can be considered as an attribute of the window object. Therefore, when you call other (), it is equivalent to calling window. other (), so this points to window, and the output result is Michael;

Therefore, when called as a function object, this points to the called object.

3. Call as a constructor

------ The constructor generates a new object through this function. At this time, this will point to this new object;

Function animal () {this. name = "";} var dog = new animal (); alert (dog. name); // output beans

As shown above: generate an object type object using the new keyword and assign it to dog. If you execute this constructor, this in the constructor scope points to this object, this is pointing to dog, so this. name is equivalent to dog. name, so the output result is Bean.

4. Use apply or call

------ Apply () is a method of a function object. It applies a method of an object and replaces the current object with another object.

Var a = "Zhang San"; function test () {alert (this. a) ;}var B ={}; B. a = "Li Si"; B. n = test; B. n (); // Li Si B. n. apply (); // Zhang San B. n. apply (B); // Li Si

As shown above: B. n () ---- because the called object is B, this points to B, this. a = B. a, so the result is Li Si;

B. n. apply ---- when the apply () parameter is null, there is no object to replace the current object. The Global object is used by default. Therefore, this points to window and the result is Michael;

B. n. apply (B) ---- refers to replacing the current this point with B, so this points to B and the result is Li Si.

(This article has referred to the online materials and some books. If you have any mistakes, please note that you will correct them in time)

Summary:This article introduces the meaning of the this keyword in JavaScript in various situations. The examples are very simple, which is more helpful for further understanding. Although this is only a small concept in JavaScript, we can understand the execution environment of functions in JavaScript, full understanding of this helps us easily write object-oriented JavaScript programs. Finally, thank you for watching.

The above is a detailed explanation of the mysteries of this in Javascript. For more information, see other related articles in the first PHP community!