The working principle of this
If a function is invoked as a method of an object, then this will be assigned as the object.
Copy Code code as follows:
var parent = {
Method:function () {
Console.log (this);
}
};
Parent.method ();
<-Parent
Note that this behavior is very "fragile", and if you get a reference to a method and call it, then the value of this is not parent, but the window global object. This is confusing to most developers.
Copy Code code as follows:
Thisclowncar ();
<-Window
Change this
The call,. Apply, and. Bind methods are used to manipulate the way a function is invoked, helping us define the value of this and the parameter values passed to the function.
Function.prototype.call can have any number of arguments, the first parameter is assigned to this, and the rest is passed to the calling function.
Copy Code code as follows:
Array.prototype.slice.call ([1, 2, 3], 1, 2)
<-[2]
Function.prototype.apply behaves like. Call, but the argument it passes to a function is an array, not any argument.
String.prototype.split.apply (' 13.12.02 ', ['. '])
<-[' 13 ', ' 12 ', ' 02 ']
Function.prototype.bind creates a special function that will always use the parameter passed to. Bind as the value of this, as well as the ability to allocate part of the parameters and create the Curride version of the original function.
Copy Code code as follows:
var arr = [1, 2];
var add = Array.prototype.push.bind (arr, 3);
Effectively the same as Arr.push (3)
Add ();
Effectively the same as Arr.push (3, 4)
Add (4);
Console.log (arr);
<-[1, 2, 3, 3, 4]
This in the scope chain
In the following example, this will not remain unchanged in the scope chain. This is a flaw in the rules and often creates confusion for amateur developers.
Copy Code code as follows:
function Scoping () {
Console.log (this);
return function () {
Console.log (this);
};
}
Scoping () ();
<-Window
<-Window
There is a common way to create a local variable to keep a reference to this, and you cannot have the same variable in the child scope. A variable with the same name in a child scope overrides the reference to this in the parent scope. http://www.cnblogs.com/sosoft/
Copy Code code as follows:
function retaining () {
var self = this;
return function () {
Console.log (self);
};
}
Retaining () ();
<-Window
Unless you really want to use this of the parent scope as well as the current this value, for some inexplicable reason, I prefer the method used. Bind function. This can be used to specify the this of the parent scope to the child scope.
Copy Code code as follows:
function bound () {
return function () {
Console.log (this);
}.bind (this);
}
Bound () ();
<-Window