In-depth understanding of JavaScript series: this in various contexts

Where do the 1.this keywords appear?

This he can only appear in the function. Of course, in the global scope is an exception, meaning this can only occur in two contexts, one in the function body, and the other in the global scope.

What is 2.this?

This is the keyword in the language specification that specifies the current object that he points to when the function executes. It represents an internal object that is automatically generated when the function is run, and can only be used inside the function.

Where exactly does 3.this point?

First make it clear that this is related to the execution environment of JavaScript and functions rather than declaring the environment.

As stated in the first article, this can only appear in functions and global scopes, and this in the global scope refers to the global object (the Global object is the window in the context of the browser).

If this appears in the function, then it is up to you to see where this is pointing. The point is based on the execution environment of the function rather than the declaration environment. In fact, it can be summed up in a sentence that this is always the owner of the function, and when there is no owner of the display, then this points to the global object.

4. What is the specific point of this in various cases?

(1). Global scope

1	console.log(this)

Prints this directly in the global scope, which points to window.

So in the global scope This is a pointer to the global object.

(2). The function is called as a member method of an object

12345678

varname = "chirenmiao1";varobj= {    name: "chirenmiao2",    getName: function() {        console.log(this.name);    }}obj.getName();//chirenmiao2

　　

Declare the global variable name in the global scope, declare it in the Obj object, and declare a name. When calling his member method GetName with Object obj, this points to this obj, so the printed this.name is the name of obj.

Therefore, when the function is called as a member method of an object, this points to the object.

(3). Functions are used as functions directly

123456789

varname = "chirenmiao1";varobj= {    name: "chirenmiao2",    getName: function() {        console.log(this.name);    }}vargetName= obj.getName;getName();　　 //chirenmiao1

The same is the upper part of the code, but this time we put getname this function directly, at this time when the function is executed, he has no explicit current object, so by default this point is pointing to the global object.

So when the function is used directly as a function, this points to the global object.

　　

1234	functionmyFun() {    console.log(this);}myFun();

Also, when a function declaration is executed directly, this also points to the global object.

In fact, the top three has simply covered all the circumstances of this point, followed by some of the slightly special situation.

(4). function call as constructor function

123456789

varname = ‘chirenmiao1‘;varObj = function(x, y) {    this.name = ‘chirenmiao2‘;}Obj.prototype.getName = function() {    console.log(this.name);}varmyObj = newObj();myObj.getName();//chirenmiao2

When the function is called as a constructor, this points to a new object constructed with the constructor.

(5). SetTimeout and SetInterval and anonymous functions

1234567891011

varname = "chirenmiao1";varobj = {    name: "chirenmiao2",    getName: function() {        setTimeout(function() {            console.log(this.name);        }, 1000);    },}; obj.getName();//chirenmiao1

When these two functions execute, the first argument can be an anonymous function, or it can be a declared function reference, so this point refers to the pointer to this anonymous function or function reference. This points to the global object when the first one already knows the anonymous function or the function declared in the global scope is directly executed, so here too, settimeout and SetInterval both run, this points to the global object.

This time if you want to output a chirenmiao2, that is, this point to obj, you need to do something.

123456789101112

varname = "chirenmiao1";varobj = {    name: "chirenmiao2",    getName: function() {        varself = this;        setTimeout(function () {            console.log(self.name);        }, 1000);    },};obj.getName();//chirenmiao2

Of course this does not change this point, but it can be assigned to self by assigning this to the function of saving this point.

This is followed by an anonymous function.

123	(function() {    console.log(this);})()//window

The This in the anonymous function points to the global object because he does not show the owner.

(6) Apply, call, bind

These three functions are a method of the function object, their function is to change the function execution time of this point, the specific use is as follows:

Call:call (Obj[,arg1][,arg2]); The first argument is to force the change of the object to point to, optionally, the function's arguments, and the default is window if obj is not passed.

Apply:apply (Obj[,arr]); The first argument is to force the change of the object to point to, and optionally, the array form of the parameter collection, and the default is window if obj is not passed.

The function and invocation form of apply and call are basically consistent, the difference is that the parameters behind the calls correspond to the one by one of the method, and the second parameter of apply is an array, the elements in the array correspond to the one by one in the method, which is the biggest difference between the two. Both can be passed without arguments, at which point the object is changed to a global object by default.

Bind:bind is called the same as call, but he returns the function reference after changing the calling object, so it will be executed again, that is, Obj.fun (). bind ().

Summary: This is an internal object that is automatically generated when the function is run, and can only be used inside the function. The specific this to WHO, to see all the functions of this is who call, the situation can be divided into global scope, as an object of the method call, direct execution, anonymous function direct execution, call, apply, bind force change the calling object and so on.

In-depth understanding of JavaScript series: this in various contexts