ECMAScript6의 새로운 기능 Arrow Function에 대한 자세한 소개_기본 지식

화살표 함수는 ECMAScript 6 업데이트에 관해 가장 많이 언급되는 기능 중 하나입니다. "화살표"(=>)를 사용하여 함수를 정의하는 새로운 구문이 도입되었습니다. 정말 놀랍습니다. 화살표 함수와 기존 JavaScript 함수의 주요 차이점은 다음과 같습니다.
1. 함수 내부의 this 값은 화살표 함수가 실행되는 컨텍스트가 아니라 화살표 함수가 정의된 위치에 따라 달라집니다.
2.new는 사용할 수 없습니다. 화살표 함수는 new 키워드를 사용하여 객체를 인스턴스화할 수 없습니다. 그렇지 않으면 오류가 보고됩니다.
3.이것은 변경할 수 없습니다. 함수에 내장된 this는 불변이며 함수 본문의 전체 실행 환경에서 일정합니다.
4. 인수 개체가 없습니다. 들어오는 매개변수는 인수 개체를 통해 액세스할 수 없습니다. 이는 명시적인 이름 지정이나 기타 새로운 ES6 기능을 통해서만 수행할 수 있습니다.

이러한 차이는 정당합니다. 첫째, 이에 대한 바인딩은 JavaScript 오류의 일반적인 원인 중 하나입니다. 내장된 함수의 가치를 잃거나 예상치 못한 결과를 얻기 쉽습니다. 둘째, 고정된 참조를 사용하도록 화살표 기능을 제한하는 것은 JavaScript 엔진 최적화에 도움이 됩니다.

1. 문법

화살표 함수의 구문은 매우 간단합니다. 독립 변수를 정의한 다음 화살표와 함수 본문을 정의합니다. 독립변수와 주제는 사용법에 따라 더 간결한 형식을 가질 수 있습니다. 다음 예에서는 하나의 매개변수를 전달하고 값을 반환하는 화살표 함수를 사용합니다.

코드 복사 코드는 다음과 같습니다.

var Reflect = value =>
// 다음과 동일:

var Reflect = function(value) {
return value;
};

보시다시피 매개변수를 전달할 경우 괄호를 추가하지 않고 직접 작성하면 됩니다. 화살표는 함수 본문을 가리키지만 함수 본문은 단순한 return 문이므로 중괄호를 추가할 필요가 없습니다. 함수가 생성된 후에는 참조용으로 반영하도록 지정됩니다.
여러 매개변수를 전달해야 하는 경우 괄호를 추가해야 합니다. 예:

코드 복사 코드는 다음과 같습니다.

var sum = (num1, num2) = > num1 num2;
// 다음과 동일:
var sum = function(num1, num2) {
return num1 num2;
};

sum() 메서드는 두 개의 매개변수를 추가하고 결과를 반환합니다. 이전 예제와의 유일한 차이점은 두 개의 매개변수가 전달되므로 괄호로 묶인다는 것입니다. 이는 괄호 안에 전달된 매개변수를 쉼표로 구분하는 기존 함수와 동일합니다. 마찬가지로, 함수에 매개변수가 필요하지 않으면 대신 빈 괄호를 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

var sum = () => 🎜>/ / 다음과 동일:
var sum = function() {
return 1 2;
};

표준 함수 본문을 사용하고 싶거나 함수 본문에 실행할 명령문이 더 있을 경우 함수 본문을 중괄호로 묶고 반환 값을 명확하게 정의하세요. 예:

코드 복사 코드는 다음과 같습니다.

var sum = (num1, num2) => ; { return num1 num2; }
//동등함:
var sum = function(num1, num2) {
return num1 num2;
};

중괄호 안의 부분은 인수 매개변수를 사용할 수 없다는 점을 제외하면 기본적으로 기존 함수와 동일합니다.

중괄호는 함수 본문의 기호이기 때문입니다. 화살표 함수가 사용자 정의 개체를 반환하려면 개체를 괄호로 묶어야 합니다. 예:

코드 복사 코드는 다음과 같습니다.

var getTempItem = id = >
id: id,
name: "Temp"
});
// 동등 항목:
var getTempItem = function(id) {
return {
id: id,
이름: "임시"
};
};

위의 예에서 볼 수 있듯이 괄호를 사용하여 중괄호를 포함하는 것은 함수의 본문이 아니라 객체의 정의입니다.

2. 사용

