js this 指向该如何理解？

Question

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' }，此后不会再改变

Answer 1

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 思否

Answer 2

简单的说，一般情况下，调用方法时，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，所以你后面的操作都是没有用的

Answer 3

可以先看一下这个视频 , 自己录的视频, 文档忘记放在哪了:
https://www.bilibili.com/vide...

Answer 4

一句话概括就是：

谁调用的就是指向谁，除非通过 call, apply, bind 去修改 this 指向。