This object has always been a pitfall in js, and it is difficult to judge what it points to. We often make this kind of mistakes due to our experience from C++ or python. Next, let’s talk about the ownership of this object in detail.
rule1: this in the global environment
The environment of JavaScript is inherently determined by functions. In JS, the 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
The code copy is as follows:
var name='jjj';
console.log(this.name);
//The jjj will be output successfully
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
The code copy is as follows:
var user={
name:'kkk'
};
user.getName=function(){
console.log(this.name);
};
user.getName();
//The output kkk will be output
rule3: this when as a constructor
I don't need to say much about this at this time. It obviously points to the newly created object. The operation of the constructor does not actually create an object, but is just initialization. The object is created before it is run.
Here are some examples
The code copy 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 does not have a name attribute
rule4: this indirect call
The so-called indirect call refers to using apply and call to call functions, and this pointes to the first parameter in their parameter list.
The code copy 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 cases
Remember that this will not be changed in other situations, and this is also the easiest place to make mistakes.
The code copy is as follows:
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var sayshello = function(sth) {
console.log(this.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world");//clever coder says hello world
The above code looks weird, shouldn't this point to person?
We should remember that this in the nested function will not point to the function that nests it. In this example, this in sayshello will not point to the function corresponding to hello. If we change the example slightly
The code copy 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 calling as a method, so this points to the global object. . .
At this time, the problem is that the initial example of using node to run will show undefined says hello world. I wonder if there is any master to explain it.
rule6:eval breaks all rules
Finally end with an example
The code copy 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?