apply，call，bind的用法

call,apply,bind的作用是改变函数运行时this的指向，它们的作用相似，不同的是传参的不同和返回形式的不同。

函数的调用方法： 方法调用模式 函数调用模式

方法调用模式

在对象中定义方法并返回一个函数，如下：

var a = 1
var obj1 = {
    a:2,
    fn:function(){
        console.log(this.a)
    }
}
obj1.fn()//2   
复制代码

函数调用模式

普通函数的调用，此时的this被绑定到window

function fn1(){
    console.log(this)//window
}
fn1()
复制代码

嵌套函数调用

function fn1(){
    function fn2(){
        console.log(this)//window
    }
    fn2()
}
fn1()
复制代码

var a = 1
var obj1 = {
    a:2,
    fn:function(){
        console.log(this.a)
    }
}
var fn1 = obj1.fn
fn1()//1
复制代码

call方法

call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window,即 call(obj,arguments)

当obj为null或者undefined时，默认指向window

var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89
复制代码

var obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.call(obj, 'Dot', 'Dolby')
复制代码

apply方法

apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。apply(obj,arr)

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
复制代码

var obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby
复制代码

call和apply可用来借用别的对象的方法，这里以call()为例：

var Person1  = function () {
    this.name = 'Dot';
}
var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);
}
var person = new Person2();
person.getname();       // Dot
复制代码

call和apply本质上是很相似的，只是传参的形式不同，call传arguments，apply传的是数组。 对于什么时候该用什么方法，其实不用纠结。如果你的参数本来就存在一个数组中，那自然就用 apply，如果参数比较散乱相互之间没什么关联，就用 call。像上面的找一组数中最大值的例子，当然是用apply合理。

bind的用法

和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。

function fn(a, b, c) {
    console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');

fn('A', 'B', 'C');            // A B C
fn1('A', 'B', 'C');           // Dot A B
fn1('B', 'C');                // Dot B C
fn.call(null, 'Dot');      // Dot undefined undefined

复制代码

call,apply,bind应用场景

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

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var max = Math.max.call(null,arr[0],arr[1]...)//89
var min = Math.min.apply(null,arr)//1
var min = Math.min.call(null,arr[0],arr[1]...)//1
复制代码

2. 将类数组转化为数组

var trueArr = Array.prototype.slice.call(arrayLike)
复制代码

3. 数组追加

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var total = [].push.apply(arr1, arr2);//6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]
复制代码

4. 利用call和apply做继承

function Person(name,age){
    // 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}
function Female(){
    Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
var dot = new Female('Dot',2)
复制代码

5. 使用 log 代理 console.log

function log(){
  console.log.apply(console, arguments);
}
复制代码

总结

call、apply和bind函数存在的区别:
bind返回对应函数, 便于稍后调用； apply, call则是立即调用。在es6的箭头函数下，call和apply会失效