JavaScript函数调用的四种模式详解

JavaScript函数调用模式概述

本文内容参考自《JavaScript语言精粹》，并非直接引用书中的源代码。在JavaScript中，每次函数调用都会自动提供两个额外的参数：this和arguments。其中，arguments是一个类数组对象，用于存储传入的参数，它并非真正的Array实例，但可以通过.length属性获取参数数量。书中总结了四种主要的调用模式：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。

/*方法调用模式*/
var myobject={
value:0,
inc:function(){
alert(this.value)
}
}
myobject.inc()

此时this指向全局对象window。

/*函数调用模式*/
var add=function(a,b){
alert(this)//this被绑定到window
return a+b;
}
var sum=add(3,4);
alert(sum)

《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());

接下来看一个更实用的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)});