JS this 指向问题

Question

每个函数在调用时，都会去获取 2 个值： arguments 和 this

匿名函数在获取这 2 个值时，只会搜索自己执行环境中的，永远不会直接访问外部函数或执行环境中的这 2 个变量

结论

this 最终指向的是那个调用它的对象

var a = 'hello'

function foo () {
  console.log(this.a)
}

foo() // hello (可以看做 window.foo())

function foo () {
  console.log(this.a)  //谁调用了我，我就指向谁
}

var obj = {
  a: 'hello',
  foo: foo,
}
obj.foo() // hello

function foo () {
  console.log(this.a)  //谁调用了我，我就指向谁
}

var obj2 = {
  a: 'hello',
  foo: foo,
}
var obj1 = {
  a: 'world',
  obj2: obj2,
}
obj1.obj2.foo() // hello

function foo () {
  console.log(this.a)
}

var obj = {
  a: 'hello',
  foo: foo,
}
var bar = obj.foo // 函数引用传递
var a = 'Global'
bar() // "Global"

显示绑定

通过 bind()，apply()，call() 函数可以显示的绑定 this 作用域，它接收的第一个参数即是上下文对象并将其赋给 this

默认绑定全局变量 window

// 接上
var a = 'hello window'
foo.call(null) // hello window

new 新对象绑定（指向 new 出来的对象实例)

function foo(a) {
  this.a = a
}
var bar = new foo('hello')
console.log(bar.a) // hello

this 在匿名函数中

匿名函数（非箭头函数) 的执行环境具有全局性，this 通常指向 window

var flag = 'window'
var object = {
  flag: 'local',
  sayFlag: function () {
    //返回一个匿名函数
    return function () {
      console.log(this.flag)
    }
  },
}
object.sayFlag()() // window （非严格模式下）

this 在 es6 Class 中的指向

class Printer {
  printName (name = 'there') {
    this.print(`Hello ${name}`)
  }

  print (text) {
    console.log(text)
  }
}

const printer = new Printer()

const { printName } = printer
printName() // 报错

printer.printName() // Hello there