[ES6 발가락 시리즈] 화살표 함수.

【 01 】 ES6 화살표 함수
이 글 의 문자 수 는 4300 + 이 고 읽 는 시간 은 약 8 분 정도 입 니 다.
【 01 】 화살표 함수
함수 의 인자 와 반환 만 유지 한 셈 이다.function 과 return 을 생략 합 니 다.
쓰기:
(형 삼) = > {statement;}
= > return 과 같 습 니 다.
01. 매개 변수:
01. 매개 변수 가 하나 밖 에 없 을 때 매개 변수 밖의 괄호 () 를 생략 할 수 있 습 니 다.끝자리 의 번 호 를 생략 할 수 있다.
Identifier = > Expression 으로 간략화
02. 매개 변수 가 여러 개 있 거나 매개 변수 가 없 거나 Rest 매개 변수 와 매개 변수 기본 값 이 있 거나 매개 변 수 를 재 구성 하 는 함수 가 있 으 면 괄호 로 매개 변 수 를 묶 어야 합 니 다.(첫 번 째 상황 을 기억 하면 좋 겠 다)
03. rest 매개 변수 와 매개 변수 기본 값 을 사용 할 수 있 습 니 다.
02. statement: 문장.
문장 이 하나 일 때, 바깥쪽 의 괄호 {} 를 생략 할 수 있 습 니 다.
03. 화살표 함 수 를 체인 으로 쓸 수 있 습 니 다.
예 를 들 어 (x) = > (y) = > (x + y)
04. (형 삼) 과 화살표 = > 같은 줄 에 써 야 합 니 다. 그렇지 않 으 면 잘못 보 고 됩 니 다.

const fn = x
=> x * 2 // SyntaxError
const fn = (x, y) //SyntaxError
=> {
    return x * y
}

정확 한 쓰 기 는 이렇게 해 야 한다.

const fn = (x, y) => {
    return x * y
}

[02] 화살표 함수 의 this 문 제 를 주목 해 야 합 니 다.
01. 화살표 함수 가 this 를 연결 하지 않 습 니 다. this 를 연결 하지 않 는 것 외 에 arguments, 슈퍼 또는 new. target 을 연결 하지 않 습 니 다.
02. 화살표 함수 에 있 는 this 는 외부 코드 블록 의 this 를 계승 합 니 다.
03. 대상 의 방법 이 화살표 함수 라면 화살표 함수 중의 this 는 window 입 니 다. 대상 에 this 가 존재 하지 않 기 때문에 위로 만 찾 을 수 있 고 전체적인 this 를 찾 을 수 있 습 니 다. 가리 키 는 것 은 window 입 니 다.이 대상 이 어떤 함수 안에 있 더 라 도 마찬가지다.
같은 규칙 도 prototype 대상 에서 정의 하 는 방법 에 적용 된다.
따라서 화살표 함수 로 대상 을 설명 하지 않 아 도 된다.

let o = {
  //      。
  notThis: () => {
    console.log(this) // Window
    this.objectThis() // Uncaught TypeError: this.objectThis is not a function
  },
  //      
  objectThis: function () {
    console.log(this) // o
  }
  //    
  objectThis2 () {
    console.log(this) // o
  }
}

04 、 이벤트 모니터 를 만 들 기 위해 화살표 함 수 를 사용 할 수 없습니다. this 는 이벤트 모니터 에 추 가 된 요소 에 연결 되 지 않 기 때 문 입 니 다.
이벤트. currentTarget 을 사용 하여 올 바른 this 컨 텍스트 를 얻 을 수 있 습 니 다.

button.addEventListener('click', function () {
  console.log(this) // button
})

button.addEventListener('click', e => {
  console.log(this) // Window
  console.log(event.currentTarget) // button
})

05. 타이머, 타이머 의 화살표 함수 에 적용 되 는 this, 외부 코드 블록 을 계승 하 는 this.

let o = {
  // Old way
  oldDoSthAfterThree: function () {
    let that = this
    setTimeout(function () {
      console.log(this) // Window
      console.log(that) // o
    })
  },
  // Arrow function way
  doSthAfterThree: function () {
    setTimeout(() => {
      console.log(this) // o
    }, 3000)
  }
}

