es5 함수와 es6 화살표 함수의 차이점은 무엇입니까?

차이점: 1. ES6 화살표 함수는 "() => {}"이고 ES5 함수는 "function funName(){}"입니다. 2. let 바인딩이 다른 경우. 매개변수가 하나만 있는 경우 화살표 함수는 괄호를 생략할 수 있습니다. 함수가 값만 반환하는 경우 화살표 함수는 중괄호를 생략할 수 있습니다. 3. 이는 함수가 가리키는 객체를 가리킵니다. 호출되는 반면 화살표 함수는 정의될 때 this 지점, 즉 전역 창 개체를 가리킵니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

es6 화살표 함수

화살표 함수는 es6의 새로운 함수 표현입니다. 기능의 단순성을 최대한 활용했습니다! 가장 간단한 화살표 함수부터 살펴보겠습니다.

let fn = a => a
var m = prompt()
alert(fn(m))

화살표 함수를 처음 접하는 사람들은 간결한 구문에 놀랄 수도 있습니다! es5의 구문과 비교해 보겠습니다

let fn=function(a){
    return a;
}
var m = prompt()
alert(fn(m))

es5 함수와 es6 화살표 함수의 차이점

ES3, ES5 일반 함수: function a(){} function a(){}

ES6箭头函数： () => {};

ES6 화살표 함수 : () => {};

예를 들어 map 메소드를 사용하여 원래 배열을 해당 새 배열로 "매핑"합니다.

//ES3，ES5写法
var a = [1,2,3,4,5];
var b = a.map(function(i) {
  return i + 1
});
 console.log(a,b);

Console results

//ES6写法
let a = [1,2,3,4,5];
let b = a.map(i => i + 1)
console.log(a,b);

Console 결과:

요약: 화살표 함수와 일반 함수는 let에 바인딩됩니다. 함수에 매개변수가 하나만 있는 경우 괄호를 생략할 수 있고, 함수가 값만 반환하는 경우 중괄호를 생략할 수 있습니다

그럼~ 여기서도 화살표 기능의 포인팅 문제에 대해 이야기하고 싶습니다.

참고: 일반 함수 this는 함수가 호출되는 개체, 화살표 함수: 정의 시 this의 지점(전역 창 개체를 가리킴)

또 다른 예:

//ES3，ES5
function foo(){
   this.a = 'a';
   this.b = 'b';
   this.c = {
      a: 'a+',
      b: function() {
        return this.a
      }
   }
}
console.log(new foo().c.b());

//ES6
function foo2(){
  this.a = 'a';
  this.b = 'b'; 
  this.c = {
    a:'a+',
    b:() => {
      return this.a
    }
  }
}
console.log(new foo2().c.b());

콘솔 효과:

여기서 foo 객체를 인스턴스화한 후 c 객체의 b 메서드가 호출되는 것을 볼 수 있습니다. 일반 함수에서 이는 함수가 호출되는 객체, 즉 c 객체를 가리키므로 a+가 출력됩니다. ES6 화살표 함수에서 함수 본문의 this.a는 생성자 foo에 의해 정의된 this.a이므로 a가 출력됩니다.

【관련 추천: javascript 비디오 튜토리얼, 프로그래밍 비디오

】🎜

위 내용은 es5 함수와 es6 화살표 함수의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!