js this 指向该如何理解?

function fun() {
  return () => {
    return () => {
      return () => {
        console.log(this.name)
      }
    }
  }
}
var f = fun.call({ name: 'foo' })
var t1 = f.call({ name: 'bar' })()()
var t2 = f().call({ name: 'baz' })()
var t3 = f()().call({ name: 'qux' })

是否可以理解为在执行
var f = fun.call({ name: 'foo' })
的时候,就已经是绑定了 { name: 'foo' },此后不会再改变

阅读 1.9k
4 个回答

fun() 内部的调用都是箭头函数,箭头函数没有自己的 this 上下文,所用的都是 fun 的 this 上下文。fun 的 this 由其调用决定:

fun.call(fun.call({ name: 'foo' }) 给了 fun 一个 this{ name: "foo" },而且它并不是调用完就丢了,是存到了 f 里。不过 f 是一个箭头函数,用的 fun 调用时确定的 this,即 { name: "foo" }

剩下的都是基于 f箭头函数调用,都是同一个 this,即 { name: "foo" }

参阅:JavaScript 的 this 指向问题深度解析 - 边城客栈 - SegmentFault 思否

简单的说,一般情况下,调用方法时,this 指向都是其方法左侧临近的对象。

var name = 100;
const foo = {
  name: 233,
  bar () {
    console.log(this.name);
  },
  foo: {
    name: 666,
    bar () {
      console.log(this.name);
    }
  }
}

foo.bar() // 233
foo.foo.bar()// 666

const bar = foo.foo.bar
bar();// 100 or undefined, this => globalThis, window

;(0, foo.foo.bar)() // 100 or undefined, this => globalThis, window
;(foo.foo.bar)() // 666

而 call/apply/bind 可以去调整 this 的指向,而对于你的第二个问题,你只需要知道箭头函数没有 this,所以你后面的操作都是没有用的

一句话概括就是:

谁调用的就是指向谁,除非通过 call, apply, bind 去修改 this 指向。
推荐问题
宣传栏