JavaScript中的call、apply以及bind

一、作用

这三个函数存在的作用，目的都是一样的，都是为了改变函数运行中的上下文而存在的，换句话说，就是为了动态的改变函数体内的this指向。因为 JavaScript 的函数存在 「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。举个例子：

var func1 = function(arg1, arg2) {};

//apply

func1.apply(this, [arg1, arg2]);

//call

func1.call(this, arg1, arg2);

//bind

func1.bind(this, arg1, arg2);

总而言之，这三个方法，都是借用别人的方法来调用，就像调用自己的一样。

二、区别

call、apply改变函数的上下文之后，立即执行该函数，而bind，则是返回一个改变了上下文的函数。

call、apply二者之间的差别在于参数的区别，call和aplly的第一个参数都是要改变上下文的对象，而call从第二个参数开始以参数列表的形式展现，apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。

三、使用场景

这三个函数如何应用？什么情况下使用？能改变this的指向又有啥作用？

1.处理伪数组

什么是伪数组？

具有length属性；

能按照索引存储数据；

能像遍历数组一样来遍历；

不能使用数组的Array.push()、Array.slice()等方法。

简单来说，就是可以像数组一样操作的对象，但是不能使用数组的方法。JavaScript中存在大量的伪数组，例如：function 中间的 arguments 对象、queryAll()、getELementsByTagName()、childNodes/children 等方法的返回值、jquery获取的元素等等。

伪数组没有数组的那些方法，那么怎么像数组一样操作他们呢？ 答案就是借用Array。例如：

[].slice.call( arr, 1, 4 );

2.继承

function person(name){

this.name= name

}

function man(name){

this.age= '男';

  person.call(this,name);              // 继承man

}

var me= new man('海洋饼干');

console.log(me.name,me.age);            // '海洋饼干' '男'

3. this 硬绑定 --- bind

将一个对象强制且永久的绑定到函数的this上，使用call,apply或者其他的绑定方式都无法改变（除了 new 绑定，当然，可以手动撸一个new都无法改变的硬绑定)

4.取数组最大值和最小值

Math.max和min方法，接收多个参数，比较出极值，这里用到apply的一个默认功能：展开数组，传入一个数组参数就可以默认将这个数组转成一个个参数的形式赋给原函数

varnum= [6,9,-3,-5];

console.log(Math.max.apply(Math,num));     // 9   等价 console.log(Math.max(6,9,-3,-5));

console.log(Math.min.apply(Math,num));     // -5  等价 console.log(Math.min(6,9,-3,-5));

5.合并数组

合并数组常见有三种方式，1.循环 2.Array的concat() 3. 使用apply()合并

这里是使用最简便的apply

var a = [1,2,3];

var b = [4,5,6];

[].push.apply(a,b);    // 借用数组的push方法 等价 a.push(4,5,6);

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