[転帖]jsの中のthisの指針を簡単に話します.

JavaScriptの最も魔力のあるキーワードの一つはthisです.しかし、残念ながら、それは簡単には制御できません.まず、事件の文脈でthisを使う方法を説明します.後でthisに関する他の用法について話します.
所有者(Owner)
このような問題を見てください.doSomething関数の中で、thisとは何ですか?

function doSomething() {
   this.style.color = "#cc0000";
}

JavaScriptでthisは関数実行時の所有者を永遠に指します. より正確には、この方法が属する対象を指しています.私たちがページでdoSomething() ，を定義したとき. 彼の所有者はwindowです. object(or global object)of JavaScript.ただし、onclick属性はこれに対応するhtml elementに属する.

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          --------------------                          |
|          | onclick property |                          |
|          --------------------                          |
|                                                        |
-----------------------------------------------------------

                doSomething  ，        window style       。

参照のコピー(Copyng)
次のようなコピー関数はhtml要素のイベントハンドリング関数の使い方に注意してください.このとき、doSomething関数はこのhtml要素によって所有されます.

element.onclick = doSomething;

したがって、関数が実行されると、これまでの元素の色が変わります.

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

この技法はもちろん、関数を複数の異なる要素のイベントハンドリング関数にコピーするのに適しています.実行するたびに、thisは異なる要素を指します.

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | another HTML element| <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

引用呼び出し(Referring)
しかし、次のような行にイベントを登録するときには、

<element onclick="doSomething()">

この関数をコピーしていません.Instead、you refer to itとの違いは非常に深刻です.要素のonclick 属性は実際の関数の代わりではなく、関数だけを呼び出します.

doSomething();

だから実行します  doSomething()， this global window objectはエラーメッセージを返します.

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / \           |
|          | go to doSomething() |          |            |
|          | and execute it      | ---- reference to     |
|          -----------------------       function        |
|                                                        |
----------------------------------------------------------

The difference
関数を実行する場合、正しいhtml要素を指す場合は、必ず確認してください.  this 元素に書き込まれた  onclick を選択します.だから

element.onclick = doSomething;
alert(element.onclick)

あなた

function doSomething()
{
 this.style.color = '#cc0000';
}

As you can see,the  this keyword is present in the  onclick method.The refore it refers to the HTML element.
もしあなたがこのようにしたら:

<element onclick="doSomething()">
alert(element.onclick)

あなた

function onclick()
{
 doSomething()
}

このように関数doSomething()。This onclick ， の正しいhtml要素だけが呼び出される.
Examples-copyingthis is written into the  onclick method in the follwing cases:

element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">

Examples-referring
In the follwing cases  this refers to the window:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

attachEvent().The main drawback of the Microsoft event registration model is that attachEvent() creates a reference to the function and does not copy it.The refore it is sometimes impossible to know which HTML currently handles the event.
Commbination
When using inline event registration you can also send  this to the function so that you can still use it:

<element onclick="doSomething(this)">

function doSomething(obj) {
 // this is present in the event handler and is sent to the function
 // obj now refers to the HTML element, so we can do
 obj.style.color = '#cc0000';
}

  ：http://zmike86.blog.163.com/blog/static/17186042120121202122793/