The This keyword in the JS function

About the This keyword, which is often used in many projects, someone might ask, why use this, when the function is called, directly indicate what is the object in the call is not the line? What's the whole idea of a vague concept coming out? However, there is the truth, since there is such a thing, that there is the meaning of his existence, let's see below.

First of all, we have to recall the JS function what kind of invocation of the occasion, there are several occasions:

1, very regular call (that is, call directly, in fact, you find the global call);

2, as an object of the Bean brother method is called;

3, as a constructor, used to create a new object (objects);

4, let the big head of the Apply call (in the implementation of partial inheritance often do so).

All right, let's take a look at how this keyword is played in several cases.

A pure function call

This is the most common use of functions, which is a global call, so this is a representation of globals, so many people here are confused, but in the browser environment, Global is also the Window object, the global object is a single built-in object, That is, objects that do not depend on the hosting environment, and the Window object relies on the browser.

Look at the following code:

function Test () {

THIS.name = "Dearxiangxiao";

Console.log (this.name);

}

Test (); Dearxiangxiao

The feeling is still very magical, unconsciously test function inside the definition of properties, can also be read outside? Make some changes to the code as follows:

var name = "Xiangxiao";

function Test () {

THIS.name = "Dearxiangxiao";

}

Test ();

alert (name); Dearxiangxiao

As you can see, after executing the test function, the value of name is changed, why? Here is the call to test the object is global in the mischief, since test is called by the global object, then this also point to the global object, the properties of the global object, of course, can read and modify, nothing wrong.

Second, the invocation as an object method

A function can also act as a method call to an object, and this refers to the ancestor object, and also to the code:

function Test () {

Console.log ("My name is" +this.name + "and my profession is" +this.profession);

};

var person = {};

person. Name= "Dearxiangxiao";

Person.profession = "Projector";

Person.interduce= test;

Person. Interduce (); My name is Dearxiangxiao,and my profession is projector

It is well understood here that since it is the person who is calling the test function, then it is a good point to refer to the person entity, which is the previous level object of the calling function, whose name and profession properties should certainly be read.

Third, as a constructor function call

The so-called constructor is to generate a new object by this function (object). At this point, this refers to the new object, and also to a piece of code, the example of one of the minor changes:

var name = "Xiangxiao";

function person () {

THIS.name = "Dearxiangxiao";

}

var person1 = new Person ();

Console.log (name); Xiangxiao

Console.log (Person1.name); Dearxiangxiao

As can be seen, this point object is just new Person1, read out its name Dearxiangxiao, and directly print the name variable, the value is still unchanged, for the previous xiangxiao. This more indicates that this is pointing to Person1 instead of the global object.

Iv. Apply Call

Apply () is a method of a function object that changes the calling object of a function (in fact, a method of a certain object is put to another good base friend), and its first argument represents the changed object that called the function. Therefore, this is the first parameter.

About this apply, probably most people do not like to use it, want to call an object directly call not good? But it should be thought that if you want to call someone else to write a method, some parameter variables to use your own, how to do? Apply and call comes in handy, and this is an important part of JS's object-oriented thinking transformation, which must be understood (see my other blog post on the specific details of apply and click: A ladder of JS's object-oriented thinking transformation, apply and call).

Let's take a look at the example below and make some minor changes to the three examples:

var name = "Xiangxiao";

function Test () {

Console.log (this.name);

}

var person1 = new Person ();

Person1.name = "Dearxiangxiao";

Person1.interduce = test;

Person1.interduce.apply (); Here the output of the four Xiangxiao

What's going on, it's not a good deal. Do you want to change the calling object of the function? Why is it still called by global? No hurry, look at the parentheses in the back of apply, nothing, the default is the global object when there is no residual number, so it is really called the global name variable. How does the person1.interduce.apply () understand it? It can be understood that the Interduce method of the Person1 entity is placed on the global object for execution.

OK, we just said in front, apply the first argument in parentheses, that is, the point of this, then change the last sentence of the above code, as follows:

Person1.interduce.apply (Person1); The output here is Dearxiangxiao.

Get Person1 Name property value, suddenly came up with an idea, here person1.interduce.apply (Person1) It seems very awkward to understand. Amount: The Interduce method of Person1 entity object is put on Person1 entity object to execute, what ghost? Your own method of direct call is not good? Write Person1.interduce () on the line!!! Of course, that is more concise, however, this is the characteristics of the Apply method is caused by it, their own method, turn a circle back to their own hands was called, and give a sounding explanation, haha, do not spit groove, we still want to see the many benefits of apply to us.

This blog post is so much content, I hope you will like it.

The This keyword in the JS function