javascript this 关键字以及四种函数调用模式

标签：js this关键字 四种函数调用方式

最近在学习javascript ，被js中的this关键字搞得晕头转向，都不知道这个东西到底是干什么的，不同的地方所指的对象又不一样。在查询了很多的资料以后，终于有了一些眉目了。

this的定义：在javascript中，上下文对象就是this指针，即被调用函数所处的环境，上下文对象的作用是一个函数内部引用调用它的对象本身。

上面就是javascript中this关键字的定义，单纯的理解来说还是很好理解的，但是真正到用的时候发现又是另外一回事了。

说到this的用法，就要谈到到this的作用域，this的用法很简单，难的就是this的作用域。this的作用域有和js中的函数调用模式有着密切的联系。

js中有四种函数调用的模式，分别是：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这四种模式在this关键字的初始化上面有很大的差异。

方法调用模式 ：当一个函数被保存为对象的一个属性时，我们称之它为该对象的一个方法，那么this被绑定到该对象上。

var myObject={ 
     <span style="white-space:pre">	</span>name : "myObject" , 
    <span style="white-space:pre">	</span>value : 0 , 
   <span style="white-space:pre">	</span>increment : function(num){ 
<span style="white-space:pre">		</span>this.value += typeof(num) === 'number' ? num : 0; 
<span style="white-space:pre">	</span>} , 
<span style="white-space:pre">	</span>toString : function(){ 
<span style="white-space:pre">		</span>return '[Object:'+this.name+' {value:'+this.value+'}]'; 
<span style="white-space:pre">	</span>} 
} 
alert(myObject);//[Object:myObject {value:0}] 

var myObject={ 
<span style="white-space:pre">		</span>name : "myObject" , 
<span style="white-space:pre">		</span>value : 0 , 
<span style="white-space:pre">		</span>increment : function(num){ 
<span style="white-space:pre">			</span>this.value += typeof(num) === 'number' ? num : 0; 
<span style="white-space:pre">		</span>} , 
<span style="white-space:pre">		</span>toString : function(){ 
<span style="white-space:pre">			</span>return '[Object:'+this.name+' {value:'+this.value+'}]'; 
<span style="white-space:pre">		</span>}, 
<span style="white-space:pre">		</span>getInfo:function(){ 
<span style="white-space:pre">			</span>return (function(){ 
<span style="white-space:pre">				</span>return this.toString();//内部匿名函数中this指向了全局对象window 
<span style="white-space:pre">			</span>})(); 
<span style="white-space:pre">		</span>} 
<span style="white-space:pre">	</span>} 
<span style="white-space:pre">		</span>alert(myObject.getInfo());//[object Window] 

var myObject={ 
<span style="white-space:pre">	</span>name : "myObject" , 
<span style="white-space:pre">	</span>value : 0 , 
<span style="white-space:pre">	</span>increment : function(num){ 
<span style="white-space:pre">		</span>this.value += typeof(num) === 'number' ? num : 0; 
<span style="white-space:pre">	</span>} , 
<span style="white-space:pre">	</span>toString : function(){ 
<span style="white-space:pre">		</span>return '[Object:'+this.name+' {value:'+this.value+'}]'; 
<span style="white-space:pre">	</span>}, 
<span style="white-space:pre">	</span>getInfo:function(){ 
<span style="white-space:pre">		</span>var self=this; 
<span style="white-space:pre">		</span>return (function(){ 
<span style="white-space:pre">			</span>return self.toString();//通过变量self指向myObject对象 
<span style="white-space:pre">		</span>})(); 
<span style="white-space:pre">	</span>} 
} 
<span style="white-space:pre">	</span>alert(myObject.getInfo());//[Object:myObject {value:0}] 

function MyObject(name){ 
<span style="white-space:pre">	</span>this.name=name || 'MyObject'; 
<span style="white-space:pre">	</span>this.value=0; 
<span style="white-space:pre">	</span>this.increment=function(num){ 
<span style="white-space:pre">	</span>this.value += typeof(num) === 'number' ? num : 0; 
<span style="white-space:pre">	</span>}; 
<span style="white-space:pre">	</span>this.toString=function(){ 
<span style="white-space:pre">		</span>return '[Object:'+this.name+' {value:'+this.value+'}]'; 
<span style="white-space:pre">	</span>} 
<span style="white-space:pre">	</span>this.target=this; 
} 
<span style="white-space:pre">	</span>MyObject.prototype.getInfo=function(){ 
<span style="white-space:pre">			</span>return this.toString(); 
} 
<span style="white-space:pre">	</span>/* 
<span style="white-space:pre">	</span>同时创建一个MyObject.prototype对象，myObject继承了MyObject.prototype的所有的属性， 
<span style="white-space:pre">	</span>this绑定到了MyObject的实例上 
<span style="white-space:pre">	</span>*/ 
<span style="white-space:pre">	</span>var myObject=new MyObject(); 
<span style="white-space:pre">	</span>var otherObject=new MyObject(); 
<span style="white-space:pre">	</span>//alert(myObject.target===myObject);//ture 
<span style="white-space:pre">	</span>//alert(myObject.target.getInfo());//[Object:MyObject {value:0}] 
<span style="white-space:pre">	</span>myObject.increment(10); 
<span style="white-space:pre">	</span>otherObject.increment(20); 
<span style="white-space:pre">	</span>alert(myObject.value);//10 
<span style="white-space:pre">	</span>alert(otherObject.value);//20 

function MyObject(name){ 
<span style="white-space:pre">	</span>this.name=name || 'MyObject'; 
<span style="white-space:pre">	</span>this.value=0; 
<span style="white-space:pre">	</span>this.increment=function(num){ 
<span style="white-space:pre">	</span>this.value += typeof(num) === 'number' ? num : 0; 
<span style="white-space:pre">	</span>}; 
<span style="white-space:pre">	</span>this.toString=function(){ 
<span style="white-space:pre">		</span>return '[Object:'+this.name+' {value:'+this.value+'}]'; 
<span style="white-space:pre">	</span>} 
<span style="white-space:pre">	</span>this.target=this; 
} 
<span style="white-space:pre">	</span>function getInfo(){ 
<span style="white-space:pre">		</span>return this.toString(); 
<span style="white-space:pre">	</span>} 
<span style="white-space:pre">	</span>var myObj=new MyObject(); 
<span style="white-space:pre">	</span>alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj 
<span style="white-space:pre">	</span>alert(getInfo.apply(window));//[object Window],this指向window 

javascript this 关键字以及四种函数调用模式

标签：js this关键字 四种函数调用方式

原文地址：http://blog.csdn.net/u012251421/article/details/46514879