Javascriptの中のthisバインディング紹介

thisの具体的な値は、その呼び出しモードに依存します.
*メソッド呼び出しモード:thisをオブジェクトにバインドします.
*関数呼び出しモード:thisはグローバルオブジェクトに結合され、ウェブページの場合はwindowに結合されます.
*コンストラクタ呼び出しモード:新たに生成されたオブジェクトにthisをバインドします.
*イベント処理呼び出しモードは、2つの場合に分けられます.参照
*thisをグローバルオブジェクトにバインドします.

 
  
 
  <br>function click_handler() { 
  <br>alert(this); // alerts the window object 
  <br>} 
  <br> 
  
... 
  
Click me! 
  
 
 

*thisはDOMオブジェクトにバインドされています.

 
  
 
  <br>function click_handler() { 
  <br>alert(this); // alerts the button DOM node 
  <br>} 
  <br>function addhandler() { 
  <br>document.getElementById('thebutton').onclick = click_handler; 
  <br>} 
  <br>window.onload = addhandler; 
  <br> 
  
... 
  
Click me! 
  
 
 

関数呼び出しのコンテキストの変化により、thisの不確実性が生じる.thisコンテキストをより明確にするために、callとapplyの2つの方法を使用して、thisバインディングの値を明確にすることができる.
callとappyの違いはパラメータの違いだけです.callは任意のパラメータリストを受け取り、applyはパラメータ配列オブジェクトを受け入れます.これはまた、その第2のパラメータとしてargmentsをappyが受け入れるようにする.

 
  
func.call(obj1,var1,var2,var3) 
  
func.apply(obj1, [var1,var2,var3]) 
  
func.apply(obj1, arguments) 
  
 
 

しかし、callとapply方式はすぐに実行されます.その後の使用が必要であれば、条件を満たすことができません.その中で、13行と14行はcallを使うかどうかに関わらず、必要な値を得ることができません.

 
  
 
  <br>function BigComputer(answer) { 
  <br>this.the_answer = answer; 
  <br>this.ask_question = function () { 
  <br>alert(this.the_answer); 
  <br>} 
  <br>} 
  <br>function addhandler() { 
  <br>var deep_thought = new BigComputer(42), 
  <br>the_button = document.getElementById('thebutton'); 
  <br>//the_button.onclick = deep_thought.ask_question; 
  <br>the_button.onclick = deep_thought.ask_question.call(deep_thought); 
  <br>} 
  <br>window.onload = addhandler; 
  <br> 
  
 
 

この時はbindメソッドが活躍しています.(この方法はECMA-262第5版にすでに加入しています.)最初にProttypeの枠組みの中に現れました.bindとcall、applyは、関数実行のコンテキスト、すなわち関数実行時thisの値を変更します.違いは、次のように簡単に実現される関数参照を返します.

 
  
Function.prototype.bind = function(object) { 
  
var method = this; 
  
return function() { 
  
method.apply(object, arguments); 
  
} 
  
} 
  
 
 

具体的な実装では、クローズド特性を利用して、戻ってきた関数参照は、実行時に、この関数参照を作成する際のmethodとobjectの2つのパラメータにアクセスできます.