JavaScript 화살표 함수 사용법 소개-JS 튜토리얼-php.cn

JavaScript 화살표 함수 사용법 소개

巴扎黑

풀어 주다： 2017-08-16 11:05:25

원래의

3061명이 탐색했습니다.

이 글에서는 화살표 기능의 장점을 소개합니다.

더 간결한 구문

먼저 일반 구문에 따라 함수를 정의해 보겠습니다.

function funcName(params) {
return params + 2;
}
funcName(2);
// 4

로그인 후 복사

이 함수는 화살표 함수를 사용하며 단 한 줄의 코드로 수행할 수 있습니다!

var funcName = (params) => params + 2
funcName(2);
// 4

로그인 후 복사

멋지지 않나요! 매우 간결한 예이지만 코드 작성 시 화살표 함수의 장점을 잘 보여줍니다. 화살표 함수의 구문을 더 자세히 살펴보겠습니다.
[code ](parameters) => { comments }[/code]매개변수가 없으면 더 단순화할 수 있습니다.

() => { statements }

로그인 후 복사

있는 경우 매개변수가 하나만 있으면 괄호를 생략할 수 있습니다.

parameters => { statements }

로그인 후 복사

반환 값이 표현식(expression)이 하나만 있으면 중괄호도 생략할 수 있습니다.

parameters => expression
 
// 等价于:
function (parameters){
return expression;
}

로그인 후 복사

이제 화살표 함수의 구문을 배웠으니 다음을 살펴보겠습니다. 그것을 연습하십시오. Chrome 브라우저 개발자 콘솔을 열고 다음을 입력합니다.

var double = num => num * 2

로그인 후 복사

변수 double을 매개변수 num이 있고 num * 2를 반환하는 화살표 함수에 바인딩합니다. 이 함수를 호출하세요:

double(2);
// 4
 
double(3);
// 6

로그인 후 복사

로컬 this의 바인딩이 없습니다
일반 함수와 달리 화살표 함수는 this를 바인딩하지 않습니다. 즉, 화살표 기능은 이것의 원래 바인딩을 변경하지 않습니다.
설명하기 위해 예를 사용합니다.

function Counter() {
this.num = 0;
}
var a = new Counter();

로그인 후 복사

키워드 new 구문이 사용되었기 때문에 Count() 함수의 this는 새 개체에 바인딩되고 a에 할당됩니다. console.log를 통해 a.num을 인쇄하면 0이 출력됩니다.

console.log(a.num);
// 0

로그인 후 복사

a.num의 값을 1초마다 1씩 늘리려면 어떻게 해야 하나요? setInterval() 함수를 사용할 수 있습니다.

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}

로그인 후 복사

출력을 살펴보겠습니다.

var b = new Counter();
// NaN
// NaN
// NaN
// ..

로그인 후 복사

매초마다 누적된 숫자 대신 NaN이 인쇄되는 것을 확인할 수 있습니다. 무엇이 잘못되었나요?
먼저 다음 명령문을 사용하여 setInterval 함수의 연속 실행을 중지합니다.

clearInterval(b.timer);

로그인 후 복사

오류가 발생한 이유를 이해해 보겠습니다. 이전 블로그에서 설명한 규칙에 따르면 우선 setInterval 함수가 호출되지 않았습니다. 선언된 객체도 아니고 new 키워드도 사용되지 않았으며 바인드, 호출 및 적용이 사용되지 않았습니다. setInterval은 일반적인 함수입니다. 실제로 setInterval의 이는 전역 개체에 바인딩됩니다. 다음을 인쇄하여 이를 확인할 수 있습니다.

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
console.log(this);
}, 1000);
}
var b = new Counter();

로그인 후 복사

전체 창 개체가 인쇄된 것을 확인할 수 있습니다. 인쇄를 중지하려면 다음 명령을 사용하십시오.

clearInterval(b.timer);

로그인 후 복사

이전 함수로 돌아가서 NaN이 인쇄되는 이유는 this.num이 창 개체의 num에 바인딩되어 있고 window.num이 정의되지 않았기 때문입니다.
그렇다면 이 문제를 어떻게 해결할까요? 화살표 기능을 사용해보세요! 화살표 기능을 사용해도 이것이 전역 개체에 바인딩되지 않습니다.

function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

로그인 후 복사

Counter 생성자를 통한 이 바인딩은 유지됩니다. setInterval 함수에서 이는 여전히 새로 생성된 b 객체를 가리킵니다.
방금 말한 내용을 확인하기 위해 Counter 함수의 this와 that을 바인딩한 다음 setInterval에서 this와 that이 동일한지 확인할 수 있습니다.

function Counter() {
var that = this;
this.timer = setInterval(() => {
console.log(this === that);
}, 1000);
}
var b = new Counter();
// true
// true
// ...

로그인 후 복사

예상대로 인쇄된 값은 매번 정확합니다. 마지막으로 화면 인쇄를 종료합니다.