In-depth understanding of the This keyword in javascript

• 1. General use
• 2. This.x and apply (), call ()
• 3. Meaningless (weird) this use
• 4. This in the event listener function
• 5. Summary

The this variable is an elusive keyword in JavaScript, and this is a very powerful, well-understood knowledge of this that helps us to be able to write object-oriented JavaScript programs.

1. General use

The most necessary for this variable is to be able to clarify which of the objects referenced in this is, perhaps a lot of data have their own explanations, but some of the concepts are too complicated. And my understanding is that this is the object that this object refers to when you first parse what the function of this is called as the method of the object.

Example One

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 a method of the object obj, so this in the function body points to the Obj object, so it pops up 100.

Example Two

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);}; var obj2 = Obj.y;obj.y ();   Eject 100checkThis ();    Eject ' This was a property of Windowobj2 ();    Popup ' This was a property of window

Why it pops up ' this was a property of window ', which may be confusing. There is a rule in the scope of JavaScript variables that "Global variables are properties of Window objects." When executing checkthis () is equivalent to Window.checkthis (), so the pointer to the this keyword in the Checkthis function body becomes the window object, and because the Window object has another X property (' This is a property of the window '), so it pops up ' this was a property of window '.

The above two examples are easy to understand because it is easy to determine the point of the current this variable as long as it is determined that the current function is the method call of the object (which is called by which object).

2. This.x and apply (), call ()

Using call and apply, you can redefine the execution environment of the function, which is the point of this, which is very common for some applications.

Example three: Call ()

function Changestyle (type, value) {    this.style[type] = value;} var one = document.getElementById (' one '); Changestyle.call (one, ' fontSize ', ' 100px '); Changestyle (' FontSize ', ' 300px ');  An error occurred because this is the Window object in Changestyle, and window does not have a style property.

Note that there are three parameters in Changestyle.call (), and the first parameter is used to specify which object the function will be called. One is specified here, which means that the Changestyle function will be called by a, so this point in the function body is an object. The second and third parameters correspond to the type in the Changestyle function and the value two parameter. The most general effect we see is that the font of DOM element one becomes 20px.

Example four: Apply ()

function Changestyle (type, value) {    this.style[type] = value;} var one = document.getElementById (' one '); Changestyle.apply (one, [' fontSize ', ' 100px ']); Changestyle (' FontSize ', ' 300px ');  An error occurred for the same reason as example three

Apply is the same usage and call, only a little difference, apply only accepts two parameters, the first parameter and call the same, the second argument must be an array, the elements in the array corresponding to the function's formal parameters.

3. Meaningless (weird) This use example five

var obj = {    x:100,    y:function () {        setTimeout (            function () {alert (this.x);}    Here the this point is the Window object, not the obj we expect, so it will pop up undefined         ,    }};o Bj.y ();

How to achieve the desired effect

var obj = {    x:100,    y:function () {        var = this;        SetTimeout (            function () {alert (that.x);}         , +);    }};o Bj.y ();    Pop up 100

4. This in the event listener function

var one = document.getElementById (' one '); One.onclick = function () {    alert (this.innerhtml);    This point is one element, which is very simple.

5. Summary

The above can be summed up as: "This refers to the upper object that contains the this pointer"

This

invocation Form	point
Common functions	Global Object window
Methods of the Object	The object
constructor function	The newly constructed object

Forwarding Address: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html

In-depth understanding of the This keyword in javascript