JS関数呼び出しの4つの方法

3956 ワード

javascriptには全部で4つの呼び出しモードがあります.方法コールモード、関数コールモード、コンストラクションモード、およびappyコールモード.
これらのモードは,鍵パラメータthisをどのように初期化するかに差異がある.
1、方法コールモード:
var myobject={
        value:2,
        inc:function(num){
                alert(this.value+num);
            }
    };
myobject.inc(1);
ポップアップ3
var myObject={ 
  name : "myObject" , 
  value : 0 , 
  toString : function(){ 
    return '[Object:'+this.name+' {value:'+this.value+'}]'; 
  } 
};
alert(myObject);
ポップアップ:[Object:myObject{value:0} 
2、関数コールモード
thisはこの時windowを指します.
var add=function(a,b){
  alert(this);//this    window
  return a+b;
};
var sum=add(3,4);
alert(sum);
一つの関数がオブジェクトの関数ではない場合、一つの関数として呼び出され、thisはグローバルオブジェクトに結合されます.これは言語設計の誤りです.言語のデザインが正しいなら、内部関数が呼び出された時にも、thisは外部関数のthis変数に結合されているはずです.
var myObject={ 
  name : "myObject" , 
  value : 0 , 
  increment : function(num){ 
    this.value += typeof(num) === 'number' ? num : 0; 
  } , 
  toString : function(){ 
    return '[Object:'+this.name+' {value:'+this.value+'}]'; 
  }, 
  getInfo:function(){ 
    return (function(){ 
      return this.toString();//       this       window 
  })(); 
  } 
} ;
alert(myObject.getInfo());//[object Window] 
幸いなことに、変数を定義し、値をthisとすると、内部関数が変数を通じてオブジェクトを指すthisにアクセスします. 
var myObject={ 
  name : "myObject" , 
  value : 0 , 
  increment : function(num){ 
    this.value += typeof(num) === 'number' ? num : 0; 
  } , 
  toString : function(){ 
    return '[Object:'+this.name+' {value:'+this.value+'}]'; 
  }, 
  getInfo:function(){ 
    var self=this; 
    return (function(){ 
      return self.toString();//    self  myObject   
    })(); 
  } 
} ;
alert(myObject.getInfo());//[Object:myObject {value:0}] 
コンストラクタ呼び出しモード:
JavaScriptは原型に基づいて継承された言語です.これは、オブジェクトが直接に他のオブジェクトから属性を継承することができることを意味します.この言語は類別がない.  関数の前にnewを持って呼び出された場合、関数に接続されたプロトタイプのメンバーに隠れている新しいオブジェクトを作成します.一方、thisはコンストラクタの例に結び付けられます.
var quo=function(string){
  this.status=string;
};
quo.prototype.get_status=function(){
  return this.status;
};
  var qq=new quo("aaa");
  alert(qq.get_status());//aaa
function MyObject(name){ 
  this.name=name || 'MyObject'; 
  this.value=0; 
  this.increment=function(num){ 
    this.value += typeof(num) === 'number' ? num : 0; 
  }; 
  this.toString=function(){ 
    return '[Object:'+this.name+' {value:'+this.value+'}]'; 
  } ;
  this.target=this; 
} 
MyObject.prototype.getInfo=function(){ 
  return this.toString(); 
} ;
/* 
      MyObject.prototype  ,myObject   MyObject.prototype      , 
this    MyObject     
*/ 
var myObject=new MyObject(); 
var otherObject=new MyObject(); 
//alert(myObject.target===myObject);//ture 
//alert(myObject.target.getInfo());//[Object:MyObject {value:0}] 
myObject.increment(10); 
otherObject.increment(20); 
alert(myObject.value);//10 
alert(otherObject.value);//20 
アプリ呼び出しモード
 :
JavaScriptは関数式のオブジェクト指向プログラミング言語ですので、関数は方法を持つことができます.  この方法は、オブジェクトがこの方法を持っているように、関数のapplyメソッドです.このときthisはオブジェクトを指します.  applyは2つのパラメータを受信し、最初はバインディングされるオブジェクト(this方向のオブジェクト)で、2番目はパラメータ配列である.
function MyObject(name){ 
  this.name=name || 'MyObject'; 
  this.value=0; 
  this.increment=function(num){ 
    this.value += typeof(num) === 'number' ? num : 0; 
  }; 
  this.toString=function(){ 
    return '[Object:'+this.name+' {value:'+this.value+'}]'; 
  }; 
  this.target=this; 
} 
function getInfo(){ 
  return this.toString(); 
} 
var myObj=new MyObject(); 
alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this  myObj 
alert(getInfo.apply(window));//[object Window],this  window