es6 화살표 함수 상세 설명

기본용법

es6에서 화살표로 익명 함수 정의

   var f = v => v

에 상당하다,...

   var f = function(v){
      return v;
   }

화살표 함수의 코드 블록이 한 문장보다 많으면 화살표 뒤의 반환 값은 대괄호로 싸서 리턴을 현시적으로 써야 합니다.

   var f = (num1, num2) => {
      return num1 + num2
   }

에 상당하다,...

   var f = function(num1, num2){
       return num1 + num2;
   }

매개 변수가 필요하지 않으면 괄호로 매개 변수 부분을 대표합니다

   var f = () => v

화살표 뒤의 첫 번째 괄호가 코드 블록으로 해석되기 때문에 익명 함수가 대상으로 되돌아오면 괄호로 묶어야 합니다

   var f = () => ({ name: 'sysuzhyupeng', age: 24 })

화살표 함수는 해체와 함께 사용할 수 있다

   const full = ({ first, last }) => first + ' ' + last;
   //equals
   const full = function(person) {
       return person.first + ' ' + person.last;
   }
   full({first: 1, last: 5}) // '1 5'

화살표 함수는 함수 표현을 더욱 간결하게 한다

   const isEven = n => n % 2 == 0;
   const square = n => n * n;

화살표 함수의 또 다른 용도는 리셋 함수를 간소화하는 것이다

   var newArr = arr.sort(function(a, b){
       return a - b;
   })
   //es6
   var newArr = arr.sort((a, b) => a - b);

또 다른 예

   [1, 2, 3].map(function(x){
       return x * x;
   })
   //es6
   [1, 2, 3].map( x => x * x);

주의점 사용

함수 안에 있는this 대상은 정의된this 대상이지 실행할 때의 호출 대상이 아니다.그래서 화살표 함수는this를 자체적으로 연결하여 많은 곳에서 사용할 수 있습니다..

arguments 대상을 사용할 수 없습니다. 이 대상은 함수 안에 존재하지 않습니다

   function foo(){
      setTimeout(() => {
          //return 
          console.log(this.id)
      }, 100);
   }
   var id = 1;
   //setTimeout foo ， window， foo ， 
   foo.call({ id: 2 })  // 2

정상적인 실행 시 귀속되면 현재 호출된 대상은 {id:2}입니다. 2를 출력해야 합니다.그러나 화살표 함수는 정의된 대상, 즉 윈도우를 연결하기 때문에 1을 출력합니다. 물론 엄격한 모드에서는 undefined를 출력합니다.this가 가리키는 고정화는 화살표 함수 내부에this를 연결하는 메커니즘이 있기 때문이 아니다. 실제 원인은 화살표 함수에 자신의this가 없기 때문에 내부의this가 바로 외부 코드 블록의this이다.바로this가 없기 때문에 구조 함수로 사용할 수 없습니다.

   // 
   function foo() {
    var _this = this;
    setTimeout(function () {
        console.log('id:', _this.id);
        }, 100);
   }

중첩된 화살표 함수

화살표 함수 내부, 화살표 함수도 덧붙일 수 있습니다. 다음은 es5의 다중 덧붙임 함수입니다.

   function insert(){
       return {info: function(array){
           return {after: function(afterValue){
               array.splice(array.indexOf(afterValue) + 1, 0, value);
               return array;
           }}
       }}
   }
   insert(2).into([1, 3]).after(1); //[1, 2, 3]

이 함수는 화살표 함수로 바꿀 수 있다

   function insert(() => ({ info: (value) => ({ after: (afterValue)=>{  
       array.splice(array.indexOf(afterValue) + 1, 0, value);
       return array;
   }})})

es7의 귀속부호

ES7은 콜, apply, bind 호출을 대체하는 함수 귀속 (functionbind) 연산자를 제시했다.이 문법은 ES7의 제안이지만 Babel 디코더는 이미 지원됩니다.함수 귀속 연산자는 나란히 있는 두 개의 짝퉁 (::), 두 개의 짝퉁 왼쪽은 하나의 대상이고 오른쪽은 하나의 함수입니다.이 연산자는 자동으로 왼쪽 대상을 상하문 환경 (즉this 대상) 으로 오른쪽 함수 위에 연결합니다.

   foo::bar;
   //  
   bar.bind(foo);
   foo::bar(...arguments);
   //  
   bar.apply(foo, arguments);