JS 화살표 함수에 적합하지 않은 장면

개요

최근 몇 년 동안 ES6는 js의 가용성을 새로운 수준으로 향상시켰을 때 화살표 함수, 클래스 등, 이것들은 모두 매우 좋았다.
화살표 함수는 가장 가치 있는 새로운 기능 중 하나로 상하문의 투명성과 간단한 문법을 묘사한 좋은 문장이 많다.
하지만 모든 일에는 양면이 있다.일반적으로 새로운 특성은 약간의 혼란을 가져오는데, 그 중 하나는 화살표 함수가 오도되었다는 것이다.본고는 일부 장면을 소개할 것이다. 이런 장면에서 화살표 함수를 돌려 좋은 구함수 표현식이나 비교적 새로운 간략한 문법을 사용해야 한다.또한 코드의 가독성에 영향을 미치기 때문에 코드를 단축하는 데 주의해야 한다.

객체의 방법 정의

js에서 방법은 대상 속성에 저장된 함수입니다.이 방법을 호출할 때,this는 이 방법이 속한 대상을 가리킨다.

Object literal

화살표 함수는 문법이 간단하기 때문에 그것을 사용하여 방법을 정의하는 것은 매우 매력적이다. 우리 한번 해 보자.

const 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 () 에서 TypeError 가 표시됩니다.array는 undefined입니다.
calculate 대상의 방법sum () 을 호출할 때, 상하문은 여전히 윈도우입니다.이러한 상황이 발생하는 이유는 화살표 함수가 어법 작용역에 따라 상하문을 윈도우 대상에 귀속시키기 때문이다.
이것을 실행합니다.array는 윈도우와 같습니다.array, undefined입니다.
해결 방법은 일반적인 함수 표현식을 사용하여 방법을 정의하는 것이다.this는 호출할 때 결정되는 것이지 폐쇄된 상하문에 의해 결정되는 것이 아닙니다. 복원된 버전을 보십시오.

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

sum은 일반 함수이기 때문에calculate를 호출하고 있습니다.sum () 시this는calculate 대상입니다.this.array는 수조 인용이기 때문에 원소의 합을 정확하게 계산합니다.

Object prototype

같은 규칙도 원형 대상에 정의하는 방법에 적용된다.화살표 함수를 사용하여sayCatName 방법을 정의합니다.this는 윈도우를 가리킵니다.

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

이전 방식을 사용하여 함수 표현식을 정의합니다.

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

sayCatName 일반 함수는 방법으로 호출할 때 상하문을cat 대상:cat으로 변경합니다.sayCatName().

동적 상하문의 리셋 함수

this는 JS에서 강력한 특성으로 호출 함수에 따라 상하문을 변경할 수 있습니다.일반적으로 상하문은 발생하는 목표 대상을 호출하여 코드를 더욱 자연스럽게 한다. 마치 이 대상에 무슨 일이 일어난 것처럼.
그러나 화살표 함수는 성명에 정적 귀속 상하문을 표시하고 동적화할 수 없지만 이런 방식은 나쁘기도 하고 좋기도 하며 때때로 동적 귀속이 필요하다.
클라이언트 프로그래밍에서 이벤트 탐지기를 DOM 요소에 추가하는 것은 흔히 볼 수 있는 작업이다.이벤트 트리거 처리 프로그램 함수,this를 목표 요소로 합니다. 화살표 함수를 사용하면 원활하지 않습니다.
다음 예제에서는 이러한 프로세서에 화살표 함수를 사용하려고 합니다.

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

전역 상하문에서this는 윈도우를 가리킨다.클릭 이벤트가 발생하면 브라우저는 단추 상하문을 사용하여 처리 함수를 호출하려고 시도하지만 화살표 함수는 미리 정의된 상하문을 변경하지 않습니다.this.innerhtml는 윈도우에 해당한다.innerHTML, 의미가 없습니다.
함수 표현식을 적용해야 합니다. 이 표현식은 대상 요소에 따라this를 변경할 수 있습니다.

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

사용자가 단추를 눌렀을 때, 처리 프로그램 함수의this는button을 가리킨다.그래서 이 문제는innerHTML ='Clicked button'단추 텍스트를 정확하게 수정하여 클릭한 상태를 반영합니다.

구조 함수 호출

this는 구조 호출에서 새로 만든 대상입니다.new MyFunction () 을 실행할 때, 구조 함수 MyFunction의 상하문은 새로운 대상입니다:this instanceof MyFunction ===true.
화살표 함수는 구조 함수로 사용할 수 없습니다.JavaScript는 예외 암시적 스냅을 통해 이러한 작업을 방지합니다.
어쨌든,this는 새로 만든 대상이 아니라 폐쇄된 상하문에서 설정된 것입니다.다시 말하면 화살표 함수 구조 함수 호출은 의미가 없고 모호하다.
이렇게 시도하면 어떤 일이 일어날지 봅시다.

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

new Message('Hello World!')를 실행합니다. 그 중에서 Message는 화살표 함수입니다. JavaScript에서 TypeError 오류가 발생했습니다. Message는 구조 함수로 사용할 수 없습니다.
위의 예는 함수 표현식을 사용하여 수정할 수 있습니다. 이것은 구조 함수를 만드는 정확한 방법입니다(함수 설명 포함).

const Message = function(text) {
  this.text = text;
};
const helloMessage = new Message('Hello World!');

약어 문법

화살표 함수는 매개 변수 괄호 (), 블록 괄호 {} 를 생략할 수 있는 좋은 속성을 가지고 있으며, 함수 주체가 문장 하나만 있으면 되돌아옵니다.이것은 매우 짧은 함수를 작성하는 데 도움이 된다.
원문 작가의 대학 프로그래밍 교수는 학생들에게 흥미로운 임무를 주었다. C 언어로 문자열의 길이를 계산하는 가장 짧은 함수를 작성하는 것은 새로운 언어를 배우고 탐색하는 좋은 방식이다.
그러나 실제 응용 프로그램에서 많은 개발자들이 코드를 읽는다.가장 짧은 문법은 당신의 동료가 이 방법의 용도를 즉각 이해하도록 돕는 데 항상 적합하지 않다.
어느 정도 간략한 함수는 읽기 어려워지기 때문에 되도록 과도하게 사용하지 말아야 한다.예를 하나 보여드릴게요.

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

multiply는 다음 곱셈 연산을 위해 두 숫자의 곱셈 결과나 첫 번째 매개 변수와 연결된 패키지를 되돌려줍니다.
이 함수는 운행이 양호해서 보기에 매우 짧다.하지만 처음부터 그것이 무엇을 하는지 이해하기 어려웠다.
가독성을 높이기 위해 화살표 함수에서 선택 가능한 괄호와 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

간단함과 지루함 사이에서 균형점을 찾는 것이 좋다. 이렇게 하면 코드를 더욱 직관적으로 할 수 있다.

총결산

의심할 여지없이 화살표 함수는 매우 좋은 보충이다.정확하게 사용할 때, 그것은 앞에서 반드시 사용해야 한다.bind () 또는 상하문을 포획하려는 곳은 간단해지고 코드도 간소화됩니다.
어떤 상황에서의 장점은 다른 상황에 불리함을 가져올 수 있다.동적 상하문이 필요할 때 화살표 함수를 사용할 수 없습니다: 방법을 정의하고 구조 함수를 사용하여 대상을 만들고 이벤트를 처리할 때this에서 목표를 가져옵니다.
이상은 JS의 어떤 장면이 화살표 함수에 적합하지 않은지에 대한 상세한 내용입니다. JS에 대한 더 많은 자료는 저희 다른 관련 문장에 주목하세요!