本文深入解析JavaScript中this的绑定规则，特别是在回调函数中this的默认绑定问题。通过实例说明call和apply如何用于显式绑定this，以及它们在参数传递上的区别。最后，通过重写函数来展示call和apply的正确应用。
从上一篇可以知道，不同的函式呼叫会造成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 ）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
