JavaScript 화살표 기능에 대한 자세한 설명

이 글에서는 ES6의 화살표함수(화살표 함수)에 대한 기본 지식을 자세히 설명합니다. ES6에서는 "화살표"를 사용하여 함수를 정의할 수 있습니다. 클래스(생성자)이 기사에서는 가독성을 보장하기 위해 직역이 아닌 무료 번역을 사용합니다. 또한, 이 글의 저작권은 원저자에게 있으며, 번역은 학습용으로만 사용됩니다.

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

더 간결한 구문

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

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

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

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

멋지지 않나요! 매우 간결한 예이지만 코드 작성 시 화살표 함수의 장점을 잘 보여줍니다. 화살표 함수의 구문을 더 자세히 살펴보겠습니다.

(parameters) => { statements }

매개변수가 없으면 더 단순화할 수 있습니다.

() => { statements }

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

parameters => { statements }

If 반환 값은 단 하나의

expression

( 표현식)이므로 중괄호를 생략할 수도 있습니다:

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

parameters => expression 이제 화살표 함수의 구문을 배웠으므로 연습해 보겠습니다.

Chr

ome 브라우저 개발자 콘솔을 열고 다음을 입력하세요:

var double = num => num * 2

변수

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

double(2);
// 4

double(3);
// 6

No local this 바인딩

일반 함수와 달리 화살표 함수는 this를 바인딩하지 않습니다. 즉, 화살표 기능은 이것의 원래 바인딩을 변경하지 않습니다.

다음 예를 사용합니다.

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

키워드 new가 구성에 사용되기 때문에 Count() 함수의 this는 새

object

에 바인딩되고 a에 할당됩니다. console.log를 통해 인쇄

a.num ，会输出0。 
console.log(a.num);
// 0

a.num의 값을 1초마다 1씩 늘리려면 어떻게 해야 하나요?

set

Interval() 함수를 사용할 수 있습니다.

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 함수의 연속 실행을 중지합니다.

<a href="http://www.php.cn/wiki/917.html" target="_blank">clear<p> Interval(b.timer);
<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>Interval(b.timer);오류가 발생한 이유를 이해해 봅시다: 이전 블로그에서 설명한 규칙에 따르면 우선 선언된 객체에 의해 setInterval 함수가 호출되지 않았으며, 새로운 키워드를 사용하지 않았고, c

all

을 사용하지 않고 적용했습니다. 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

constructor

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

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

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

clearInterval(b.timer);

요약

1. 화살표 함수 작성 코드가 더 간결해졌습니다.

2.

위 내용은 JavaScript 화살표 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!