화살표 기능은 ECMAScript 6에서 가장 인기있는 업데이트 중 하나입니다. "화살표"(=>)를 사용하여 함수를 정의하기위한 새로운 구문을 소개합니다. 화살표 함수와 전통적인 JavaScript 함수의 주요 차이점은 다음과 같습니다.
1. 이것과 관련성. 화살표 함수가 실행되는 컨텍스트가 아니라 화살표 함수가 정의되는 위치에 따라이 값이 내장되어 있습니다.
2. 신이 제공되지 않습니다. 화살표 함수는 새 키워드를 사용하여 개체를 인스턴스화 할 수 없으며, 그렇지 않으면 오류 가보고됩니다.
3. 이것은 불변입니다. 기능은 기능 본문 내의 전체 실행 환경에서 일정합니다.
4. 인수 대상이 없습니다. 인수 객체를 통해 들어오는 매개 변수에 액세스 할 수 없습니다. 명시적인 이름 지정 또는 기타 새로운 ES6 기능을 사용 하여만 수행 할 수 있습니다.
이러한 차이의 존재는 합리적입니다. 첫째, 이것에 대한 바인딩은 JavaScript 오류의 일반적인 소스 중 하나입니다. 기능의 내장 값을 잃거나 예상치 못한 결과를 얻는 것은 쉽습니다. 둘째, 화살표 기능을 고정 사용으로 제한하는 것은 JavaScript 엔진 최적화 처리에 도움이됩니다.
1. 구문
화살표 함수의 구문은 단순하여 독립 변수, 화살표 및 기능 본문을 정의합니다. 독립적 인 변수와 주제는 다른 사용으로 인해보다 간결한 형식으로 사용할 수 있습니다. 다음 예제는 매개 변수를 전달하고 값을 반환하는 화살표 함수입니다.
코드 사본은 다음과 같습니다.
var reflice = value => value;
// 동등한 :
var recling = function (value) {
반환 값;
};
브래킷을 추가하지 않고 전달하여 매개 변수를 작성할 수 있음을 알 수 있습니다. 화살표는 기능 본문을 가리키지 만 기능 본문은 단순한 반환 문일 뿐이므로 버팀대를 추가 할 필요가 없습니다. 함수가 구성되면 반사 및 참조하도록 할당됩니다.
여러 매개 변수를 전달 해야하는 경우 브래킷을 추가해야합니다. 예를 들어:
코드 사본은 다음과 같습니다.
var sum = (num1, num2) => num1 + num2;
// 동등한 :
var sum = function (num1, num2) {
Num1 + Num2를 반환합니다.
};
Sum () 메소드는 두 개의 매개 변수를 추가하고 결과를 다시 전달하는 것입니다. 이전 예와 유일한 차이점은 두 매개 변수가 전달되므로 괄호로 둘러싸여 있어야한다는 것입니다. 그것은 전통적인 기능과 같습니다. 괄호 안의 쉼표가 매개 변수로 분리되어 있습니다. 마찬가지로 함수가 매개 변수로 전달할 필요가 없으면 빈 괄호로 대체해야합니다.
코드 사본은 다음과 같습니다. var sum = () => 1 + 2;
// 동등한 :
var sum = function () {
반환 1 + 2;
};
표준 기능 본문을 사용하려고하거나 함수 본문에서 실행할 명령이 더 많을 경우, 기능 본문을 중괄호로 둘러싸고 리턴 값을 명확하게 정의하십시오. 예를 들어:
코드 사본은 다음과 같습니다.
var sum = (num1, num2) => {return num1 + num2; }
// 동등한 :
var sum = function (num1, num2) {
Num1 + Num2를 반환합니다.
};
브레이스의 부분은 기본적으로 인수 매개 변수를 사용할 수 없다는 점을 제외하고 기본적으로 전통적인 기능과 동일합니다.
버팀대는 기능 본문의 로고이기 때문입니다. 화살표 함수가 사용자 정의 객체를 반환하려면 먼저 객체를 괄호 안에 둘러싸고 있어야합니다. 예를 들어:
코드 사본은 다음과 같습니다.
var getTempitem = id => ({
ID : ID,
이름 : "온도"
});
// 동등한 :
var getTempitem = function (id) {
반품 {
ID : ID,
이름 : "온도"
};
};
위의 예에서 알 수 있듯이, 곱슬 괄호를 포함시키기 위해 괄호를 사용하는 것은 기능의 본문이 아니라 물체의 정의입니다.
2. 사용
JavaScript에서 가장 일반적인 오류 중 하나는 함수 내부의 연관성입니다. 이것은 기능의 현재 실행 환경에 따라 값을 취하기 때문에 호출 할 때 오해가 발생하여 다른 관련없는 개체에 영향을 미칩니다. 다음 예를 참조하십시오.
코드 사본은 다음과 같습니다.
var pagehandler = {
ID : "123456",
init : function () {
document.addeventListener ( "클릭", 함수 (이벤트) {
this.dosomething (event.type); // 오류
}, 거짓);
},
dosomething : function (type) {
console.log ( " + this.id의"핸들링 " + 타입 +";
}
};
이 코드에서 원래 의도는 PageHandler의 init () 메소드를 사용하여 상호 작용을 구축하고 클릭 이벤트 핸들러 기능에서이를 호출하도록하는 것입니다. 그러나 원래 설계 의도에 따라 코드가 실행되지 않습니다. 런타임에 이것은 PageHandler 대신 글로벌 오브젝트를 가리 킵니다. 이로 인해 DoSomething () 호출을 무효화하고 오류가 전역 객체에 존재하지 않기 때문에 오류가 발생합니다.
물론 함수에서 bind ()를 사용하여이를 PageHandler와 명시 적으로 연결할 수 있습니다. 아래를 참조하십시오.
코드 사본은 다음과 같습니다.
var pagehandler = {
ID : "123456",
init : function () {
document.addeventListener ( "클릭", (함수 (이벤트) {
this.dosomething (event.type);
}). bind (this), false);
},
dosomething : function (type) {
console.log ( " + this.id의"핸들링 " + 타입 +";
}
};
조금 이상하게 보이지만 코드 실행은 이제 기대치와 일치합니다. 함수의 bind (this)를 호출함으로써, 기존의 것과 관련된 새로운 함수가 생성되므로 목적을 달성하기 위해 다른 레이어가 포함되어 있음을 의미합니다.
화살표 기능은 이미이 연관성을 지원하기 때문에 여기에서 화살표 기능을 사용하는 것이 더 상쾌합니다. 다음 예를 참조하십시오.
코드 사본은 다음과 같습니다.
var pagehandler = {
ID : "123456",
init : function () {
document.addeventListener ( "클릭",
event => this.dosomething (event.type), false);
},
dosomething : function (type) {
console.log ( " + this.id의"핸들링 " + 타입 +";
}
};
이 인스턴스의 이벤트 처리 기능은 this.dosomething ()의 화살표 기능을 호출합니다. 이것의 값은이 init ()의 값입니다. 따라서 바인드 ()와 동일합니다.
화살표 기능의 간결하고 간결한 특성은 다른 기능 독립 변수에 이상적인 선택입니다. 예를 들어, 사용자 정의 비교기를 사용하여 ES5의 배열을 배열하려면 아래의 일반적인 코드를 참조하십시오.
코드 사본은 다음과 같습니다.
var result = values.sort (function (a, b) {
반환 a -b;
});
위의 예제는 많은 구문을 사용하여 간단한 작업을 구현합니다. 화살표 함수를 사용하는 경우 매우 세련된 코드를 작성할 수 있습니다.
코드 사본은 다음과 같습니다.
var result = values.sort ((a, b) => a -b);
배열의 정렬/맵/감소 방법은 콜백 함수를 지원합니다. 화살표 기능을 사용하면 작문 과정을 단순화하고 손을 자유롭게하여 원하는 작업을 수행 할 수 있습니다.
3. 보충
화살표 기능은 실제로 전통적인 기능과 다르지만 여전히 공통적 인 특성이 있습니다. 예를 들어:
1. 화살표 기능에서 작동 유형은 "함수"를 반환합니다.
2. 화살표 함수는 여전히 함수 인스턴스이므로 인스턴스의 실행 방법은 전통적인 함수의 실행 방법과 일치합니다.
3.call/apply/bind 메소드는 여전히 화살표 기능에 적용 할 수 있지만 이러한 방법이 현재 범위를 확장하도록 호출 되더라도 변경되지 않습니다.
화살표 기능과 전통적인 기능의 가장 큰 차이점은 새로운 작업이 비활성화된다는 것입니다.
4. 결론
화살표 기능은 ECMAScript 6의 새로운 기능으로, 많은 관심을 끌고 끊임없이 최적화되고 있습니다. 작문 기능이나 진술 과정을 정의하기 위해 간단한 문법을 사용하는 것이 일반적인 경향이며, 반드시 무적이며 아무도 그들을 막을 수 없습니다. 키워드와 관련하여 개발자는 더 이상 성가신 것을 짜증나게하지 않고 JavaScript 엔진을 통해 성능을 향상시키기 위해 최적화합니다. 이것에 대해 말하면, 내 친구들은 이미 목이 마르고 있습니다. 화살표 기능을 시도하려면 최신 버전의 Firefox를 열십시오.