js apply() call() bind() 的使用 及区别

bind ,call,apply 这三者都是用来改变函数的this对象的指向的。

call和apply其实是同一个东西，区别只有参数不同。

其实call和apply ，只要你调用调用一个函数的时候就可以用，任何时候，任何函数，随便用，但是没有意义，但是我们得知道什么场景合适去用。

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

obj.call(thisObj, arg1, arg2, ...);

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

两者作用一致，都是把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。

apply:

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

Function.apply(obj,args)方法能接收两个参数

obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）

call：

和apply的意思一样,只不过是参数列表不一样.

 Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj：这个对象将代替Function类里this对象
params：这个是一个参数列表

问题来了-->什么情况下用apply,什么情况下用call???

在给对象参数的情况下,如果参数的形式是数组的时候,用apply。

参数列表是(param1,param2,param3),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(方法.call(this,param1,param2,param3));

看个例子：

 var xw = {
      name : "小王",
      gender : "男",
      age : 24,
      say : function(school,grade) {
           alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                
       }
}
var xh = {
     name : "小红",
     gender : "女",
     age : 18
}

call来说是这样的：xw.say.call(xh,"实验小学","六年级");       

apply来说是这样的：xw.say.apply(xh,["实验小学","六年级啦啦啦"]);

看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。

那么bind怎么传参呢？bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参：xw.say.bind(xh)("实验小学","六年级");

后面会说到bind。先了解一下。

apply的一些其他巧妙用法:

在调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合, 在调用某个方法的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,这个就是apply的一个巧妙的用处：

可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ，这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:

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

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

但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

(2)Math.min  可以实现得到数组中最小的一项

同样和 max是一个思想 var min=Math.min.apply(null,array);

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

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

let arr1=new Array("1","2","3");    
let 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类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!

bind:

Function.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。

arg1, arg2, … （可选）当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；

先看一下官网例子：

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX());//undefined //在全局作用域调用 this指向window


const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());//42

call , bind ,apply 区别：

看一个例子：

var xw = {
       name : "小王",
       gender : "男",
       age : 24,
       say : function() {
             alert(this.name + " , " + this.gender + " ,今年" + this.age);                                
       }
}
var xh = {
       name : "小红",
       gender : "女",
       age : 18
}
xw.say();

显示的肯定是小王 ， 男 ， 今年24。

那么如何用xw的say方法来显示xh的数据呢????

call可以这样：xw.say.call(xh);

apply可以这样：xw.say.apply(xh);

bind来说需要这样：xw.say.bind(xh)();

看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。

 

学无止境，砥砺前行，fighting!!!