普通函数this指向
普通函数的调用方式决定了this的值，即谁调用this的值指向谁
普通函数没有明确调用者时this值为window，严格模式下没有调用者时this的值为undefined
箭头函数this指向
箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this
1.箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中，一层一层查找this，直到有this的定义
情况1：在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数
情况2：同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数
总结：
1.函数内不存在this，沿用上一级的
过程：向外层作用域中，一层一层查找this，直到有this的定义
2.不适用：构造函数，原型函数，字面量对象中函数，dom事件函数等
3.适用：需要使用上层this的地方
4.使用正确的话，它会在很多地方带来方便
改变this
call()--了解
使用call方法调用函数，同时指定被调用函数中this的值
语法：
fun.call(thisArg,arg1,arg2,...)
thisArg:在fun函数运行时指定的this值
arg1,arg2:传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
apply()-理解
使用apply方法调用函数，同时指定被调用函数中this的值
语法：
fun.apply(thisArg,[argsArray])
thisArg:在fun函数运行时指定的this值
argsArray:传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此apply主要跟数组有关系，比如使用Math.max()求数组的最大值
const obj = {
age: 18
}
function fn(x, y) {
console.log(this)
console.log(x + y)
}
fn.apply(obj, [1, 2])求最大值
const arr = [100, 44, 77]
const max = Math.max.apply(Math, arr)
const min = Math.min.apply(Math, arr)
console.log(max, min)bind()-重点
bind()方法不会调用函数，但是能改变函数内部this指向
语法：
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函数运行时指定的this值
arg1,arg2：传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝（新函数）
因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部的this指向。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
</head>
<body>
<button>发送短信</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
this.disabled = true
window.setTimeout(function () {
this.disabled = false
}.bind(btn), 2000)
})
</script>
</body>
</html>call,apply,bind总结
相同点：都可以改变函数内部的this指向
区别点：
1）call和apply会调用函数，并且改变函数内部this指向。
2）call和apply传递的参数不一样，call传递参数aru1,aru2...形式,apply必须数组形式[arg]
3）bind不会调用函数，可以改变函数内部this指向
主要应用场景：
1）call调用函数并且可以传递参数
2）apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值
3）bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向