前端改变this指向的方法有哪些？如何判断this指向？

淡淡的烟草味﹌ 2021-07-25 18:26 485阅读 0赞

## bind、call、apply、箭头函数、new。这些都可以改变this指向，他们之间的区别是 ##

## 1、call 和 apply 的this指向 ##

call 和 apply其实是一样的，区别在于传参的时候参数是一个一个传或者是以一个数组的方式来传。  
call 和 apply 都是在调用时生效，改变调用者的this指向。

let name = 'lou'
    const obj = { name:'gao'}
    function sayHi(){ console.log('Hi'+this.name)}
    sayHi() //Hi lou
    sayHi.call(obj) // Hi gao
    //如果传参数的时候
    //call 是将参数跟在后面一个一个传
    sayHi.call(obj,data1,data2)
    //apply 传参是以数组的方式
    sayHi.apply(obj,[data1,data2])

## 2、bind 的this指向 ##

bind 也是改变this指向的不过不是在调用的时候生效，而是返回一个新的函数。

const newFunc = sayHi.bind(obj)
    newFunc() // Hi gao

## 3、箭头函数的this指向 ##

箭头函数的this指向是，在声明当前函数时，外围this指向是谁，那么箭头函数的this指向就是谁。

## 4、new 的this指向 ##

new 的this指向是当前当前创建的对象，也就是其本身。

## 5、如何快速区分当前this的指向 ##

1、在调用函数使用new关键字，函数的this是一个全新的对象。  
2、如果apply、call或bind方法用于调用、创建一个函数，函数内的this就是作为参数传入这些方法的对象。  
3、当函数作为对象里的方法被调用时，函数的this是调用该函数的对象。比如obj.method()，被调用时函数的this指向obj对象。  
4、如果调用函数不符合上述规则，那么this的值指向全局对象（global object），浏览器环境下this指向window对象，但是在严格模式下（‘use strict’),this的值为undefined。  
5、如果符合上述多个规则，则较高的规则（1号最高，4号最低）将决定this的值。  
6、如果该函数是ES2015中的箭头函数，将忽略上面所有规则、this被设置为它被创建时的上下文。