一.call、apply、bind作用

在JavaScript中，call、apply和bind是Function对象自带的三个方法。这三个函数的存在意义是什么？答案就是改变函数运行时的this指向。下面我们通过实际例子来介绍这三个方法的使用和区别。

二.call

语法：fn.call(thisArg,arg1,arg2,...)

thisArg:函数fn运行时，该函数中的this绑定到thisArg上。
arg1,arg2,...：函数fn所需的参数,是个list

我们直接看例子：

var a ={
    name : "test",
    fn : function (a,b) {
        console.log(this.name, a + b)
    }
}
var b={name:'test1'}
a.fn(1,2) //test 3
a.fn.call(b,1,2) //test1 3

执行 a.fn(1,2)，fn中的this指向a，所以输出 test 3
执行 a.fn(1,2).call(b,1,2)，通过call改变了fn中的this指向为b，所以输出 test1 3

注意事项：

1. thisArg不传，或者传null，undefined， 函数中的this指向window对象
2. thisArg为原始值（数字，字符串，布尔值），函数中this指向该原始值的自动包装对象（如 String、Number、Boolean）
3. thisArg为一个对象，函数中的this指向这个对象
4. thisArg为一个函数名，函数中的this指向该函数
5. 前四点是默认在非严格模式下，如果在严格模式下，会略有不同。

我们直接看例子：

function a(params) {
    console.log(this);
}
function b() {}
var obj = {
    name: '这是一个屌丝'
};

//                  正常模式下              严格模式下
a.call();           //window               undefined
a.call(null);       //window               null
a.call(undefined);  //window               undefined
a.call(1);          //Number{1}            1
a.call('');         //String{''}           ''
a.call(true);       //Boolean{true}        true
a.call(b);          //function b(){}       function b(){}
a.call(obj);        //Object               Object

三.apply

语法：fn.call(thisArg,[arg1,arg2,...])或者 fn.call(thisArg,{0:arg1,1:arg2,...,lenght:总个数})

thisArg:函数fn运行时，该函数中的this绑定到thisArg上。
[arg1,arg2,...]或者形如{0:arg1,1:arg2,...,lenght:总个数}：函数fn所需的参数,是个数组或者类数组,call函数会自动将数组或类数组的每个值分开成列表然后给函函数fn

例子和上面一样，只需要把call换成apply即可。其他都一样，包括上面call的几点注意事项即不传或者传null等。

四.bind

语法：fn.bind(thisArg,arg1,arg2,...)()

thisArg:函数fn运行时，该函数中的this绑定到thisArg上。
arg1,arg2,...：函数fn所需的参数,是个list

bind其实和call类似,包括上面call的几点注意事项即不传或者传null等，只不过后面多个（）。我们直接看例子

 var a = {
    name: "test",
    fn: function (a, b) {
        console.log(this.name, a + b)
    }
}
var b = {
    name: 'test1'
}
a.fn.bind(b, 1, 2)

运行上面代码，我们发现控制台并没有输出，所以我们可以看出bind 是创建一个新的函数，我们必须要手动去调用。我们更改代码：

var a = {
    name: "test",
    fn: function (a, b) {
        console.log(this.name, a + b)
    }
}
var b = {
    name: 'test1'
}
a.fn.bind(b, 1, 2) //test1 3

上面我们手动调用，发现正确输出结果。

五.call apply bind三者区别总结

1.call和apply用法一样，唯一的区别是call的参数为列表，apply参数为数组
2.bind和call用法一样，唯一的区别是call会自执行函数，bind需要手动调用函数

六.应用

1.继承

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
var Girl = function (name) {
    Person.call(this, name);
};
var Boy = function (name, age) {
    Person.apply(this, arguments);
}
var Boy1 = function (name, age) {
    Person.bind(this, name)();
}
var g = new Girl('xiaohong');
var b = new Boy('xiaoming', 100);
var b1 = new Boy1('xiaowang', 100);
console.log(g); //{name: "xiaohong", age: undefined}
console.log(b); //{name: "xiaoming", age: 100}
console.log(b1); //{name: "xiaowang", age: undefined}

上面例子，我们定义了四个构造函数，通过new实例化调用Girl、Boy、Boy1这三个构造函数，在这三个构造函数中分别使用call、apply、bind继承Person的属性。

2.求数组中的最大和最小值

var ary = [0, 1, 1, 3, 4, 5, 6, 7];
console.log(Math.max(0, 1, 1, 3, 4, 5, 6, 7)); //7
console.log(Math.min(0, 1, 1, 3, 4, 5, 6, 7)); //0
var max = Math.max.apply(null, ary);
var min = Math.min.apply(null, ary);
console.log(max,min); //7 0

上面例子可以看出，正常情况下，Math.max和Math.min的参数为必须为列表，上面只用0-7八个数字还好，但如果数据很多，都放到参数会比较麻烦。

所以我们借助apply可以将数组转换成列表的功能，这样我们就可以直接传递一个变量了。第一个参数这里使用null，实际换成其他都可以（如随便一个字符串、数字、对象等），这里主要使用的是call函数的 数组转列表功能。

3.类数组转数组

Array.prototype.slice.call(arrayLike) 或者 Array.prototype.slice.apply(arrayLike)

具体可以戳这javascript中的伪（类）数组和数组

4.数组追加

在js中我们往数组追加元素，一般使用push方法。

  var arr1 = [1,2,3];
  var arr2 = [4,5,6];
  arr1.push(4,5,6)
  console.log(arr1) //[1,2,3,4,5,6]

我们也可以使用apply方法：

var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1,arr2)
console.log(arr1) //[1,2,3,4,5,6]

上面代码意思表示：[]调用push方法，然后通过call将push方法中的this指向arr1，并将arr2转变成参数列表。这样就达到合并的目的。

5. 判断变量类型

Object.prototype.toString.call/apply(object);

具体详见另一篇文章toString()和Object.prototype.toString.call()