JavaScript의 this 키워드는 일반 함수와 화살표 함수에서 다르게 동작하기 때문에 혼란스러울 수 있습니다. 이 블로그 게시물에서는 이것이 두 가지 유형의 함수에서 어떻게 작동하는지 설명하고, 이러한 차이점이 존재하는 이유를 탐색하고, JavaScript에서 이를 이해하는 데 필요한 기본 지식을 제공합니다.

일반 함수

JavaScript의 일반 함수는 function 키워드를 사용하여 정의됩니다. 이러한 함수에서 this의 값은 함수가 호출되는 방식에 따라 달라집니다. 다음은 몇 가지 예입니다.

1. 글로벌 컨텍스트

• 비엄격 모드:

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

  regularFunction(); // Logs the global object (window in browsers)

• 설명: 비엄격 모드에서 함수가 전역 컨텍스트(객체의 메서드가 아님)에서 호출될 때 이는 전역 객체(브라우저의 창 또는 노드의 전역)를 나타냅니다. .js).

  • 엄격 모드:

  'use strict';

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

  regularFunction(); // Logs undefined

• 설명: 엄격 모드에서는 함수가 전역 컨텍스트에서 호출될 때 정의되지 않은 상태로 유지되어 전역 개체에 대한 실수로 수정되는 것을 방지하여 보다 안전한 환경을 제공합니다.

2. 메소드 호출

객체의 메소드로 함수를 호출할 경우 해당 객체를 참조합니다.

• 예:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• 설명: 이 경우 함수가 obj의 메소드로 호출되므로 obj를 가리킵니다.

  • 엄격 모드: 엄격 모드에서는 동작이 동일하게 유지됩니다.

3. 생성자 호출

함수를 생성자로 사용하는 경우(new 키워드로 호출) 새로 생성된 인스턴스를 참조합니다.

• 예:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• 설명: new로 호출할 때 Person 생성자 함수 내부의 this는 생성되는 새 인스턴스를 참조합니다. 각각의 새 인스턴스(person1 및 person2)는 고유한 name 속성과 sayHello 메서드를 갖습니다.

  • 엄격 모드: 엄격 모드에서는 동작이 동일하게 유지됩니다.

4. 명시적 바인딩

호출, 적용 또는 바인딩을 사용하여 이를 명시적으로 바인딩할 수 있습니다.

• 예:

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• 설명: 호출 및 적용은 이 설정을 obj로 설정하여 즉시 함수를 호출하는 반면, 바인딩은 이를 obj에 영구적으로 바인딩하여 새 함수를 생성합니다.

  • 엄격 모드: 엄격 모드에서는 동작이 동일하게 유지됩니다.

화살표 기능

ES6에 도입된 화살표 함수에는 자체 this 컨텍스트가 없습니다. 대신, 주변(어휘) 범위에서 이를 상속받습니다. 이는 특정 상황에서 화살표 기능을 유용하게 만듭니다.

1. 어휘적

화살표 함수는 정의된 범위에서 이를 상속합니다.

• 비엄격 모드:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• 설명: 화살표 함수에는 자체 this가 없습니다. 그들은 이것을 주변 범위에서 사용합니다. 여기서는 함수가 전역 범위에 정의되어 있으므로 전역 객체를 참조합니다.

  • 엄격 모드:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• 설명: 엄격 모드에서 주변 범위가 전역인 경우 주변 범위에서 상속된 대로 정의되지 않은 상태로 유지됩니다.

2. 메소드 호출

일반 함수와 달리 화살표 함수는 메서드로 호출될 때 자체 this를 얻지 않습니다. 이는 바깥쪽 범위에서 상속됩니다.

• 예:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• 설명: 화살표 함수는 자체 this를 바인딩하지 않지만 어휘 범위에서 상속합니다. 이 예에서 이는 obj가 아닌 전역 객체 또는 엄격 모드에서 정의되지 않은 객체를 나타냅니다.

  • 엄격 모드: obj가 아닌 정의되지 않은 로그입니다.

3. 다른 함수 안의 화살표 함수

화살표 함수가 다른 함수 내부에 정의되면 외부 함수에서 이를 상속받습니다.

• 예:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• 설명: 이 경우 화살표 함수 내부의 this는 externalFunction의 this와 동일한 obj를 참조합니다.

  • 엄격 모드: 엄격 모드에서는 동작이 동일하게 유지됩니다.

4. 이벤트 핸들러의 화살표 기능

이벤트 핸들러의 화살표 함수는 이벤트를 트리거하는 요소가 아닌 주변 어휘 범위에서 이를 상속합니다.

• 예:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• 설명: 화살표 기능은 이것을 버튼 요소에 바인딩하지 않습니다. 이는 전역 범위이거나 엄격 모드에서 정의되지 않은 주변 범위에서 이를 상속합니다.

  • 엄격 모드: 버튼 요소가 아닌 정의되지 않은 로그를 기록합니다.

왜 이러한 차이점이 있습니까?

일반 함수와 화살표 함수의 차이점은 이를 처리하는 방법에 있습니다.

• 일반 함수: 이 값은 동적이며 호출 사이트(함수가 호출되는 방식)에 따라 결정됩니다.
• 화살표 함수: 이 값은 어휘적이며 함수가 정의될 ​​때 포함된 실행 컨텍스트의 this 값을 기반으로 설정됩니다.

이해해야 할 주요 개념

JavaScript에서 이 동작을 이해하려면 다음 개념을 알아야 합니다.

1. 실행 컨텍스트: 코드가 실행되는 컨텍스트로, 이것이 결정되는 방식에 영향을 미칩니다.
2. 호출 사이트: 함수가 호출되는 코드 내 위치로, 일반 함수에서 이 값에 영향을 미칩니다.
3. 어휘 범위 지정: 이것이 주변 범위의 화살표 함수에서 상속되는 방법입니다.
4. 엄격 모드: 엄격 모드가 특정 상황에서 이것의 기본 동작을 어떻게 변경하는지.

요약

• 정규 기능: 이는 동적이며 호출 사이트에 의해 결정됩니다.
• 화살표 함수: 이것은 어휘적이며 함수가 정의될 ​​때 주변 범위에 의해 결정됩니다.

이러한 차이점을 이해하면 더 예측 가능하고 유지 관리하기 쉬운 JavaScript 코드를 작성하는 데 도움이 됩니다. 일반 함수를 사용하든 화살표 함수를 사용하든 효과적인 JavaScript 개발을 위해서는 이것이 어떻게 작동하는지 아는 것이 중요합니다.