一、作用
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()
