In JavaScript this
always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.
function doSomething() { this.style.color = '#cc0000'; }
------------ window -------------------------------------- | / \ | | | | | this | | ---------------- | | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | -------------------- | | | onclick property | | | -------------------- | | | ----------------------------------------------------------
1. Copy---------------Traditional event registration--------------the element
element.onclick = doSomething;
The function is copied in its entirety to the onclick
property (which now becomes a method). So if the event handler is executed this
refers to the HTML element and its color
is changed.
------------ window -------------------------------------- | | | | | | | ---------------- | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | | ----------------------------------------------------------表示元素的例子包括:
element.onclick = doSomething element.addEventListener('click',doSomething,false) element.onclick = function () {this.style.color = '#cc0000';} <element οnclick="this.style.color = '#cc0000';">2.Reference--------------- inline event registration--------------this指向全局变量window
doSomething();
So it says “Go to doSomething() and execute it.” When we arrive atdoSomething()
the this
keyword once again refers to the global window object and the function returns error messages.
this 表示window对象的例子
element.onclick = function () {doSomething()} element.attachEvent('onclick',doSomething) <element οnclick="doSomething()">from: http://www.quirksmode.org/js/this.html