Javascript This keyword detailed _ basics

One, this point to the constructor instantiation object

In the previous article, we mentioned the difference between using new and calling constructors without using new, as in the following example:

Copy Code code as follows:

function Benjamin (username, sex) {
This.username = Username;
This.sex = sex;
}
var benjamin = new Benjamin ("Zuojj", "male");
Outputs:benjamin{sex: "Male", Username: "ZUOJJ"}
Console.log (Benjamin);
var ben = Benjamin ("Zhangsan", "female");
outputs:undefined
Console.log (Ben);

When the constructor is called as a normal function, it does not return a value, and this points to the global object. So how do we avoid the problems that arise from missing the new keyword?

Copy Code code as follows:

function Benjamin (username, sex) {
Check whether ' this ' is a ' Benjamin ' object
if (this instanceof Benjamin) {
This.username = Username;
This.sex = sex;
}else {
return new Benjamin (username, sex);
}
}
var benjamin = new Benjamin ("Zuojj", "male");
Outputs:benjamin{sex: "Male", Username: "ZUOJJ"}
Console.log (Benjamin);
var ben = Benjamin ("Zhangsan", "female");
Outputs:benjamin {username: "Zhangsan", Sex: "Female"}
Console.log (Ben);

In the example above, we first check if this is an instance of Benjammin, and if not, use new to invoke the constructor automatically and instantiate it, which means that we no longer need to worry about omitting the New keyword instantiation constructor. Of course, we may develop a bad habit, if we avoid this phenomenon? We can throw a bug, like this:

Copy Code code as follows:

function Benjamin (username, sex) {
Check whether ' this ' is a ' Benjamin ' object
if (this instanceof Benjamin) {
This.username = Username;
This.sex = sex;
}else {
If not, throw error.
throw new Error ("' Benjamin ' invoked without ' new ')";
}
}

Two, this point to the object that called the function

Look at the following example:

Copy Code code as follows:

var x = 10;
var obj = {
X:10,
Output:function () {
Outputs:true
Console.log (this = = obj);
return this.x;
},
Innerobj: {
X:30,
Output:function () {
Outputs:true
Console.log (This = = Obj.innerobj);
return this.x;
}
}
};
Outputs:10
Console.log (Obj.output ());
Outputs:30
Console.log (Obj.innerobj.output ());

Three, this points to the global object

When we discussed the constructor above, we also discussed that when it was not appropriate to use new, this would point to the global object, and let's look at two common examples of error-prone:

Copy Code code as follows:

var x = 100;
var obj = {
X:10,
Output:function () {
(function () {
Outputs:true
Console.log (this = = window);
outputs:inner:100
Console.log ("Inner:" + this.x);
})();

return this.x;
}
};
Outputs:10
Console.log (Obj.output ());

When the closure is used, the scope changes, this points to window (in the browser).

Copy Code code as follows:

var x = 100;
var obj = {
X:10,
Output:function () {
return this.x;
}
};
var output = Obj.output;
Outputs:10
Console.log (Obj.output ());
outputs:100
Console.log (output ());
var obj2 = {
X:30,
Output:obj.output
}
Outputs:30
Console.log (Obj2.output ());

This at this point always points to the object at the time of the function call.

Four, this point to the object assigned by the Apply/call () method

Copy Code code as follows:

var x = 100;
var obj = {
X:10,
Output:function () {
return this.x;
}
};
Outputs:10
Console.log (Obj.output ());
var obj2 = {
X:40,
Output:obj.output
}
Outputs:40
Console.log (Obj.output.call (OBJ2));
Outputs:10
Console.log (obj2.output.apply (obj));

V. Callback function this point to the object to which this callback function is called

Copy Code code as follows:

<input type= "Text" value= "3" id= "Txt_username" >
$ ("#username"). On ("click", Function () {
Console.log (This.value);
});

Vi. this in the Function.prototype.bind

The bind () method creates a new function that is, when called, has it this keyword set to the provided value, with a given s Equence of arguments preceding any provided when the new function is called.
Example one:

Copy Code code as follows:

function person () {
return this.name;
}
Function.prototype.bind
var per = Person.bind ({
Name: "ZUOJJ"
});
Console.log (per);
var obj = {
Name: "Ben",
Person:person,
Per:per
};
Outputs:ben, ZUOJJ
Console.log (Obj.person (), Obj.per ());

Example two:

Copy Code code as follows:

This.x = 9;
var module = {
x:81,
Getx:function () {return this.x;}
};
outputs:81
Console.log (Module.getx ());
var GetX = Module.getx;
Outputs:9, because in the, ' this ' refers to the global object
Console.log (GetX);
Create a new function with ' this ' bound to module
var boundgetx = getx.bind (module);
outputs:81
Console.log (Boundgetx ());