JavaScriptにおけるメソッド呼び出しの詳細

JavaScriptでは、functionがオブジェクトに属する場合、オブジェクトを介してそのfunctionにアクセスする行為を「メソッド呼び出し」といいます.一般的な関数呼び出しとは異なり、メソッド呼び出しを行う場合、functionのthisは変化することになります.thisは、そのfunctionを呼び出す対象を指します.

 
  
 var x = 99; 
  
 var sample = { 
  
   x:1, 
  
   act:function(a){ 
  
     this.x = a*a;//assign value to sample's x, not global object's x. 
  
   } 
  
 } 
  
 sample.act(6); 
  
 console.log(sample.x);//36 
  
 console.log(x);//99 
  
 
 

訪問先のプロッティと同様に、ポイント番号のオペレータを使用する以外に、JavaScriptでは、中かっこのオペレータを使用して方法を呼び出すことができます.

 
  
 //other ways to invoke method 
  
 sample["act"](7); 
  
 console.log(sample.x);//49 
  
 
 

JavaScriptのfunctionについては、functionにfunctionを埋め込むことができます.メソッド呼び出しを行う場合、メソッドfunctionに埋め込まれたfunctionがあると、この埋め込まれたfunctionのコードは外部の変数値にアクセスできます.

 
  
 //nested function can access variable outside of it. 
  
 var y = 88; 
  
 var sample2 = { 
  
   y:1, 
  
   act2:function(a){ 
  
     this.y = inner(); 
  
     function inner(){ 
  
       return a*a; 
  
     } 
  
   } 
  
 } 
  
 sample2.act2(8); 
  
 console.log(sample2.y);//64 
  
 console.log(y);//88 
  
 
 

ただし、直感とは逆に、functionに埋め込まれたコードは外部からthisを継承できない.つまり、埋め込まれたfunctionでは、thisは呼び出し方法の対象ではなく、グローバルオブジェクトを指します.

 
  
 //nested function does not inherit "this". The "this" in nested function is global object 
  
 var sample3 = { 
  
   act3:function(){ 
  
     inner(); 
  
     function inner(){ 
  
       console.log(this);//window object 
  
     } 
  
   } 
  
 } 
  
 sample3.act3(); 
  
 
 

実際に埋め込みfunctionで呼び出し方法のオブジェクトにアクセスする必要がある場合、外部functionでthis値を変数に保存できます.

 
  
 //pass "this" to nested function 
  
 var sample4 = { 
  
   act4:function(){ 
  
     var self = this; 
  
     inner(); 
  
     function inner(){ 
  
         console.log(self);//Object {act4=function()} 
  
     } 
  
   } 
  
 } 
  
 sample4.act4();