2분만에 JS 인터뷰/이거 🤯

의문:
JavaScript에서 Explainthis 키워드.

빠른 답변: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
}

화살표 함수에도 고유한 트릭이 있으며 항상 둘러싸기를 참조합니다this. 다음 섹션에서 자세히 알아보겠습니다.

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

클래스 컨텍스트의 경우 this는 객체 자체를 나타냅니다.

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

이것들이 가장 인기있는 케이스처럼 느껴지지만 훨씬 더 많은 코너 케이스가 있습니다. mdn 을 살펴보십시오.

실제 응용 프로그램:
this의 가장 일반적인 주의 사항 중 하나는 React와 Angular에서도 널리 사용되는 콜백을 사용할 때입니다.

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

다른 게시물:

Btw, 나는 여기에 더 재미있는 것들을 게시할 것입니다. 친구하자 👋