一、作用

apply、call 、bind 它们三个都是调用函数，改变函数执行环境上下文,也就是改变 this 的 指向

二、区别

A、传递参数

1、call：参数列表，一个一个的传

fun.call(thisArg, arg1, arg2, ...)
如 fun.call(undefined, 1,2,3)

2、apply：参数数组

func.apply(thisArg, [argsArray])
如 func.apply(undefined, [1,2,3])

3、bind ：创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项

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

B、返回结果

1、call | apply返回：函数结果
2、bind 返回：新函数，并且使函数内部的this为传入的第一个参数

三、实例

A、先说 call | apply

1、第一题

"use strict"
function fn(a,b){
    console.log(this)
}
fn(1, 2)
//等价于
fn.call(undefined, 1, 2)
fn.apply(undefined, [1, 2])

1、在严格模式下， fn 里的 this 就是 call 的第一个参数，也就是 undefined。
2、在非严格模式下(不加"use strict")， call 传递的第一个参数如果是 undefined 或者 null， 那 this 会自动替换为 Window 对象

2、第二题

var obj = {
    fn: function(a, b){
        console.log(this)
    },
    child: {
        fn2: function(){
            console.log(this)
        }
    }
}
obj.fn(1, 2)
//等价于
obj.fn.call(obj, 1, 2)         // 所以 this 是 obj
obj.fn.apply(obj, [1, 2])

obj.child.fn2()
//等价于
obj.child.fn2.call(obj.chid) 

所以 this 是 obj.child，以上就是原理，我们根据原理再看几道题吧

3、第三题

let name = '饥人谷'
let people = {
   name: '若愚',
   sayName: function(){
       console.log(this.name)
   }
}
let sayAgain = people.sayName
function sayName(){
   console.log(this.name)
}

解析：
1、sayName()
相当于 sayName.call(undefined) ，因为是非严格模式，所以 this 被替换成 Window，所以这里输出全局的 name 即 "饥人谷"

2、people.sayName()
相当于 people.sayName.call(people) ，所以这里输出 people.name 即 "若愚"

3、sayAgain()
相当于 sayAgain.call(undefined) ，，因为是非严格模式，
所以 this 被替换成 Window，所以这里输出全局的 name 即 "饥人谷"

4、第四题

var arr = []
for(var i=0; i<3; i++){
    arr[i] = function(){ console.log(this) }
}
var fn = arr[0]

解析：
1、arr[0]
因为函数是个特殊的对象，
所以 arr 相当于 { '0': function(){}, '1': function(){}, '2': function(){}, length:3}

arr[0]相当于 arr['0'] 相当于 arr.0 （当然这种写法不符合规范），
所以 arr[0]等价于 arr.0.call(arr), this就是 arr

2、fn()
相当于 fn.call(undefined)， 所以 fn 里面的 this 是 Window

B、再说 bind

1、第一题

var obj = {name: '饥人谷'}
function sayName(){
    console.log(this.name)
}
var fn = sayName.bind(obj)  // 注意 这里 fn 还是一个函数，功能和 sayName 一模一样，区别只在于它里面的 this 是 obj
fn() // 输出： '饥人谷'

2、第二题

var app = {
    container: document.querySelector('body'),
    bind: function(){
        this.container.addEventListener('click', this.sayHello)                  //点击的时候会执行 sayHello，sayHello 里面的 this 代表 body 对象
        this.container.addEventListener('click', this.sayHello.bind(this))  //点击的时候会执行 sayHello，sayHello 里面的 this 代表 app 对象
    },
    sayHello: function(){
       console.log(this)
    }
}
app.bind()