06. 화살표 함 수 는 자신의 this 가 없 기 때문에 call (), apply (), bid () 등 방법 으로 this 의 방향 을 바 꿀 수 없습니다.
[03] 구조 함수 로 는 안 됩 니 다.
new 명령 을 사용 해 서 는 안 되 며, 그렇지 않 으 면 오류 가 발생 할 수 있다 는 것 이다.

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Func('John', 33) // error

【 04 】 yield 명령 사용 불가
따라서 화살표 함 수 는 Generator 함수 로 사용 할 수 없습니다.
【 05 】 화살표 함수 의 type: of 연산 자 는 일반적인 function 과 같 습 니 다.

var func = a => a
console.log(typeof func); // "function"

instanceof 도 true 로 돌아 가 Function 의 인 스 턴 스 임 을 나타 낸다.

console.log(func instanceof Function); // true

[06] 반환 값 이 대상 이 라면
괄호 를 반환 값 으로 직접 사용 할 수 없습니다. 오류 가 발생 할 수 있 습 니 다.
JS 엔진 은 대상 의 괄호 를 만 났 을 때 코드 블록 으로 사용 하기 때문에 그 안의 변수 표지, 사칭, 쉼표 등 을 모른다.
대상 에 게 직접 돌아 가 려 면 작은 괄호 로 대상 전 체 를 감 싸 면 된다.
예:

const getInitialData = () => {
    id: 1,
    name: 'Jane Doe'
};

//        
let initialData = getInitialData();

예:

//       
const getInitialData = () => ({
    id: 1,
    name: 'Jane Doe'
});

let initialData = getInitialData();

【 07 】 화살표 함수 에 서 는 arguments 대상 을 사용 할 수 없습니다.
그 안의 arguments 는 소 포 된 외층 함수 의 arguments 를 가리킨다.

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
    var f = (i) => arguments[0]+i; 
    // foo         
    return f(2);
}

foo(1); // 3

【 08 】 rest 매개 변 수 를 사용 하여 수량 이 정 해 지지 않 은 매개 변 수 를 방문 할 수 있 습 니 다.

function foo() { 
    var f = (...args) => args[0]; 
    return f(2); 
}

foo(1); // 2

【 09 】 즉시 실행 함수 에서 화살표 함 수 를 사용 할 수 있 습 니 다.
예:

( x => x * 2 )( 3 ); // 6

【 10 】 전역 작용 역 에서 화살표 함 수 를 정의 하지 마 십시오.
함수 내부 에서 조작 this 하면 전역 작용 역 을 오염 시 키 기 쉽 기 때문이다.최소한 화살표 함수 외부 에 일반 함 수 를 패키지 하여 this 보 이 는 범위 내 에서 제어 합 니 다.
[11] 흔히 볼 수 있 는 예 들:
예:

// click.js
const btn = document.querySelector('button');

btn.addEventListener('click', (event) => {
    console.log('clicked');
});

예:

// map.js
let numbers = [1,2,3,4];
let multipliedBy2 = numbers.map((number) => {
    return number * 2;
});

console.log(multipliedBy2); // [2, 4, 6, 8]

예:

const numbers = [1, 2, 3, 4];
const multipliedBy2 = numbers.map((n) => n * 2);

//             
const multipliedBy2WithShorterCallback = numbers.map(n => n * 2);

예:

const todos = (state = [], action) => {
    switch(action.type) {
    case ADD_TODO:
        return [..state, action.text];
    default:
        return state;
    }
}

예:

const multiply = (x) => {
    return (y) => {
        return x * y;
    }
};

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

예:

const multiply = (x) => (y) => x * y;

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

다음은 화살표 함수 의 사용 모드 입 니 다:

//             
param => expression;//    x => x+2;

//            
(param [, param]) => expression; //   (x,y) => (x + y);

//            
param => {statements;} //   x = > { x++; return x;};

//             
([param] [, param]) => {statements} //    (x,y) => { x++;y++;return x*y;};

//        
() => expression; //  var flag = (() => 2)(); flag  2

() => {statements;} //   var flag = (() => {return 1;})(); flag   1

//       ，      
([param]) => ({ key: value });
//    var fuc = (x) => ({key:x})
 var object = fuc(1);
alert(object);//{key:1}

【 】 예: 일부 표기 법

//         
(function(x, y){
    x= x * 2;
    return x + y;
} (3, "B") );

//          
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );

//              :
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//