번역 | ES6 화살표 함수 사용 금지

저자: 문 (상하 이 강 웹 전단 개발 엔지니어) 본 고 는 오리지널 번역 으로 부당 한 부분 이 있 으 면 지적 해 주 십시오.전재 출처 를 밝 혀 주 십시오.
당신 이 매일 사용 하 는 프로 그래 밍 언어 가 끊임없이 진화 하 는 것 을 보 는 것 은 즐 거 운 일이 다.오류 에서 배우 고 더 좋 은 실현 방식 을 찾 아 새로운 문법 적 특성 을 창조 하 며 언어 는 이렇게 한 걸음 한 걸음 버 전 업 데 이 트 를 실현 했다.
이것 은 바로 최근 몇 년 동안 자 바스 크 립 트 에 발생 한 일 입 니 다. ECMAScript 6 는 화살표 함수, 클래스 및 기타 특성 을 도 입 했 습 니 다. 정말 좋 습 니 다!
그 중 하 나 는 매우 사용 하기 좋 은 화살표 함수 입 니 다. 많은 파일 들 이 이 예 쁜 문법 사탕 을 소개 하고 투명 한 문맥 의 역할 도 합 니 다. (원문 은 context transparency) ES6 에 대해 잘 모 르 면 화살표 함수 의 입문 글 을 먼저 읽 으 십시오.
모든 일 에는 양면성 이 있 고 새로운 특성 도 새로운 어려움 을 가 져 올 수 있다. 예 를 들 어 화살표 함수 에 대한 오용 이다.
이 글 은 실제 사용 장면 을 통 해 특정한 상황 에서 전통 적 인 함 수 를 사용 해 야 하 는 지, 아니면 더욱 간결 한 화살표 함 수 를 사용 해 야 하 는 지 알 수 있다.
1. 대상 에 대한 정의 방법
javascript 에서 방법 은 하나의 대상 의 속성 으로 할 수 있 습 니 다. 이 방법 을 호출 할 때 this 는 이 방법 이 속 한 대상 을 가리 키 고 있 습 니 다.
개체
화살표 함수 가 문법 사탕 일 뿐 이 니 화살표 함 수 를 대상 으로 하 는 방법 을 시도 해 보 자.

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

calculate. sum 은 화살표 함 수 를 사용 하여 정의 하지만 calculate. sum () 을 호출 할 때 이상 이 발생 했 습 니 다.sum 을 실행 할 때 컨 텍스트 가 window 이기 때 문 입 니 다. 화살표 함수 가 window 를 컨 텍스트 로 연결 되 어 있 기 때 문 입 니 다.
this. array 를 실행 하 는 것 은 window. array 와 같 습 니 다. 당연히 undefined 입 니 다.
해결 방법 은 대상 의 방법 에 화살표 함수 구문 법 을 사용 하지 않 는 것 입 니 다. 그러면 this 키 워드 는 호출 할 때 결정 합 니 다. 닫 힌 문맥 에 일찍 연결 되 어 있 는 것 이 아니 라 구체 적 인 코드 를 보 여 줍 니 다.

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

대상 원형
같은 규칙 도 대상 prototype 원형 에 정의 하 는 방법 에 적 용 됩 니 다.

function MyCat(name) {  
  this.catName = name;
}
MyCat.prototype.sayCatName = () => {  
  console.log(this === window); // => true
  returnthis.catName;
};
var cat = new MyCat('Mew');  
cat.sayCatName(); // => undefined  

전통 적 인 방식 을 사용 하면 정상적으로 일 할 수 있다.

function MyCat(name) {  
  this.catName = name;
}
MyCat.prototype.sayCatName = function() {  
  console.log(this === cat); // => true
  returnthis.catName;
};
var cat = new MyCat('Mew');  
cat.sayCatName(); // => 'Mew' 

