apply/call/bind的区别与用法

apply 方法/call 方法

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

两者作用一致，都是把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。唯一区别是apply接受的是数组参数，call接受的是连续参数。

看代码：

function add(j, k){
    return j+k;
}

function sub(j, k){
    return j-k;
}

// 我们在控制台运行：
add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8

sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

 

通过call和apply，我们可以实现对象继承。

var Parent = function(){
    this.name = "yjc";
    this.age = 22;
}

var child = {};

console.log(child);//Object {} ,空对象

Parent.call(child);

console.log(child); //Object {name: "yjc", age: 22}

//以上实现了对象的继承。

 

apply的一些巧妙用法

 

Math.max 可以实现得到数组中最大的一项

 

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组

 

但是它支持Math.max(param1,param2,param3…) 所以可以根据apply的特点来解决

var max=Math.max.apply(null,array) 这样轻易的可以得到一个数组中最大的一项

 

Math.min  同理也可以实现得到数组中最小的一项

var min=Math.min.apply(null,array);

 

Array.prototype.push 可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,

var arr1 = new Array("1","2","3");

var arr2 = new Array("4","5","6");

Array.prototype.push.apply(arr1,arr2);

console.log(arr1);  [1,2,3,4,5,6]

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合

 

那么什么时候可以用到apply的这些特殊方法

一般在目标函数只需要n个参数列表,而不接收一个数组的形式

当然，现在es6中的扩展运算符可以替代apply

 

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

 

call 巧妙用法 

Array.slice.call(arguments, 0)

因为slice方法是只能作用于数组，arguments是一个对象，所以借助call实现，0就是传递给slice的参数。

 

bind()
最后再来说 bind() 函数，上面讲的无论是 call() 也好， apply() 也好，都是立马就调用了对应的函数，
而 bind() 不会， bind() 会生成一个新的函数，bind() 函数的参数跟 call() 一致，
第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。
bind() 生成的新函数返回后，你想什么时候调就什么时候调，看下代码就明白了

var m = {   
    "x" : 1
};
function foo(y) {
    alert(this.x + y);
}
foo.apply(m, [5]);
foo.call(m, 5);
var foo1 = foo.bind(m, 5);
foo1();