Use of this in JavaScript
This variable is an elusive keyword in JavaScript, and this is very powerful, and knowledge of this is helpful in helping us to write object-oriented JavaScript programs.
The most essential thing for this variable is to be able to sort out which of the objects the This refers to, perhaps a lot of the material has its own explanation, but some concepts are very complicated. And my understanding is that this is the object referenced by this object, first of all, to analyze the method called by which object the function is.
Example One,
Copy Code code as follows:
var obj = {};
obj.x = 100;
OBJ.Y = function () {alert (this.x);};
Obj.y (); Pop up 100
This code is very easy to understand, when executing obj.y (), the function is called as the object obj method, so the this in the function body points to the Obj object, so it pops up 100.
Example Two,
Copy Code code as follows:
var checkthis = function () {
alert (this.x);
};
var x = ' This was a property of window ';
var obj = {};
obj.x = 100;
OBJ.Y = function () {alert (this.x);};
Obj.y (); Pop up 100
Checkthis (); Popup ' This is a property of window '
It may be a bit confusing why this will pop up ' this is a ' of the property ' window '. In the JavaScript variable scope, there is a rule that "global variables are properties of Window objects." When executing checkthis () is equivalent to Window.checkthis (), so the point of the This keyword in the Checkthis function body becomes the window object, and because the Window object has another x attribute (' Thisis a property of Window '), so it pops up ' thisis a property of window '.
The above two examples are relatively easy to understand, because as long as you determine which object the current function is called (by which object), it is easy to determine the current point of this variable.
This.x and apply (), call ()
Call and apply can redefine the execution environment of the function, which is the point of this, which is very common in some applications.
Example three: Call ()
Copy Code code as follows:
function Changestyle (type, value) {
this.style[type] = value;
}
var one = Document.getelementbyidx (' one ');
Changestyle.call (one, ' fontsize ', ' 100px ');
Changestyle (' fontsize ', ' 300px '); An error occurred because this is the window object referenced in Changestyle, and window does not have a style attribute.
Note There are three parameters in Changestyle.call (), and the first parameter is used to specify which object the function will be invoked. One is specified here, which means that the Changestyle function will be called by a, so that this point in the function body is a person object. The second and third parameters correspond to the type in the Changestyle function, and the value two formal parameters. The most general effect we see is that the font of DOM element one becomes 20px.
Example four: Apply ()
Copy Code code as follows:
function Changestyle (type, value) {
this.style[type] = value;
}
var one = Document.getelementbyidx (' one ');
Changestyle.apply (one, [' fontsize ', ' 100px ']);
Changestyle (' fontsize ', ' 300px '); An error occurred for the same reason as example three
Apply is roughly the same as call, with only one difference, apply accepts only two parameters, the first parameter is the same as call, the second argument must be an array, and the element in the array corresponds to the function's formal parameter.
Meaningless (weird) this use
Example five:
Copy Code code as follows:
var obj = {
X:100,
Y:function () {
SetTimeout (
function () {alert (this.x);}//This point is to the Window object, not the obj we expect, so it pops up undefined
, 2000);
}
};
Obj.y ();
How to achieve the desired effect
Copy Code code as follows:
var obj = {
X:100,
Y:function () {
var that = this;
SetTimeout (
function () {alert (that.x);}
, 2000);
}
};
Obj.y (); Pop up 100
This in the event listener function
Copy Code code as follows:
var one = Document.getelementbyidx (' one ');
One.onclick = function () {
alert (this.innerhtml); This points to one element, which is very simple.
};
Note: The global variables in JS are dynamically added to the window's instance window as their properties.
This is a keyword for JS, and the value of this will change as the function is used differently. But there is always a principle, that is, this refers to the object that calls the function.
1, pure function call.
Copy Code code as follows:
function Test () {
this.x = 1;
alert (x);
}
Test ();
In fact, this is the global variable. Look at the example below to make it very easy to understand that this is the global object.
Copy Code code as follows:
var x = 1;
function Test () {
alert (this.x);
}
Test ();//1
var x = 1;
function Test () {
this.x = 0;
}
Test ();
alert (x);//0
2, as a method call, then this refers to the superior object.
Copy Code code as follows:
function Test () {
alert (this.x);
}
var o = {};
o.x = 1;
O.M = test;
O.M (); 1
3, as a constructor call. The so-called constructor is to generate a new object. At this point, this is the object.
Copy Code code as follows:
function Test () {
this.x = 1;
}
var o = new Test ();
alert (o.x);//1
4, apply to call
This point is the first parameter in apply.
Copy Code code as follows:
var x = 0;
function Test () {
alert (this.x);
}
var o = {};
o.x = 1;
O.M = test;
O.m.apply (); 0
O.m.apply (o);//1
When apply has no parameters, it is represented as a global object. So the value is 0.
