JavaScript의 `this` 설명

프런트엔드 인터뷰 질문 시리즈의 질문 #5입니다. 준비 수준을 높이고 전반적인 최신 정보를 얻으려면 프런트엔드 캠프에 등록하는 것을 고려해 보세요.

---

this 키워드는 항상 함수나 스크립트의 현재 컨텍스트를 나타냅니다.

이것은 우리 대부분에게 혼란스러운 주제이지만(말장난 의도), 반드시 그럴 필요는 없습니다. 몇 가지 규칙을 기억하기만 하면 됩니다.

다음 규칙에 따라 우선순위에 따라 런타임 중에 이 값이 어떻게 결정되는지 지정합니다.

함수 생성자에서의 사용법

new 키워드로 함수를 호출하면 함수 내부의 this는 새로 생성된 객체 인스턴스를 참조합니다.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

명시적으로 바인딩

call(), apply() 또는 바인딩()을 사용하여 함수 내에서 this의 값을 명시적으로 설정할 수 있습니다.

• call()과 apply()는 함수를 즉시 호출해야 할 때 사용됩니다.
• 바인딩()은 나중에 사용할 새 함수를 반환합니다.

const obj = { name: 'Ben' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

메서드 호출에서의 사용법

함수가 객체의 메소드인 경우 이는 객체를 참조합니다.

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

일반 함수 호출에서의 사용법(자유 함수 호출)

전역 컨텍스트에서 함수가 호출되면 이는 전역 객체(비엄격 모드) 또는 정의되지 않음(엄격 모드)을 참조합니다.

브라우저의 경우 전역 개체는 창입니다.

// Browser

function showThis() {
  console.log(this);
}

showThis(); // Window { open: fn, alert: fn, ... }

전역 컨텍스트에서 함수가 선언되면 해당 함수는 창 개체의 속성이 됩니다. window.showThis()를 호출하면 동일한 결과가 나옵니다. 이것이 암시적 메서드 호출인 이유입니다. (위의 규칙을 참고하세요)

여러 규칙이 적용되는 경우 우선 순위가 높은 규칙이 적용됩니다.

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

위 예에서는 메소드 호출과 명시적 바인딩이라는 두 가지 규칙이 적용됩니다. 명시적 바인딩이 우선순위가 높으므로 이 값을 설정하게 됩니다.

화살표 기능

화살표 함수는 자체 this 값이 없으므로 위에서 설명한 규칙을 따르지 않습니다. 상위 범위에서 이 값을 선택합니다.

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

이것이 이벤트 리스너에 화살표 기능을 사용하지 말아야 하는 이유입니다. 이벤트 리스너는 HTML 요소를 this 값에 바인딩하지만 핸들러가 화살표 함수인 경우에는 불가능합니다.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

요약

1. 함수 생성자(new Person())에서 이는 새로 생성된 객체 인스턴스가 됩니다.
2. bind(), call() 또는 apply()를 사용하여 명시적으로 바인딩된 경우 함수 내부에서 제공된 값으로 설정됩니다.
3. 메서드 내부에서는 해당 메소드가 속성인 개체로 설정됩니다.
4. 자유 함수 호출 내에서 이는 전역 객체(비엄격 모드) 또는 정의되지 않음(엄격 모드)을 가리킵니다.
5. 여러 규칙이 적용되는 경우 먼저 명시된 규칙(1-4)이 적용됩니다.
6. 화살표 함수에는 자체 this가 없습니다. 해당 값은 상위 범위에서 선택됩니다.

---

방금 읽은 내용이 마음에 드시나요? 프런트엔드 캠프 대기자 명단에 등록해 보세요 ✌️

위 내용은 JavaScript의 `this` 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!