javascript中的call()和apply应用
在javascript开发过程中，如果有看过几个javascirpt代码库，就会发现经常使用到call()和apply()函数，call()和aplly()结合javascript允许传递函数名，这种便利性在javascript开发过程中是毋庸置疑的。call()和apply()函数的实现作用是一样的，只不过call()是逐个传递参数，而apply()允许传递参数数组，这个完全根据实际需要进行选择。
call()和apply()的第一个参数是代码执行的上下文。当call()和apply()函数的第一个参数传递为null时，则这个时候的上下文为window.call()和apply()函数在使用上比较难理解一点，如果能够理解透了将非常的喜欢使用。
- 下面是一个异步提交表单，并异步回调并通过call()函数实现给回调函数动态传递参数的过程。
function addSelectOption(selectId, optionValue, optionText, className){
var oSelect = document.getElementById(selectId);
if(oSelect){
var option = document.createElement("option");
option.value = optionValue;
option.text = optionText;
className = className == "undefined" ? "" : className;
try{
option.setAttribute("class", className);
oSelect.add(option,null);
} catch(e){
option.setAttribute("className", className);
oSelect.add(option);
}
return option;
}
return null;
}
/*窗口配置*/
var dialogSetting = {
refrain : 0,
queue : []
};
/*在selectId上绑定事件*/
$("#selectId > option").eq(0).click({
newDialog(url, this, jsonParse);
});
function newDialog(url, obj, fnCallback){
art.dialog({
title : '欢迎',
content : document.getElementById("dialogBody"),
ok : function () {
/*异步提交函数*/
postDataToServer(url, obj, fnCallback);
return false;
},
okValue: '提 交',
cancelValue: '关 闭',
cancel: function () {
$("#data").val("");
}
});
return false;
}
/*提交表单数据到服务端*/
function postDataToServer(url, obj, fnCallback){
var message = "";
var dataValue = document.getElementById("data").value;
if(dataValue.length == 0){
message = "请填写内容！";
$("#lbl_error").html(message);
return false;
}
/*判断是否允许重复*/
if(dialogSetting.refrain == 0){
if(("," + dialogSetting.queue.join(",") + "," ).indexOf(","+ dataValue +",") >=0){
message = "提交内容已存在，不允许出现重复！";
$("#lbl_error").html(message);
return false;
}
}
$.post(url,{
data : dataValue
}).success(function(responseData, textStatus, jqXHR) {
eval("var rtnJson="+ responseData + ";");
if(rtnJson.state == "1"){
/*将提交的内容插入队列*/
var permitName = rtnJson.dataName;
dialogSetting.queue.push(permitName);
fnCallback.call(obj, obj, rtnJson);
message = "数据提交成功！";
}else{
message = "数据提交失败，请重新尝试";
}
}).error(function(XMLHttpRequest, textStatus , errorThrown) {
message = "网络通讯异常，请重新尝试登录！";
}).complete(function(data) {
$("#lbl_error").html(message);
});
}
function jsonParse(obj, json){
if(obj && json.state == 1){
var option = document.createElement("option");
option.text = json.dataName;
option.value = json.dataKey;
document.getElementById("gather").add(option,obj);
/*选中指定的option*/
selSpecialOption("selectId", document.getElementById("selectId").options.length - 2);
}
}
在上面的例子中，fnCallback回调函数就是jsonParse函数，jsonParse有两个参数，因此call()函数中需要传递相应的两个参数，同时由于call()的第一个参数是指定上下文对象，而这个例子中的上下文其实就是下拉id为selectId的第一个option对象，即参数obj = $("#selectId > option").eq(0)。因此
fnCallback.call(obj, obj, rtnJson);
等同于
jsonParse.call($("#selectId > option").eq(0),$("#selectId > option").eq(0),rtnJson)
其中第一个$("#selectId > option").eq(0)为call调用的上下文，第二个$("#selectId > option").eq(0)为jsonParse需要的参数
在apply()函数中实现以上的结果就是
fnCallback.apply(obj, [obj, rtnJson]);
jsonParse.call($("#selectId > option").eq(0),[$("#selectId > option").eq(0),rtnJson])
wala-wo
