function funcName(params) { return params + 2; } funcName(2); // 4이 함수는 화살표 함수를 사용하며 단 한 줄의 코드로 수행할 수 있습니다!
var funcName = (params) => params + 2 funcName(2); // 4멋지지 않나요! 매우 간결한 예이지만 코드 작성 시 화살표 함수의 장점을 잘 보여줍니다. 화살표 함수의 구문을 더 자세히 살펴보겠습니다.
() => { 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의 바인딩이 없습니다
function Counter() { this.num = 0; } var a = new Counter();
console.log(a.num); // 0
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이 인쇄되는 것을 확인할 수 있습니다. 무엇이 잘못되었나요?
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);
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 객체를 가리킵니다.
function Counter() { var that = this; this.timer = setInterval(() => { console.log(this === that); }, 1000); } var b = new Counter(); // true // true // ...
clearInterval(b.timer);
화살표 함수 작성 코드는 더 간결한 구문을 가집니다.
이를 바인딩하지 않습니다.
위 내용은 JavaScript 화살표 함수 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!