MDN에 따르면 화살표 함수 표현식은 this, arguments, super 또는 new.target 키워드에 대한 자체 바인딩이 없지만 구문상 일반 함수 표현식의 대안입니다. 화살표 함수 표현식은 메서드로 적합하지 않으며 생성자로 사용할 수 없습니다.
자바스크립트의 일반 함수와 화살표 함수에는 3가지 미묘한 차이점이 있습니다.
이 바인딩을 소유하지 않음
화살표 함수에는 고유한 이 값이 없습니다. 화살표 함수 내부의 this 값은 항상 둘러싸는 범위에서 상속됩니다.
예시
this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a) 출력
100 150 150
화살표 함수가 범위 외부에서 이 객체를 변경한 것을 확인하십시오. 일반 함수는 this 내에서 변경을 수행했습니다.
화살표 함수에는 인수 배열이 없습니다.
JS에서 함수의 배열은 함수에 전달된 모든 인수를 가져오는 데 사용할 수 있는 특수 개체입니다. 이와 유사하게 화살표 함수는 arguments 객체에 대한 자체 바인딩이 없으며 둘러싸는 범위의 인수에 바인딩됩니다.
화살표 함수는 호출 가능하지만 생성 불가능
함수가 구성 가능한 경우 new, 즉 new User()로 호출할 수 있습니다. 함수가 호출 가능한 경우 new 없이 호출할 수 있습니다(즉, 일반 함수 호출).
함수 선언/표현식을 통해 생성된 함수는 생성 가능하고 호출 가능합니다.
화살표 함수(및 메서드)는 호출만 가능합니다. 클래스 생성자는 생성만 가능합니다.
호출할 수 없는 함수를 호출하거나 구성할 수 없는 함수를 생성하려고 하면 런타임 오류가 발생합니다.
let arrowFunc = () => {}
new arrowFunc()
This code gives the error:
arrowFunc is not a constructor