Detailed explanation of this in javascript_javascript skills

This object has always been a trap in js. It is difficult to judge what it points to, and we often make this type of mistake due to our experience with self from C or python. Next, let’s talk about the ownership of this object in detail.

rule1: this

of the global environment

The environment of JavaScript is inherently determined by functions. In JS, context cannot be separated by code blocks. The environment that is not wrapped by functions is the global environment. This in the global environment points to the global variable window. See the following example.

Copy code The code is as follows:

var name='jjj';
console.log(this.name);
//will successfully output jjj

rule2: this

when called as a method

Obviously, this situation is easy to judge. It is consistent with self in python. This undoubtedly points to the object that calls the method

Copy code The code is as follows:

var user={
Name:'kkk'
};
user.getName=function(){
console.log(this.name);
};
user.getName();
//will outputkkk

rule3: this

when used as a constructor

Needless to say, this at this time is obviously pointing to the newly created object. The running of the constructor does not actually create the object, but only initializes it. The object has been created before running
Here are some examples

Copy code The code is as follows:

function User(name){
This.name=name;
}
var f1=new User('kkk');
var f2=User('kkk');
console.log(f1.name);//kkk
console.log(f2.name);//undefined has no name attribute

rule4: this in indirect call

The so-called indirect call refers to using apply and call to call functions. At this time, this points to the first parameter in their parameter list.

Copy code The code is as follows:

var setName=function(name){
This.name=name;
};
var user={level:2};
user.apply(setName,'jjj');
console.log(user.name);//jjj

rule5: this in other situations

Remember that this will not be changed in other cases, this is also where mistakes are most likely to occur.

Copy code The code is as follows:

var name = "clever coder";
var person = {
name : "foocoder",
Hello: function(sth){
var sayhello = function(sth) {
console.log(this.name " says " sth);
        };
          sayhello(sth);
}
}
person.hello("hello world");//clever coder says hello world

The above code looks strange. Shouldn’t this point to person?
We should remember that this in the nested function will not point to the function in which it is nested. In this example, this in sayhello will not point to the function corresponding to hello. If we change the example slightly to become

Copy code The code is as follows:

hello:function(sth){
console.log(this.name " says " sth);
}
//foocoder says hello world

Everyone should have understood that at this time, sayhello is not being called as a method, so this points to the global object. . .
At this time, the problem comes. When running the initial example using node, it will display undefined says hello world. I wonder if anyone can explain it.

rule6:eval breaks all rules

Finally end with an example

Copy code The code is as follows:

var name = "clever coder";
var user={
Name:'kkk'
};
user.getName=function(){
console.log(this.name);
};
var get=user.getName;
get();//clever coder

Do you understand?