JSインタビュー2分で🤯

質問
JavaScriptでthisキーワードを説明します.
即答thisキーワードは現在の実行コンテキストを参照します.
より長い答え:thisは、それが呼ばれたところによって異なります.
グローバルコンテキストでthisを使用する場合は、ブラウザのwindowオブジェクトとノード内のglobalオブジェクトを参照します.

// browser
console.log(window.a) // undefined
this.a = 1
console.log(window.a) // 1

// node
console.log(global.a) // undefined
this.a = 1
console.log(global.a) // 1

関数については、同様に動作しますが、strictモードではまだ少し異なります.

function f1() {
  return this // default to global context
}

function f2() {
  'use strict';
  return this // undefined
}

矢印関数は独自のトリックを持っています.次のセクションで詳しく説明します.

let f1 = function() {
  return this
}

let f2 = () => this

console.log(f1(), f2()) // Window, Window

let obj = { f1, f2 }
console.log(obj.f1(), obj.f2()) // obj reference, Window
// ^^^ f1 changed reference, but f2 didn't

クラスコンテキストについては

class Tmp {
  a = 10
  method() {
    console.log(this)
  }
}
let tmp = new Tmp()
tmp.method() // Tmp {a: 10}

これらは最も人気のあるケースですが、はるかに多くのコーナーケースがあります、mdnに見てください.
実生活アプリケーション
私は、thisと最も一般的な警告の1つは、コールバックを使用しているときには、反応し、角度でも人気があると思う.

class User {
  _say(text) {
    console.log(text)
  }

  sayHello() {
    this._say('Hello world')
  }

  sayHi = () => this._say('Hi!')
}

let user = new User()

user.sayHi() // Works
user.sayHello() // Works

setTimeout(user.sayHi, 1000) // Works

// callback will show an error, because `this` reference will change
// Uncaught TypeError: this._say is not a function at sayHello
setTimeout(user.sayHello, 1000)

だから注意して、安全に滞在!
リソース
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
その他

ところで、私はもっと楽しいものをここに投稿します.友達になりましょう👋