宽屏
1. this指向-普通函数
普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】
// 普通函数
function sayHi() {
console.log(this)
}
// 函数表达式
const sayHello = function() {
console.log(this)
}
// 函数的调用方式决定了 this 的值
sayHi() // window
window.sayHi()
// 普通函数
function sayHi() {
console.log(this)
}
// 函数表达式
const sayHello = function() {
console.log(this)
}
// 普通对象
const user = {
name: '小明',
walk: function() {
console.log(this)
}
}
// 动态为 user 添加方法
user.sayHi = sayHi
user.sayHello = sayHello
// 函数调用方式，决定了 this 的值
user.sayHi()
user.sayHello()
<script>
'use strict'
function fn() {
console.log(this)
}
fn()
</script>
普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined
2. this指向-箭头函数
箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！
1. 箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中，一层一层查找this，直到有this的定义
// 普通对象
const user = {
name: '小明',
// 该箭头函数中的 this 为函数声明环境中 this 一致
walk: () => {
console.log(this)
}
}
user.walk()注意情况1：
在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window
因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数
// DOM 节点
const btn = document.querySelector('.btn')
// 箭头函数 此时 this 指向了 window
btn.addEventListener('click', () => {
console.log(this)
})
// 普通函数 此时 this 指向了 DOM 对象
btn.addEventListener('click', function() {
console.log(this)
})注意情况2：
同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数
function Person() {
}
// 原型对象上添加了箭头函数
Person.prototype.walk = () => {
console.log('巴拉~巴拉~巴拉~')
console.log(this) // window
}
const p1 = new Person()
p1.walk()总结：
1. 函数内不存在this，沿用上一级的
2.不适用
构造函数，原型函数，dom事件函数等等
3. 适用
需要使用上层this的地方
4. 使用正确的话，它会在很多地方带来方便，后面我们会大量使用慢慢体会
3. 改变this
JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向
1. call() –了解
使用 call 方法调用函数，同时指定被调用函数中 this 的值
语法：
fun.call(thisArg, arg1, arg2, ...)
thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
const obj = {
name: '坤坤'
}
function fn() {
console.log(this) // 指向 obj {name: '坤坤'}
}
fn.call(obj)const obj = {
name: '坤坤'
}
function fn(x, y) {
console.log(this) // 指向 obj {name: '坤坤'}
console.log(x + y) // 传递过来的参数相加
}
fn.call(obj, 1, 2)2. apply()-理解
使用 apply 方法调用函数，同时指定被调用函数中 this 的值
语法：
fun.apply(thisArg, [argsArray])
thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值
// 求和函数
function counter(x, y) {
return x + y
}
// 调用 counter 函数，并传入参数
let result = counter.apply(null, [5, 10])
console.log(result)3. bind()-重点
bind() 方法不会调用函数。但是能改变函数内部this 指向
语法：
fun.bind(thisArg, arg1, arg2, ...)
thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数）
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的this指向.
// 普通函数
function sayHi() {
console.log(this)
}
let user = {
name: '小明',
age: 18
}
// 调用 bind 指定 this 的值
let sayHello = sayHi.bind(user)
// 调用使用 bind 创建的新函数
sayHello()call apply bind 总结
相同点:
都可以改变函数内部的this指向.
区别点:
call 和 apply 会调用函数, 并且改变函数内部this指向.
call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
call 调用函数并且可以传递参数
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.