浅谈call()、apply()、bind()方法

call(), apply(), bind() 函数调用方法

一般我们是这样调用函数的：

function add(x){
    console.log(x)
}
add(2)//2

call()和apply()

现在我们说一说 call 方法和 apply 方法。他们的第一个参数都是需要调用的函数对象，在函数内这个参数就是this的值。call 和 apply 的区别在于 call 传的值可以是任意的，而 apply 传的值必须是数组。

• 他们都是调用一个对象的方法，以另一个对象替换当前对象。

例如：

function add(a,b){
    return a+b;
}
function sub(a,b){
    return a-b;
}
var a1 = sub.call(add,5,3);
var a2 = add.call(sub,5,3);
/* apply 方法
var a1 = sub.apple(add,[5,3])
var a2 = add.apple(sub,[5,3])
*/
console.log(a1)//2
console.log(a2)//8

在上面的例子中，sub.call(add,5,3) = sub(5,3)，意思就是用 sub 来替换 add 。

bind()

bind 和 call 方法比较类似，其作用都是改变上下文的this。但是它们还是有些许区别：

• bind 的返回值是函数

//都是将obj作为上下文的this
function func(name,id) {
    console.log(name,id,this);
}
//什么也不加
func("", "-->"); //---> window
//使用bind是 返回改变上下文this后的函数
var obj = "Look here";
var a = func.bind(obj, "bind", "-->");
a(); //bind--->
//使用call是 改变上下文this并执行函数
var b = func.call(obj, "call", "-->");//call--->
b(); //TypeError: undefined is not a function

• 后面的参数的使用也有区别

function f(a,b,c){
    console.log(a,b,c);
}
var f_Extend = f.bind(null,"extend_A")
f("A","B","C")  //这里会输出--> A B C
f_Extend("A","B","C")  //这里会输出--> extend_A A B
f_Extend("B","C")  //这里会输出--> extend_A B C
f.call(null,"extend_A") //这里会输出--> extend_A undefined undefined

call 是把第二个及以后的参数作为方法的实参传进去;
而bind 虽说也是获取第二个及以后的参数用于之后方法的执行，但是f_Extend中传入的实参则是在bind中传入参数的基础上往后排的。

//这句代码相当于以下的操作
var f_Extend = f.bind(null,"extend_A")
//↓↓↓
var f_Extend = function(b,c){
    return f.call(null,"extend_A",b,c);
}