ES6 화살표 함수 사용 주의 점

새로운 사물 도 양면성 이 있다. 화살표 함 수 는 그의 편리 함 과 장점 이 있다. 그러나 그 도 단점 이 있다. 그의 장점 은 코드 가 간결 하 다 는 것 이다. this 미리 정 의 를 내 렸 지만 그의 단점 도 이런 것 이다. 예 를 들 어 코드 가 너무 간결 해서 읽 기 가 쉽 지 않다. this 앞에서 정 의 를 내 려 서 사용 할 수 없 게 되 었 다 JS.안에서 매우 정상 적 인 조작 으로 보인다.
본질 적 으로 화살표 함 수 는 자신의 ES5 가 없고 그의 this 는 파생 된 것 으로 '어법 작용 역' 에 따라 파생 된 것 이다.
화살표 함수 가 호출 할 때 자신의 역할 영역 에서 this 와 this 값 을 생 성하 지 않 기 때문에 외부 에 함 수 를 포함 하 는 arguments 값 을 가지 고 있 고 호출 할 때 정 해 졌 습 니 다. 동적 으로 바 꿀 수 없습니다. 다음 에 저 는 어떤 상황 에서 화살표 함 수 를 사용 하지 말 아야 하 는 지 정리 하 겠 습 니 다.
대상 에 함 수 를 정의 하 다

const test = {
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};
test.sum();
// TypeError: Cannot read property 'reduce' of undefined

이 유 는 화살표 함수 가 자신의 this 값 이 없고 화살표 함수 내의 this 값 이 외곽 작용 역 에서 계승 되 기 때문이다.
대상 방법 내의 this 은 이 방법 을 호출 하 는 대상 을 가리 키 며, 화살표 함 수 를 사용 하면 this 과 대상 방법 이 호출 할 때 처 한 환경의 this 값 이 일치 합 니 다.this 는 전역 환경 에서 호출 되 기 때문에 이때 test.sum() 는 전 체 를 가리 키 기 때문이다.
해결 방법 도 간단 합 니 다. 함수 표현 식 이나 방법 약자 (ES6 에서 지원) 를 사용 하여 방법 을 정의 하면 this 가 실 행 될 때 포 함 된 문맥 에 의 해 결정 되 는 지 확인 할 수 있 습 니 다.

const test = {
    array: [1, 2, 3],
    sum() {
        console.log(this === test); // => true
        return this.array.reduce((result, item) => result + item);
    }
};
test.sum();
// 6

원형 방법 정의
대상 원형 에서 함 수 를 정의 하 는 것 도 같은 규칙 을 따 르 고 있다.

function Person(name) {
    this.name = name;
}

Person.prototype.sayName = () => {
    console.log(this === window); // => true
    return this.name;
};

const cat = new Person('Mew');
cat.sayName(); // => undefined

전통 적 인 함수 표현 식 을 사용 하면 문 제 를 해결 할 수 있다.

function Person(name) {
    this.name = name;
}

Person.prototype.sayName = function() {
    console.log(this === Person); // => true
    return this.name;
};

const cat = new Person('Mew');
cat.sayName(); // => Mew

정의 이벤트 리 셋 함수this 는 this 에서 매우 강 한 특징 이다. 그 는 함수 가 호출 방식 에 따라 문맥 을 동태 적 으로 바 꿀 수 있 도록 한 다음 에 화살표 함수 가 성명 할 때 JS 대상 을 직접 연결 하기 때문에 더 이상 동태 적 이지 않다.
클 라 이언 트 에서 this 요소 에 사건 감청 함 수 를 연결 하 는 것 은 매우 보편적 인 행위 입 니 다. DOM 사건 이 발생 했 을 때 리 셋 함수 중의 DOM 는 이 this 를 가리 키 지만 화살표 함수 가 성명 할 때 실행 문맥 을 연결 하고 문맥 을 동적 으로 바 꾸 는 것 은 불가능 합 니 다. 동적 문맥 이 필요 할 때 그 단점 이 나타 납 니 다.

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});

이 반전 의 화살표 함 수 는 전체 문맥 에서 정의 되 었 기 때문에 그의 DOM 는 this 이다.다시 말 하면 화살표 함수 가 미리 정 의 된 상하 문 은 수정 할 수 없 기 때문에 window 는 this.innerHTML 와 같 고 후 자 는 아무런 의미 가 없다.
함수 표현 식 을 사용 하면 실행 중 동적 으로 변경 할 수 있 습 니 다 window.innerHTML.

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log(this === button); // => true
    this.innerHTML = 'Clicked button';
});

정의 구조 함수
화살표 함 수 를 사용 하면 오류 가 발생 합 니 다.
분명히 화살표 함 수 는 구조 함수 로 사용 할 수 없다.

const Message = (text) => {
    this.text = text;
};
const helloMessage = new Message('Hello World!');
// Throws "TypeError: Message is not a constructor"

이론 적 으로 도 이렇게 할 수 없습니다. 화살표 함수 가 생 성 될 때 this 대상 이 연결 되 고 대상 의 인 스 턴 스 를 가리 키 지 않 기 때 문 입 니 다.
너무 짧 은 함수
화살표 함 수 는 문 구 를 매우 간결 하 게 쓸 수 있 지만 진실 한 프로젝트 는 보통 여러 개발 자가 공동으로 완성 합 니 다. 화살표 함 수 는 가끔 사람들 로 하여 금 잘 이해 하지 못 하 게 합 니 다.

const multiply = (a, b) => b === undefined ? b => a * b : a * b;
const double = multiply(2);
double(3); // => 6
multiply(2, 3); // => 6

코드 가 짧 아 보이 지만 대부분의 사람들 은 첫눈 에 무엇 을 했 는 지 바로 알 수 없 을 것 이다.
이 함수 의 역할 은 하나의 매개 변수 a 만 있 을 때 하나의 매개 변수 b 를 받 아들 여 a * b 의 함 수 를 되 돌려 주 고 두 개의 매개 변 수 를 받 을 때 곱 하기 로 되 돌려 주 는 것 입 니 다.
이 함수 가 더 잘 이해 되도록 하기 위해 서 우 리 는 이 화살표 함수 에 괄호 를 한 쌍 더 하고 return 문 구 를 추가 하거나 함수 표현 식 을 직접 사용 할 수 있 습 니 다.

function multiply(a, b) {
    if (b === undefined) {
        return function(b) {
            return a * b;
        }
    }
    return a * b;
}

const double = multiply(2);
double(3); // => 6
multiply(2, 3); // => 6

화살표 함수 가 많은 편 의 를 가 져 왔 음 에 틀림없다.적절 한 화살표 함 수 를 사용 하면 초기 this 함수 나 문맥 을 고정 시 켜 야 하 는 곳 을 피하 고 코드 를 더욱 간결 하 게 할 수 있 습 니 다.
화살표 함수 도 불편 한 점 이 있 습 니 다.우 리 는 동적 컨 텍스트 가 필요 한 곳 에서 화살표 함 수 를 사용 할 수 없습니다. 대상 방법 을 정의 하고 원형 방법 을 정의 하 며 구조 함 수 를 정의 하고 이벤트 리 셋 함 수 를 정의 합 니 다.다른 상황 에서 화살표 함 수 를 마음껏 사용 하 세 요.