ES6 객체 메소드를 정의할 때 화살표 함수를 피해야 하는 이유는 무엇입니까?

ES6 객체에서 화살표 함수 사용

ES6에서는 객체 메서드를 정의하는 두 가지 방법이 있습니다: 기존 함수 구문을 사용하는 것과 단축어를 사용하는 것입니다. 형태. 이 두 가지 방법 모두 유효합니다.

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

그러나 객체 방법에서 화살표 기능을 사용하면 이야기가 달라집니다. 좀 더 자세히 살펴보겠습니다.

화살표 함수와 객체 메소드

화살표 함수는 객체 메소드 정의에 적합하지 않습니다. 이는 객체 내의 this 값과 동일하지 않을 수 있는 주변 어휘 컨텍스트의 this 값을 상속하기 때문입니다.

예를 들어 다음 코드를 고려하세요.

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

이 예에서 getOwner 메소드 내의 this는 헬기 객체가 아닌 창 객체(또는 엄격 모드에서는 globalThis 객체)를 참조합니다. 결과적으로 this.owner 표현식은 정의되지 않은 값을 반환하고 오류를 발생시킵니다.

전통적인 함수 구문과 ES6 메서드 구문

객체 메서드를 정의하는 경우 다음과 같습니다. 전통적인 함수 구문이나 ES6 메서드 구문을 사용하는 것이 좋습니다. 둘 다 메서드 내에서 this 값을 명시적으로 정의합니다.

다음은 기존 함수 구문을 사용하는 예:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

여기 ES6 메서드 구문을 사용하는 예가 있습니다.

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

이러한 메서드는 this 키워드를 사용하여 현재 객체를 참조하여 this가 보장되도록 합니다. .owner 표현식은 올바른 값을 반환합니다. value.

결론

화살표 함수는 간단한 함수를 정의하기 위한 간결한 구문을 제공하지만 ES6에서 객체 메서드로 사용하기에는 적합하지 않습니다. 이를 위해서는 객체에 대한 메서드를 정의하는 더 명확하고 안정적인 방법을 제공하는 전통적인 함수 구문이나 ES6 메서드 구문을 고수하는 것이 좋습니다.

위 내용은 ES6 객체 메소드를 정의할 때 화살표 함수를 피해야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!