여기요! 👋
저는 데니스입니다.

JavaScript 인터뷰에서 가장 인기 있는 주제 중 하나는 this 키워드입니다. 이 개념은 기본이지만 this 키워드의 규칙을 잘 모르는 개발자가 많습니다.

사실 복잡한 것은 없습니다. 다른 인터뷰 대상자들 사이에서 눈에 띄는 데 도움이 되는 6가지 간단한 규칙을 공유하고 싶습니다.

규칙

1. 새로운 키워드

첫 번째이자 가장 중요한 규칙은 함수를 호출할 때 new 키워드가 사용되면 이 함수 내부this는 생성자 함수에 의해 생성되고 반환되는 새 객체를 참조한다는 것입니다. 이 규칙은 ES6 클래스를 사용할 때도 적용됩니다.

예시

function Person() {
  console.log(this)
  this.age = 23
  console.log(this)
}
const p = new Person()

/* Output */
// {}
// { age: 23 }

2. 신청/호출/바인드

우리 모두가 알고 있는 규칙은 this/apply/call 세 가지 방법 중 하나를 사용하여 특정 객체를 bind로 사용하도록 함수 호출을 강제할 수 있다는 것입니다.

function myFunction() {
  console.log(this)
}

const  thisObject = {
  someValue: 23
}

myFunction.call(thisObject)   // { someValue: 23 }
myFunction.apply(thisObject)  // { someValue: 23 }

const myBoundFunction = myFunction.bind(thisObject )
myBoundFunction()             // { someValue: 23 }

3. 메소드로서의 기능

면접용으로 꽤 유명합니다. 규칙은 간단합니다. 함수가 메서드로 호출될 때(즉, 함수가 선행 점에 의해 호출됨) this는 함수가 속성인 객체입니다( this는 해당 점 앞의 객체입니다).

const thisObject = {
  someValue: 23,
  itsMethod: function() {
    console.log(this)
  }
}

thisObject.itsMethod('John') // { someValue: 23, itsMethod: ƒ }

4. 가장 간단한 경우

이것은 가장 간단한 방법이지만 많은 사람들이 잊어버리거나 모릅니다. 규칙에 따르면 위의 조건 없이 함수가 호출되면 this는 브라우저에 대한 global 객체( window )입니다.

function f() {
  console.log(this)
}

f() // Window (global object)

5. 주문

여러 규칙을 동시에 적용할 수 있는 경우 목록에서 더 높은 규칙에 따라 this 값이 결정됩니다.

6. 화살표 기능

화살표 함수는 인터뷰에 가장 많이 사용됩니다. this 및 화살표 기능에 특별한 것이 있다는 것은 누구나 알고 있지만 소수는 실제로 규칙을 알 수 있습니다.

따라서 규칙은 화살표 함수가 모든 규칙을 무시하고 생성될 때 주변 범위의 this 값을 취한다는 것입니다.

간단합니다! 화살표 함수의 this 값은 생성된 라인을 찾고 거기에 this 값이 무엇인지 확인하여 결정할 수 있습니다.

자신을 테스트!

규칙을 이해했는지 테스트합시다 🙂.

const obj = {
  value: 'abc',
  createFn: function() {
    return function() {
      console.log(this)
    }
  },
}
const fn = obj.createFn()
fn()

이 경우 this로 인쇄되는 내용을 알려주실 수 있습니까? 그 이유를 명확하게 말할 수 있습니까?

테스트하려면 크롬 콘솔에서 이 코드를 실행하면 됩니다.

하지만 이 코드를 "수정"하는 방법에 대해 대답할 수 있습니까?

대답이 "예"이면 축하합니다! 🎉 자바스크립트 면접 합격에 한 발 더 다가섰습니다!

결론

this의 규칙은 정말 간단하지만, 그것을 알면 면접관에게 기본에 대한 이해를 확실히 보여줄 수 있습니다.

제 글을 읽어주셔서 감사합니다. DEV 및 Twitter에서 저를 구독하십시오.

평화!