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

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被设置为它被创建时的上下文。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值