JavaScript에서 가장 흔히 발생하는 오류 중 하나는 함수 내의 이러한 연관입니다. 이는 함수의 현재 실행 환경에 따라 값을 취하기 때문에 호출 중에 오해가 발생하고 이는 관련 없는 다른 객체에 영향을 미치게 됩니다. 아래 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

var PageHandler = {
id: "123456" ,
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // error
}, false );
},
doSomething: function(type) {
console.log("handling " type " for " this.id);
}
};

이 코드의 원래 의도는 PageHandler의 init() 메서드를 사용하여 상호 작용을 구축하고 클릭 이벤트 처리 함수에서 this.doSomething()을 호출하는 것입니다. 그러나 코드가 원래 설계 의도에 따라 실행되지 않았습니다. 런타임 시 이는 PageHandler 대신 전역 개체를 가리키므로 this.doSomething() 호출이 유효하지 않게 되고 doSomething 메서드가 그렇지 않기 때문에 오류가 보고됩니다. 전역 개체에 존재합니다.
물론 함수에서 바인딩()을 사용하여 이를 PageHandler와 명확하게 연결할 수 있습니다. 아래를 참조하세요.

코드 복사 코드는 다음과 같습니다.

var PageHandler = {

id: "123456",

init: function() {
document. addEventListener("click" , (function(event) {
This.doSomething(event.type);
}).bind(this), false);
},

doSomething : function(type) {
         console.log(" this.id에 대한 " type " 처리 중); 함수의 바인딩(this)을 호출하면 기존 this와 연결된 새로운 함수 반환이 생성됩니다. 이는 목적을 달성하기 위해 추가 레이어가 래핑된다는 의미입니다.
화살표 함수는 이미 이 연관을 지원하므로 여기서는 화살표 함수를 사용하는 것이 더 편리합니다.

코드 복사

코드는 다음과 같습니다. var PageHandler = { id: "123456",

init: function() {
document.addEventListener("click ",
event = > this.doSomething(event.type), false);
},

doSomething: function(type) {
console. log(" this.id에 대한 " 유형 " 처리);
}
};



이 예제의 이벤트 처리 함수는 this.doSomething()의 화살표 함수를 호출합니다. this의 값은 init()의 this 값입니다. 따라서 이것은 바인딩()과 동일합니다.
화살표 함수의 간결하고 간결한 특성으로 인해 다른 함수의 인수에 이상적인 선택이 됩니다. 예를 들어, ES5에서 배열을 정렬하기 위해 사용자 정의 비교기를 사용하는 경우 일반적인 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.var result = value.sort(function(a, b) {               return a - b; });

위의 예에서는 간단한 연산을 구현하기 위해 많은 구문을 사용합니다. 화살표 함수를 사용하면 매우 간결한 코드를 작성할 수 있습니다:

코드 복사

코드는 다음과 같습니다.var result = value.sort((a, b) => a - b);

배열 정렬/맵/축소 및 기타 방법은 모두 콜백 기능을 지원합니다. 화살표 기능을 사용하면 쓰기 과정이 단순화되고 손을 자유롭게 하여 원하는 작업을 수행할 수 있습니다.

3. 보충

화살표 함수는 실제로 기존 함수와 다르지만 여전히 공통된 특징을 가지고 있습니다. 예:
1. 화살표 함수에 대한 작업 유형은 "함수"를 반환합니다.
2. 화살표 함수는 여전히 Function의 인스턴스이므로 인스턴스의 실행 방법은 기존 함수와 일치합니다.
3. 호출/적용/바인드 메소드는 화살표 함수에 여전히 적용 가능하지만 이러한 메소드를 호출하여 현재 범위를 확장하더라도 여전히 변경되지 않습니다.
화살표 기능과 기존 기능의 가장 큰 차이점은 새로운 작업이 비활성화된다는 것입니다.

4.결론

화살표 함수는 많은 관심을 받고 있는 ECMAScript 6의 새로운 기능이며 여전히 최적화 중입니다. 짧은 구문을 사용하여 함수나 명령문을 정의하여 프로세스를 작성하는 것이 일반적인 추세이며 누구도 이를 막을 수 없습니다. 키워드와의 연관성은 개발자의 부담을 덜어주고 JavaScript 엔진 최적화를 통해 성능을 향상시키는 데 도움이 됩니다. 하지만 친구들은 이미 칼에 목말라하고 있습니다. 화살표 기능을 사용해보고 싶다면 최신 버전의 Firefox를 여세요.