从上一篇可以知道,不同的函式呼叫会造成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