JavaScript：“this”关键字[上下文]速查表

JavaScript 上下文，也就是“this”关键字本身就是一个相当令人困惑的话题。尽管它非常简单且语义清晰，但我却很容易忘记上下文相关的规则。闲话少叙，现在就让我来介绍一下臭名昭著的“this”关键字的速查表吧！

Quick side note: This article is intended as a cheatsheet around JS context, It does not serve as a verbose explanation of the concept. If you are beginner and have not explored the 'context' concept yet, I highly recommend you to read this MDN 文档 first


备忘单：

fn()
 // 这个 -> 窗口

obj.fn()
// 这 -> 对象

// --- .调用 .应用 --- //
obj.fn.call(otherObj)
// 这 -> 其他对象


// --- .绑定 --- //
constboundFn = obj.fn.bind(otherObj)
boundFn()
// 这 -> 其他对象

“使用严格”
fn()
// 这 -> 未定义

window.globalFn = fn
窗口.globalFn()
// 这 -> 未定义

obj.fn.call(窗口)
// 这 -> 未定义

// ----- 直接调用 ---- //
// 实例化上下文：窗口
const fn = () => console.log(this)
fn()
// 这个 -> 窗口

// ----- 从 obj [类实例] 调用 ---- //
函数myClass（）{
 this.fn = () => console.log(this)
}
-  或者  - 
类 myClass {
 构造函数（）{
  this.fn = () => console.log(this)
 }
}
// 实例化上下文：obj1
const obj1 = new myClass()
obj1.fn()
// 这 -> obj1


// ----- 从 obj 调用 ---- //
// 实例化上下文：窗口
const obj2 = { fn: () => console.log(this) }
obj2.fn()
// 这个 -> 窗口

obj.fn.call(otherObj)
// 这个 -> 窗口

实例.fn.调用（otherObj）
// 这 -> 实例

“使用严格”
fn()
// 这 -> 未定义

一些简单的例子🤥：

const fn = function(){
  console.log（这个）
 }
 
 const obj = {
  fn1：fn，
  fn2：函数（）{
   fn()
  }，
  fn3：函数（）{
   this.fn1()
  }，
  fn4：fn.bind（obj），
  fn5：函数（）{
   this.fn1.call（obj）
  }
 }
 
 obj.fn1()
 // 日志：obj
 // 因为“fn1”是通过 obj 对象调用的

 obj.fn2()
 // 日志：窗口
 // 因为“fn2”是通过 obj 调用的，但是
 // 内部的“fn”被直接调用

 obj.fn3()
 // 日志：obj
 // fn3 是通过 obj 调用的，“this”指向
 // 'obj'。由于 'this' -> obj，内部执行
 // [this.fn()] 一样好
 // 作为 obj.fn1()

 obj.fn4()
 // 日志：obj
 // 显式上下文绑定；）

 obj.fn5()
 // 日志：obj
 // 希望你能掌握它 :P

一些更简单的例子🤥🤥🤥：

函数 fnConstructor(){
  const fn = () => console.log(this)
  this.fn1 = () => console.log(this),
  this.fn2 = 函数（）{
   console.log（这个）
  }
  这个.fn3 = fn，
  this.fn4 = 函数（）{
   fn()
  }
  this.innerObj = { fn }
 }

 const obj = new fnConstructor()
 const obj2 = {
  obFn1：obj.fn1，
  obFn2: () => console.log(this)
 }

 obj.fn1()
 // 日志：obj（实例化上下文！）
 
 obj.fn2()
 // 日志：obj（Duhh^^）

 obj.fn3()
 // 日志：窗口；）
 
 obj.fn4()
 // 日志：obj（实例化上下文！）

 obj.innerObj.fn()
 // 日志：obj（实例化上下文！！）

 obj2.obFn1()
 // 日志：obj（实例化上下文！）

 obj2.obFn2()
 // 日志：窗口；）

希望这对您有帮助😇
如果您有任何问题/困惑/建议/更正，请在下面的评论部分发表。

罗汉·萨伦克：LinkedIn Twitter