关于this指向的总结

分析下面的代码指向,注意都是在非严格模式下面的指向

function foo(){
  console.log(this)
}
foo()
foo.call(1)
  • 如果是在浏览器环境下调用,指向全局对象window,
  • 如果在node环境下调用,指向 globalThis
  • 上面call,bind,apply这种方式,指向的是1
const obj1 = {
  foo: function(){
    console.log(this)
  }
}
obj1.foo() // => obj1
const fn = obj1.foo
fn() // => window
const obj2 = {
  foo: function(){
    function bar() {
      console.log(this)
    }
    bar()
  }
}
obj2.foo() // => window

关于this 的总结

  • 沿着作用域向上找最近的一个function(不是箭头函数),看这个function 最终是怎么执行的
  • this的指向取决于所属function的调用方式,而不是定义方式
  • function 调用一般分为几种情况:
    1. 作为函数调用,即为 foo()
      • 这种情况指向全局对象,注意严格模式问题,严格模式下是undefined
    2. 作为方法调用,即为foo.bar() /foo.bar.baz()/ foo['bar']/ foo[0]()
      • 这种情况指向调用这个方法的对象
    3. 作为构造函数调用,即:new Foo()
      • 这种情况最终指向一个新对象Foo {}
    4. 特殊调用, 即: foo.call()/ foo.apply()/ foo.bind()
      • 指向参数指定的成员
  • 如果找不到所属function,就是全局对象
    例如 在函数最外层直接 cosole.log(this)

Node.js环境

  • 由于文件代码中最顶层作用域实际上是一个伪全局环境,所以最顶层的this并不指向全局对象

严格模式下原本指向全局的 this 都会指向undefined

你可能感兴趣的:(关于this指向的总结)