从上一篇可以知道,不同的函式呼叫会造成this的不同,但我们能不能在呼叫时候明确指定呢?
当然可以。会有这个想法是因为往往在执行某支函式时想要用回呼函式(mizumisushi),但发现this总是显示window,为了确保this是我们想要的物件或函式,就必须使用apply及call。
可能有点难以理解,这边我们来看一个示例:
var obj = {
price:20,
sum:function(cb){
cb(100);
}
}
function getData(val){
console.log(this);
}
obj.sum(getData);//Window
可以看到我们预期getData的this是obj物件,但显示出来的却是window。
这是因为,当没有特定指明this的情况下,预设绑定(Default Binding)this为「全局物件」,也就是window。
所以除非我们透过call及apply强制指定this为自己想要的物件或函式,不然getData都会是预设的window。
就算包裹在物件内也是一样:
var obj = {
price:20,
sum:function(cb){
cb(100);
},
getData:function(val){
console.log(this,val);
}
}
obj.sum(obj.getData);//Window
好,现在我们知道call及apply可以强制指定this了,那要怎么用呢?
call及apply的作用完全一样,差别只在传入参数的方式有所不同。
call后面只接受单个值的参数,而apply只接受一个数组的参数:
var obj = {
price:20
};
function funA(x,y){
console.log(this);
console.log(x,y);
}
funA.call(obj,2,3);
//{price: 20}
//2 3
funA.apply(obj,[10,100]);
//{price: 20}
// 10 100
所以刚刚的例子我们可以这样改写:
var obj = {
price:20,
sum:function(cb){
cb.call(obj,100);
},
getData:function(val){
console.log(this,val);
}
}
obj.sum(obj.getData);
我们在第七天时有提到函式重载的示例:
function addMethod(obj,key,fn){
var old = obj[key];
obj[key] = function(){
if(fn.length === arguments.length){
return fn(arguments);
} else if(typeof old ===“function”){
return old(arguments);
}
}
}
其实这样改写会比较妥当:
function addMethod(obj,key,fn){
var old = obj[key];
obj[key] = function(){
if(fn.length === arguments.length){
return fn.apply(this,arguments);
} else if(typeof old ===“function”){
return old.apply(this,arguments);
}
}
}
以上就是call及apply的用法!
参考资料:
忍者JavaScript开发技巧探秘
重新认识JavaScript: Day 20 What's“THIS”in JavaScript
文章来源:(http://www.Lishim.com )