前端this指向

了解函数中this在不同场景下的默认值

1.普通函数

普通函数的调用方式决定了 'this'的值，即【谁调用this的值指向谁】 普通函数没有明确调用者时 this 值为 window

function sayHi() {
    console.log(this)  
  }
  // 函数表达式
  const sayHello = function () {
    console.log(this)
  }
  // 函数的调用方式决定了 this 的值
  sayHi() // window
  window.sayHi()

2.箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量

3.构造函数

构造函数中的this指向实例对象

改变this指向的三个方法

有三种方法可以改变this指向：call（） apply（）bind（）

1. call() –了解

使用 call 方法调用函数，同时指定被调用函数中 this 的值 语法：fun.call(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值 arg1，arg2：传递的其他参数 返回值就是函数的返回值，因为它就是调用函数

2. apply()-理解

使用 apply 方法调用函数，同时指定被调用函数中 this 的值 语法：fun.apply(thisArg, [argsArray]) thisArg：在fun函数运行时指定的 this 值 argsArray：传递的值，必须包含在数组里面 返回值就是函数的返回值，因为它就是调用函数 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

3. bind()-重点

bind() 方法不会调用函数。但是能改变函数内部this 指向 语法：fun.bind(thisArg, arg1, arg2, ...) thisArg：在 fun 函数运行时指定的 this 值 arg1，arg2：传递的其他参数 返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数） 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的this指向.

相同点:
都可以改变函数内部的this指向.

区别点:
call 和 apply 会调用函数, 并且改变函数内部this指向.

call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]

bind 不会调用函数, 可以改变函数内部this指向.

主要应用场景:

call 调用函数并且可以传递参数

apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值

bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.