本文详解JavaScript中函数调用的四种模式：方法调用、函数调用、构造器调用及apply调用。重点解析不同模式下this的指向差异，特别是利用apply改变this上下文以解决事件绑定中this丢失的问题，帮助开发者深入理解JS核心机制。
JavaScript函数调用模式概述
本文内容参考自《JavaScript语言精粹》，并非直接引用书中的源代码。在JavaScript中，每次函数调用都会自动提供两个额外的参数：this和arguments。其中，arguments是一个类数组对象，用于存储传入的参数，它并非真正的Array实例，但可以通过.length属性获取参数数量。书中总结了四种主要的调用模式：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。
方法调用模式
代码如下:
/*方法调用模式*/
var myobject={
value:0,
inc:function(){
alert(this.value)
}
}
myobject.inc()2：函数调用模式
此时this指向全局对象window。
函数调用模式
代码如下:
/*函数调用模式*/
var add=function(a,b){
alert(this)//this被绑定到window
return a+b;
}
var sum=add(3,4);
alert(sum)3：构造器调用模式
《JavaScript语言精粹》建议避免使用这种调用方式，因为存在更好的替代方案。具体优化方法将在后续博文中介绍。
链接将在此处添加。
构造器调用模式
代码如下:
/*构造器调用模式 摒弃*/
var quo=function(string){
this.status=string;
}
quo.prototype.get_status=function(){
return this.status;
}
var qq=new quo("aaa");
alert(qq.get_status());4：apply调用模式
接下来看一个更实用的apply示例，代码见下方。
apply调用模式与事件绑定应用
代码如下:
/*apply*/
//注意使用了上面的sum函数
//与myobject
这种调用方式的优势在于可以指定this指向的目标对象。
apply的第一个参数即为this指针要指向的对象。
var arr=[10,20];
var sum=add.apply(myobject,arr);
alert(sum);查看apply的实际应用场景：bind函数用于绑定事件。
代码如下:
var bind=function(object,type,fn){
if(object.attachEvent){//IE浏览器
object.attachEvent("on"+type,(function(){
return function(event){
window.event.cancelBubble=true;//停止事件冒泡
object.attachEvent=[fn.apply(object)];//----这里我要讲的是这里
//在IE里用attachEvent添加一个事件绑定以后。
//this的指向不是到object对象本身所以。我们绑定的function里的this.id是无法工作的。
//但是如果我们用fn.apply(object)
//这里可以看出我们是把apply的第一个对象也就是this的指向变更给了object所以this.id就变成了
//object.id 可以正常工作了。
}
})(object),false);
}else if(object.addEventListener){//其他浏览器
object.addEventListener(type,function(event){
event.stopPropagation();//停止事件冒泡
fn.apply(this)
});
}
}
bind(document.getElementById("aaa"),"click",function(){alert(this.id)});