화살표 함수를 사용하여 클래스 메서드를 정의하는 것을 피해야 하는 이유

이 기사에서는 JavaScript 클래스 메소드와 메소드 정의에서 화살표 함수를 사용하면 안 되는 이유에 대해 알아봅니다.

클래스는 ES6의 일부로 JavaScript에 도입되었습니다. 그 전에는 클래스를 생성하기 위해 this 표기법을 사용하여 메서드 및 속성에 논리가 있는 JavaScript 개체를 설명하는 함수를 사용했습니다.

몇 가지 메서드를 사용하여 간단한 클래스를 만들어 보겠습니다.

class Pet {
  name = 'dog';

  getName() {
    return this.name;
  }
}

이 클래스name에는 하나의 속성getName과 하나의 메서드Pet만 있습니다. 메서드 정의가 기본 함수 선언으로 설정되었습니다.

이런 방식으로 클래스를 만들 수 있지만 이전 ES5에서는 불가능했습니다. ES5에서 어떻게 동일한 클래스를 생성할 수 있는지 봅시다:

"use strict";
var Pet = (function () {
    function Pet() {
        this.name = 'dog';
    }
    Pet.prototype.getName = function () {
        return this.name;
    };
    return Pet;
}());

다음은 ES5에서 클래스가 어떻게 보이는지입니다. name가 dog와 같은 속성을 가진 함수를 생성했습니다. 생성할 객체를 나타내기 위해 this 표기법을 사용했습니다. 메서드를 생성하려는 경우 개체에 속성으로 넣을 수 있지만 함수의 프로토타입에 메서드를 추가하는 것이 훨씬 더 좋을 것입니다. 실제로 그렇게 했습니다. 이를 통해 개체 내에서 바로 이와 같은 getName 함수를 사용할 수 있으며 Inheritance 및 Prototype 체인이 여기서 도움이 됩니다.

const pet = new Pet();
const pet2 = new Pet();

console.log(Pet.prototype.getName === pet.getName); // true

console.log(pet.getName === pet2.getName); // true

보시다시피 getName 클래스의 인스턴스에서 바로 Pet 메서드에 액세스할 수 있습니다. 한 가지 더 중요한 것은 메서드가 한 번만 생성된다는 것입니다. Pet 클래스의 인스턴스를 1000개 생성하더라도 이 함수는 모든 인스턴스에서 재사용됩니다.

클래스 구문은 간단하며 모든 메소드를 프로토타입에 자동으로 넣습니다. 우리는 이전처럼 생각할 필요가 없습니다. 그러나 ES6의 클래스와 함께 우리는 클래스를 정의하고 작업하는 새로운 방법인 화살표 함수를 얻었습니다.

const getDate = () => new Date()

화살표 함수의 구문은 더 깨끗하고 짧습니다. 그들은 또한 실행 수준에서 다른 동작을 합니다. 기본 함수의 실행 범위 대신 정의 범위에서 컨텍스트를 바인딩하여 개발자가 함수를 인수로 다른 메서드나 함수에 전달하여 컨텍스트를 잃을 수 있는 일반적인 실수를 방지합니다. .

화살표 함수의 인기가 높아지면서 모든 곳에서, 심지어 클래스 메서드로도 사용되기 시작했습니다. 클래스에 새 메서드를 추가해 보겠습니다.

class Pet {
  name = 'dog';

  getName() {
    return this.name;
  }

  getNameArrow = () => this.name;
}

getNameArrow 화살표 함수를 정의했습니다. 그것은 완전히 똑같은 일을 하고 그나저나 훨씬 더 좋고 깨끗해 보입니다. 그러나 여기서 무엇이 잘못되었을 수 있습니까?

먼저 = 기호를 사용하여 메서드를 정의한다는 사실을 알아차렸을 것입니다. 이는 실제로 속성을 정의했음을 의미합니다. VScode조차도 우리를 위해 그것을 강조했습니다.


ES5 대 ES6 구문에서 기억하듯이 모든 속성은 프로토타입 대신 클래스 인스턴스에 바로 추가됩니다. 그것을 증명하려고 노력합시다. Babel 또는 TypeScript 컴파일러, 심지어 온라인 버전을 통해 클래스 코드를 전달하고 결과를 볼 수 있습니다.

"use strict";
var Pet = /** @class */ (function () {
    function Pet() {
        this.name = 'dog';
        this.getNameArrow = function () { return this.name; };
    }
    Pet.prototype.getName = function () {
        return this.name;
    };
    return Pet;
}());

여기서 우리는 다른 방법으로 정의된 방법을 알 수 있습니다. getName 메서드는 여전히 프로토타입에 있지만 getNameArrow는 개체 내부의 속성으로 정의되어 있으며 모든 단일 인스턴스에 대해 생성됩니다. 실제 사례에서 확인해 보겠습니다.

const pet = new Pet();
const pet2 = new Pet();

console.log(pet.getNameArrow === pet2.getNameArrow); // false

새 인스턴스를 생성할 때마다 새 함수getNameArrow도 생성합니다. 화살표 함수로 생성된 내부에 20개의 메서드가 있는 Pet의 1000개 인스턴스가 필요한 경우를 상상해 보십시오. 20000개의 쓸모없는 함수가 생성된다는 의미입니다. 그리고 이것은 화살표 기능을 사용할 때입니다.

이것이 실제로 우리가 클래스에서 화살표 함수를 사용하지 않아야 하는 근본 원인입니다. 또는 적어도 언제 사용할 수 있는지 생각하고 이해해야 합니다. 다른 사례를 알고 있거나 이에 동의하지 않는 경우 의견을 댓글로 남겨주세요.