이 뚱뚱한 화살표 함수들은?

몇 년 전, 내가 처음으로 자바스크립트를 배우기 시작했을 때, 어떤 사람이 나에게 고전적인 화살표 표현식을 쓰는 것을 가르쳐 주었다.

function myMessage( ) {
   console.log(“Hello, World!”)
}

그리고 새로운 화살표 함수 ES2015를 사용하기 시작했습니다.
같은 것을 쓰다.

const myMessage = ( ) => {
   console.log(“Hello, World!”)
}

새로운 문법은 나에게 매우 멋있는 것 같지만, 나중에 나는 새로운 문법과 낡은 문법 사이에 중요한 차이가 있다는 것을 발견하였다.때로는 이런 차이로 화살표의 기능이 신기할 때도 있고, 때로는 예상치 못한 문제를 가져올 수도 있다.
우선 기본 지식을 복습합시다.

괄호를 생략하다.
일반적으로 우리는 괄호를 사용하여 화살표 함수의 매개변수를 정의합니다.

const addTwoNumbers = ( x, y ) => {
   return x + y
}

위에서 우리는 두 개의 매개 변수 x와 y의 주위에 괄호를 넣었다.
매개변수가 0이면 괄호를 사용해야 합니다.

const mySecretMessage = ( ) => {
   console.log(“This is fun”)
}

그러나 매개변수가 하나인 경우 괄호를 생략하도록 선택할 수 있습니다.

const sayMyName = (string) => {
   console.log (string)
}

// we could have eliminated the parenthesis since there
// is only one parameter in our arrow function. 

// Let’s rewrite it:

const sayMyName = string => {
   console.log (string)
}

요약: 매개 변수가 있으면 화살표 함수 매개 변수 주위의 괄호만 생략할 수 있습니다.0, 2, 3개 이상의 매개변수가 있으면 괄호를 사용해야 합니다.

괄호를 생략하다
함수체에 문이 하나뿐인 경우 중괄호를 사용하여 문을 단순화할 수 있습니다.
이 함수는 함수체에 하나의 문만 있습니다.

//Example A

const addTwoNumbers = ( x, y ) => {
   return x + y
}

이렇게 됩니다.

//Example B

const addTwoNumbers = ( x, y ) =>   return x + y
}

쿨!다시 쓴 문장에서 우리는 1) 괄호를 삭제했고 2) 키워드'return'을 삭제했으며 3) 함수체 문장과 함수 정의를 같은 줄에 두었다.
몇 개의 새 단어의 용법을 주의해라.위의 예시 A에서, 우리가return 키워드를 사용할 때, 이것은 현식 반환이라고 부른다.계약에서, 우리가return 키워드를 생략할 때 (예시 B와 같이) 은식return이라고 부른다.
***괄호를 사용해야 하는 예외:
객체 문자를 반환하려면 괄호 안에 객체를 묶어야 합니다.

const greetings = name =>({ message: `Hello, ${ name }!`})

//now call “greetings”

greetings(‘Timmy’)    // -> { message: Hello, Timmy! }

객체 문자를 괄호로 묶지 않으면 JavaScript는 대괄호와 정의된 함수체의 대괄호를 혼동합니다.

이거
많은 JavaScript 프로그래머에게 "this"키워드는 모두가 알고 있는 오류입니다.그것을 더욱 재미있게 하기 위해서,'this'키워드는 고전 함수 호출과arrow 함수 호출에서의 작용이 다르다.
'this'가 대상의 방법에서 어떻게 일을 하는지 봅시다.
다음 방법을 참조하십시오.

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

위에서 너는 물체인 자동차를 볼 수 있다."전체 이름"키를 보십시오."fullName"에 대한 값은 일반적인 익명 함수입니다.
이 경우 fullName 함수를 이렇게 호출할 때

car.fullName( )

JavaScript는 호출된 객체에서 "this"의 의미를 찾는 고전 함수를 사용하기 때문입니다.우리의 예에서'this'는'카'라는 대상에서 호출되었다.좋습니다. 현재 JS에서는 텍스트'this.manufacturer'와'this.모델'을 어떻게 해석하는지 알 수 있습니다.우리가 방금'this'는 반드시'카'대상을 가리켜야 한다고 말했기 때문에 우리는'카'대상에'manufacturer'와'모델'속성이 있습니까?네, 있어요!그래서 JS는 다음과 같이 되돌아갈 수 있다.

car.fullName( )  // returns: “Ford Fiesta”

이제 우리가 차를 돌리면 무슨 일이 일어날지 봅시다.fullName 메서드를 다음과 같이 화살표 함수로 변환합니다.

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

"car.fullName()"을 호출하려고 하면 어떻게 됩니까?
차이점은 화살표 함수가'this'키워드를 어떻게 해석하는지에 있다.우리는 이미 고전 함수인'this'가 대상 자체를 가리키는 것을 어떻게 알았는지 보았기 때문에 대상의 모든 키/값 쌍은 이 함수에 사용할 수 있다.
그러나 우리의 화살표 함수는'this'키워드에 대한 해석이 다르다.
우리arrow 함수는 문법 범위 내에서'this'의 의미, 즉 이 함수를 실행하는 상하문만 찾을 수 있습니다.
다시 말하면 이것은 우리의arrow 함수'보기'의 유일한 내용이다.

fullName: ( ) => {
  return `${ this.manufacturer} ${ this.model }`

우리의arrow 함수는 대상의 자체 집행과 직결된 부분만 볼 수 있습니다.모델 속성도 표시되지 않고 제조업체 속성도 표시되지 않습니다.
따라서fat arrow 방법 함수가'this.manufacturer'와'this.model'을 해석하려고 할 때 비슷한 인용을 찾을 수 없습니다.이 두 값은 모두 정의되지 않은 것으로 되돌아옵니다.

car.fullName(  )  // “undefined undefined”

모든 '이' 의 결과는 대상의 구성 방법에서classic function 키워드를 사용해야 한다는 것입니다.