春风得意马蹄疾
一日看尽长安花

如何正确判断this?箭头函数的this是什么?

this 是很多人会混淆的概念,但是其实它一点也不难,知识网上很多文章把简单的东西说复杂了。

我们先来看几个函数调用的场景

function foo() {
  console.log(this.a)
}
var a = 1
foo()

const obj = {
  a: 2,
  foo: foo
}
obj.foo()

const c = new foo()

接下来我们一个个分析上面的场景

  • 对于直接调用 foo 来说,不管 foo 函数被放在了什么地方,this一定是window
  • 对于 obj.foo() 来说,我们只需要记住,谁调用了函数,谁就是this,所以在这个场景下foo函数的this就是obj对象
  • 对于new的方式来说,this被永远的绑定在了c上面,不会被任何方式改变this

说完了以上几种情况,其实很多代码中的this应该就没有什么问题了,下面让我们来看看箭头函数中的this

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

首先箭头函数其实是没有this的,箭头函数中的this只取决于包裹箭头函数的第一个普通函数的this,在这个例子中,因为包裹箭头函数的第一个普通函数是a,所以此时的thiswindow.另外对箭头函数使用bind这类函数是无效的。

最后这种情况也就是bind这些改变上下文的API了,对于这些函数来说,this取决于第一个参数,如果第一个参数为空,那么就是window.

说到bind,不知道大家是否考虑过,如果对一个函数进行多次bind,那么最终this会指向谁呢?

let a = {}
let fn = function () { console.log(this) }
fn.bind().bind(a)() // => ?

如果你认为输出结果是a,那么你就错了,其实我们可以把上述代码转换成另一种形式

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
  return function() {
    return fn.apply()
  }.apply(a)
}
fn2()

可以从上述代码中发现,不管我们给函数bind几次,fn中的this永远由第一次bind决定,所以结果永远是window.

let a = { name: 'yck' }
function foo() {
  console.log(this.name)
}
foo.bind(a)() // => 'yck'

以上就是this的规则了,但是可能会发生多个规则同时出现的情况,这时候不同的规则之间会根据优先级最高的来决定this最终指向哪里

首先,new的方式优先级最高,接下来是bind这些函数,然后是obj.foo()这种调用方式,最后是foo这种调用方式,同时,箭头函数的this一旦被绑定,就不会被任何方式改变。

觉得有点绕?那么请看以下的这张流程图吧,图中的流程只针对单个规则

Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » 如何正确判断this?箭头函数的this是什么?
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x