Javascriptのthisキーワードを深く理解する

まず、「Javascriptの中で、Thisは永遠に関数の所有者を指す」という結論を出しました.
関数
まず、関数を見てみましょう.

  
  
  
  

   
   
   
   
<script language="javascript"> 
   
   
   
   
function introduce() { 
   
   
   
   
     alert("Hello, I am Laruence\r
"); 
   
   
   
   
} 
   
   
   
   
introduce(); 
   
   
   
   
</script> 
  
  
  
  

この関数は、thisのキーワードは誰を指しますか?
前の文章で述べたように、全体の関数、関数の所有者は現在のページ、つまりwindowオブジェクトを定義します.
これはつまりなぜですか?関数を引用符で引き起こしました.全体の関数を定義するということは、実はwindowオブジェクトの一つの方法です.
だから、私たちは関数名を通じて直接に呼び出すことができます.windowを通じて名来で呼び出すこともできます.この時、方法の中のthisキーワードはその所有者を指します.windowオブジェクトです.
もし、私達はwindowのintroduce属性を調べたら、得られます.

  
  
  
  

   
   
   
   
<script> 
   
   
   
   
var name = "I am Laruence"; 
   
   
   
   
function introduce() { 
   
   
   
   
     alert(this.name); 
   
   
   
   
} 
   
   
   
   
alert(window.introduce); 
   
   
   
   
/** 
   
   
   
   
* output: 
   
   
   
   
* function introduce() { 
   
   
   
   
* alert(this.name); 
   
   
   
   
* } 
   
   
   
   
*/ 
   
   
   
   
</script> 
  
  
  
  

 上のコードを見たら、グローバル関数がwindowオブジェクトの方法である以上、グローバル変数はwindowオブジェクトの属性であると考えられます.全体関数ではthisキーワードでグローバル変数にアクセスできますよね?
答えは肯定的です.introduce関数を使えば、私はLaruenceです.
イベントハンドラ
多分、thisキーワードに対する戸惑いのほとんどは、関数を事件処理に用いる時から来ている.

  
  
  
  

   
   
   
   
<input id="name" type="text"  name="name" value="Laruence" /> 
   
   
   
   
<script> 
   
   
   
   
function showValue() { 
   
   
   
   
     alert(this.value); 
   
   
   
   
} 
   
   
   
   
document.getElementById('name').onclick = showValue; 
   
   
   
   
</script> 
  
  
  
  

 上のコードは正常に動作しますが、why?関数のthisポインタは常に関数の所有者を指すということではないですか?グローバル変数の所有者はwindowオブジェクトということではないですか?
へへへ、もしこの問題を思い付くことができるならば、それではあなたが真剣に私の文章を見ていると説明して、さもなくば、私はあなたに初めから見始めるように提案して、さもなくば見終わって、あなたはまだぼんやりしています.
はい、上記のコードに対してショーValueはグローバルオブジェクトと定義されています.そうすれば、問題はオンロックイベントのバインディングの時にしか発生しないようです.
Jsではすべて対象で、関数と方法も対象の属性であることを知っていますが、関数には実行可能な内部属性があります.
つまり、私たちは関数show Value Copyをname入力枠のオブジェクトのonclick属性に与えました.この時のonclickを確認したら、

  
  
  
  

   
   
   
   
<input id="name" type="text"  name="name" value="Laruence" /> 
   
   
   
   
<script> 
   
   
   
   
function showValue() { 
   
   
   
   
     alert(this.value); 
   
   
   
   
} 
   
   
   
   
document.getElementById('name').onclick = showValue; 
   
   
   
   
alert(document.getElementById('name').onclick); 
   
   
   
   
/** 
   
   
   
   
* output 
   
   
   
   
* function showValue() { 
   
   
   
   
* alert(this.value); 
   
   
   
   
* } 
   
   
   
   
*/ 
   
   
   
   
</script> 
  
  
  
  

 したがって、イベントがトリガされると、name入力ボックスを呼び出すことになります.このとき、thisキーワードはもちろんname入力ボックスを指します.
でも、迷ったことが来ました.例えば、次のような書き方です.

  
  
  
  

   
   
   
   
<script> 
   
   
   
   
function showValue() { 
   
   
   
   
     alert(this.value); 
   
   
   
   
} 
   
   
   
   
</script> 
   
   
   
   
<input id="name" type="text"  name="name" value="Laruence"  onclick="showValue()"/> 
  
  
  
  

 
正常に運行できないというのは、なぜですか?
ええ、この時は、賦課ではなく、引用ですから.
もし私達が2つのタイプに注意すれば、以前の方法に対して私達が使っていたのは:

  
  
  
  

   
   
   
   
dom.onclick = showvalue; //      
  
  
  
  

先ほどの方法について:

  
  
  
  

   
   
   
   
onclick = "showvalue()" //     
  
  
  
  

これは両方の違いを側面に反映することができます.前者に対しては、値を賦課し、後者に対しては引用です.もし私達がこの時に入力ボックスのOclick属性を確認したら、私達は得られます.

  
  
  
  

   
   
   
   
<script> 
   
   
   
   
function showValue() { 
   
   
   
   
     alert(this.value); 
   
   
   
   
} 
   
   
   
   
</script> 
   
   
   
   
<input id="name" type="text"  name="name" value="Laruence"  onclick="showValue()"/> 
   
   
   
   
<script> 
   
   
   
   
var dom = document.getElementById("name"); 
   
   
   
   
alert(dom.onclick); 
   
   
   
   
/** 
   
   
   
   
* output: 
   
   
   
   
* function onclick() { 
   
   
   
   
*    showValue(); 
   
   
   
   
* } 
   
   
   
   
*/ 
   
   
   
   
</script> 
  
  
  
  

 
違いが見えますかどうしてかわかるでしょう?
ここに言及して、とても面白い例があります.IEの下で試してみてください.

  
  
  
  

   
   
   
   
<img src="xxx" onerror="alert(1); function hi() { alert(2);} " /> 
  
  
  
  

 
 
thisの向きを変える
じゃ、私達はもうどうして分かりましたか?
上記のイベント処理関数に対しては、次のような書き方ができます.

  
  
  
  

   
   
   
   
dom.onclick = showValue; 
   
   
   
   
dom.onclick = function() { alert(this.value) ;} 
   
   
   
   
<input onclick="alert(this.value);" /> //         ,         . 
   
   
   
   
dom.addEventListener('click', showValue, false); //ff only 
  
  
  
  

 
 
イベントハンドラではない場合は、appyやcallを使って、thisキーの指向を変えることができます.
たとえば:

  
  
  
  

   
   
   
   
var laruence = { 
   
   
   
   
     name : 'laruence', 
   
   
   
   
     age  : 26, 
   
   
   
   
     position : 'Senior PHP Engineer', 
   
   
   
   
     company : 'Baidu.inc' 
   
   
   
   
}; 
   
   
   
   
  
   
   
   
   
function introduce() { 
   
   
   
   
     alert(this.name); 
   
   
   
   
} 
   
   
   
   
  
   
   
   
   
introduce.call(laruence); 
  
  
  
  

 
11