2. 동적 상하 문 에서 의 반전 함수
this 는 js 에서 매우 강력 한 특징 입 니 다. 그 는 함수 가 호출 방식 에 따라 문맥 을 동적 으로 바 꿀 수 있 도록 한 다음 에 화살표 함수 가 직접 성명 할 때 this 대상 을 연결 하기 때문에 더 이상 동적 이지 않 습 니 다.
클 라 이언 트 에서 dom 요소 에 이벤트 감청 함 수 를 연결 하 는 것 은 매우 보편적 인 행위 입 니 다. dom 이벤트 가 실 행 될 때 반전 함수 중의 this 는 이 dom 을 가리 키 며 화살표 함 수 를 사용 할 때:

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

이 반전 의 화살표 함 수 는 전체 컨 텍스트 에서 정의 되 었 기 때문에 그의 this 는 window 입 니 다.따라서 this 가 대상 에 의 해 결정 되 었 을 때 함수 표현 식 을 사용 해 야 합 니 다.

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

3. 구조 함수 호출
함수 가 구조 함수 로 실 행 될 때 new MyFunction (), this 는 새로 만 든 대상 인 스 턴 스 를 가 리 킵 니 다.

this instanceOf MyFunction === true

주의해 야 할 것 은 구조 함 수 는 화살표 함 수 를 사용 할 수 없 으 며, 이렇게 하면 이상 을 던 질 수 있다 는 것 이다.
화살표 함 수 를 사용 하면 this 는 닫 힌 현재 컨 텍스트 를 지정 하기 때문에 함수 가 구조 기 일 때 this 는 생 성 된 인 스 턴 스 를 가리 키 기 때문에 잘못된 의 미 를 가 집 니 다.

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

우 리 는 모두 함수 표현 식 을 사용 하면 정상 이라는 것 을 안다.

var Message = function(text) {  
  this.text = text;
};
var helloMessage = new Message('Hello World!');  
console.log(helloMessage.text); // => 'Hello World!'  

4. 초 단 문법
화살표 함 수 는 문 구 를 매우 간결 하 게 쓸 수 있 습 니 다. 매개 변 수 는 하나 일 때 생략 할 수 있 습 니 다 (). 함수 체 는 한 마디 만 생략 할 수 있 습 니 다 {}. 반환 값 이 표현 식 이 라면 return 도 생략 할 수 있 습 니 다!
나의 대학 선생님 은 우리 에 게 재 미 있 는 숙제 를 내 주 셨 다. C 언어 로 문자열 의 길 이 를 계산 하 는 함 수 를 만 들 었 다. 함 수 는 가능 한 한 짧 아야 한다. 이것 은 새로운 언어 를 배 우 는 좋 은 방법 이다.
그러나 실제 생활 에서 코드 는 다른 개발 자 에 게 읽 혀 야 합 니 다. 짧 은 문법 은 동료 들 을 이해 하기 어 려 울 때 가 있 습 니 다.상위 코드:

let 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;
}
 
letdouble = multiply(2);
 
double(3); // => 6
multiply(2, 3)；// => 6

어 때? 많이 이해 하지?
간결 하고 이해 하기 쉬 운 균형 을 맞 추 는 것 도 화살표 함 수 를 사용 할 때 주의해 야 할 부분 이다.
5. 총화
화살표 함 수 는 매우 좋 은 특성 임 에 틀림없다.이전에 우 리 는 bid () 함 수 를 사 용 했 거나 상하 문 을 고정 시 켜 야 했 던 곳 에서 현재 화살표 함 수 를 사용 하면 코드 를 더욱 간결 하 게 할 수 있다.
그러나 화살표 함 수 를 사용 하 는 것 도 불편 한 경우 도 있다.동적 컨 텍스트 가 필요 한 곳 에 서 는 화살표 함 수 를 사용 할 수 없고 구조 함수 로 대상 을 만 들 때 화살표 함 수 를 사용 할 수 없습니다.글 에서 사용 하기에 적합 하지 않 은 것 을 제외 하고 화살표 함 수 를 마음껏 사용 하 세 요.
원본 주소:https://rainsoft.io/when-not-...
iKcamp 오리지널 신간 '모 바 일 웹 전단 고 효율 개발 실전' 은 이미 아마 존, 경 동, 전당 에서 판매 되 고 있다.