JavaScript self and this use summary __java

Turn from: http://www.cnblogs.com/uedt/articles/1748422.html

This digest from: http://www.cnblogs.com/reommmm/archive/2010/01/20/1652469.html

One, self

This is very simple. We know that if you open any Web page, the browser will first create a window, which is a Window object, and it is the global environment object and global scope object that JS runs on. Self refers to the window itself, which returns objects that are exactly the same as window objects. Also because of this, the common methods and functions of the Window object can use self instead of window. For example, the common wording "self.close ()", put it in the <a> tag: "<a href=" javascript:self.close (); > Close Window </a>, click the Close window link and the current page closes.

Two, this keyword

Before you speak this, look at the following code:

< BODY >
< script type = "Text/javascript" >
function Thistest ()
{
this. TextValue = ' the DOM test ';
this. Element = document.createelement (' span ');
this. element.innerhtml = this. TextValue;
this. Element.style.color = "Blue";
this. Element.style.cursor = "pointer";
this. Element.attachevent (' onclick ', this. ToString);
}

ThisTest.prototype.RenderDom = function ()
{
Document.body.appendChild (this. Element);
}

thisTest.prototype.ToString = function ()
{
Alert ("Click me:" + this. TextValue);
};
var test = new Thistest ();
Test. Renderdom ();
Test. ToString ();
</script>
</body>

The original purpose is to add a SPAN element to the body, for this span element, develop its font color, hover over it with the mouse style and click the Trigger event. The problem appears on its Click event (pop-up "Click me: Undefined"). Maybe some people will say you silly ah, write so many SB code is not just to achieve the following this dongdong.

< SPAN style = ' cursor:pointer;color:blue ' onclick = ' alert (this.innerhtml) ' > This DOM Test </span >

You see how simple and intuitive, but also not easy to make mistakes. Kao, I'm dizzy. I'm going to talk about this in the this.innerhtml you're using.

1. What exactly does this mean?
Our familiar C # has this keyword, whose main function is to refer to the current object instance (parameter passing and indexers use this). In JavaScript, this usually points to the function we are executing, or to the object to which the function belongs (runtime).
2, common use way
(1), using directly in the DOM element

< input ID = "Btntest" type = "button" value = "submit" onclick = "alert (this.value)"/>

Analysis: An onclick (or other such as onblur, etc.) attribute of a DOM element that is owned by the HTML element it belongs to, and written directly in the function it triggers this,this should point to the HTML element.
(2), to register the DOM element JS function
A, not the right way

< script type = "Text/javascript" >
function Thistest () {
Alert (this. value); Pop-up undefined, this points here??
}
</script>

< input ID = "Btntest" type = "button" value = "submit" onclick = "thistest ()"/>

Analysis: The onclick event calls the Thistest function directly, and the program pops up the undefined. Because the Thistest function is defined in the Window object,
So the owner of the Thistest (scope) is window,thistest This is also window. Window does not have the value attribute, so it is an error.
b, the right way

< input ID = "Btntest" type = "button" value = "Submit"/>

< script type = "Text/javascript" >
function Thistest () {
Alert (this. value);
}
document.getElementById ("btntest"). onclick = Thistest; Register a function for the button's onclick event
</script>

Analysis: In the previous example, the Thistest function is defined in the global scope (here is the Window object), so this refers to the current Window object. and through document.getElementById ("btntest"). Onclick=thistest, in this form, is to set the Btntest onclick property to a copy of the Thistest function, Within the function scope of the Btntest onclick property, this is btntest all, and this points to btntest. In fact, if there are multiple DOM elements to register the event, we can take advantage of different DOM element IDs and implement them in the following ways:
document.getElementById ("Domid"). Onclick=thistest; Registers a function with the button's onclick event.
Because many different HTML elements create different copies of the function, the owner of each copy is the corresponding HTML element, each of which points to their owner, without causing confusion.
To verify the above, let's improve the code so that the button pops up their corresponding triggering function directly: