学JS的心路历程-函式（四）apply、call

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