js中如何改变this指向

this

this 在 js 中是必不可少的关键字，应用非常广泛，下面来聊聊 this 指向吧

首先先了解 this 在不同场景下的指向

1. 普通函数中 this 指向 window

2. 定时器中的 this 也是指向 window

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

4. 方法中的 this 指向调用者

5. 事件处理函数中的 this 指向事件源

6. 自调用函数中的 this 指向 window

7. 箭头函数中的 this 指向上一级 this 或者所在作用域的 this

那么如何修改 this 指向呢

下面就来聊聊修改 this 指向的三种方法以及它们之间的差异

call 方法：函数.call(this, arg1…) 函数的方法，用于继承

function fn(sex){
  console.log(this)
  this.sex = sex
}

let obj = {uname:'阿飞',age:22}
fn.call(obj, '男')
// 函数调用call，call会让函数执行，执行过程中改变this指向

运行结果

此时可以看到 this 指向不是 window 对象而是 obj 对象
call 方法中的第一个参数就是修改 this 指向谁，后面的参数是传参使用

apply 方法：函数.apply(this,[数组])

用法跟 call 方法相同，不同之处就是除第一个参数外，后面的参数是放在一个数组里面，

function fn(sex){
  console.log(this)
  this.sex = sex
}

let obj = {uname:'阿飞',age:22}
fn.apply(obj, ['男'])
// 函数调用apply，apply会让函数执行，执行过程中改变this指向

运行结果跟 call 方法一样

bind 方法：函数.bind(this,arg1…) ，不会让函数执行而是相当于返回一个改变this之后的函数

function fn(sex) {
  console.log(this)
  this.sex = sex
}

let obj = { uname: '阿飞', age: 22 }
fn.bind(obj, '男')()
// 函数调用bind，bind不会让函数执行，执行过程中改变this指向

运行结果

跟上面两种方法不同的就是 bind 方法不会让函数执行，而是返回一个改变 this
指向的函数一要进行函数调用才会执行，call 和 apply 方法会让函数立即执行

小结：

三种方法都可以改变 this 指向

1. call 方法中第一个参数是指定该函数 this 指向谁，后面可以跟很多个参数，并且会让函数立即执行
2. apply 方法中第一个参数是指定该函数 this 指向谁，后面有一个数组形式的参数，数组里面放的就是需要传的参数，此方法也会让函数立即执行
3. bind 方法中第一个参数是指定该函数 this 指向谁，后面可以跟很多个参数，跟 call 方法的参数形式一样，只是 bind 不会让函数立即执行，而是返回一个改变了 this 指向的函数，需要进行调用才会执行

---

点个赞再走呗！！