es6 함수 의 화살표 함수 용법 실례 상세 설명

본 논문 의 사례 는 es6 함수 의 화살표 함수 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
es6 는'화살표'(=>)정의 함 수 를 사용 할 수 있 습 니 다.

var f = v => v
//    
var f = function(v) {
 return v
}

화살표 함수 에 인자 가 필요 하지 않 거나 여러 개의 인자 가 필요 하지 않 으 면 괄호 로 매개 변수 부분 을 대표 합 니 다.

var f = () => 5
//    
var f = function() {
 return 5
}

var sum = (num1, num2) => num1 + num2
//    
var sum = function(num1, num2) {
 return num1 + num2
}

화살표 함수 의 코드 블록 부분 이 한 문장 보다 많 으 면 큰 괄호 로 묶 고 return 문 구 를 사용 하여 되 돌려 야 합 니 다.

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

큰 괄호 는 코드 블록 으로 해석 되 기 때문에 화살표 함수 가 대상 에 게 직접 돌아 오 면 대상 밖 에 괄호 를 붙 여야 합 니 다.그렇지 않 으 면 잘못 보 고 됩 니 다.

//   
let getTempItem = id => {id: id, name: "Temp"}
//    
let getTempItem = id => ({id: id, name: "Temp"})

다음은 실행 할 수 있 지만 잘못된 결 과 를 얻 을 수 있 는 특수 한 상황 이다.

let foo = () => {a: 1}

위의 코드 에서 원 초적 인 의 도 는 대상{a:1}을 되 돌려 주 는 것 입 니 다.그러나 엔진 은 대괄호 가 코드 블록 이 라 고 생각 하기 때문에 한 줄 의 문 구 를 실 행 했 습 니 다 a:1.이때 a 는 문장의 태그 로 이해 할 수 있 기 때문에 실제 실행 문 구 는 1 이 고 함수 가 끝 났 습 니 다.반환 값 이 없습니다.
화살표 함수 가 한 줄 의 문장 만 있 고 값 을 되 돌려 줄 필요 가 없다 면 아래 의 쓰기 방법 을 사용 할 수 있 으 며 괄호 를 쓰 지 않 아 도 됩 니 다.

let fn = () => void doesNotReturn()

화살표 함 수 는 변수 구조 와 결합 하여 사용 할 수 있 습 니 다.

const full = ({first, last}) => first + ' ' + last
//    
function full(person) {
 return person.first + ' ' + person.last
}

화살표 함수 사용 표현 이 더 간결 합 니 다.

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

화살표 함수 의 한 용 도 는 반전 함 수 를 간소화 하 는 것 이다.

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

다음은 rest 매개 변수 와 화살표 함수 가 결 합 된 예 입 니 다.

const numbers = (...nums) => nums

numbers(1, 2, 3, 4, 5)

const headAndTail = (head, ...tail) => [head, tail]

headAndTail(1, 2, 3, 4, 5)

사용 주의 점
1)함수 내의 this 대상 은 사용 할 때 있 는 대상 이 아니 라 있 는 대상 을 정의 하 는 것 이다.
2)구조 함수 로 사용 할 수 없다.즉,new 명령 을 사용 할 수 없다.그렇지 않 으 면 오류 가 발생 할 수 있다.
3)arguments 대상 을 사용 할 수 없습니다.이 대상 은 함수 내 에 존재 하지 않 습 니 다.사용 하려 면 rest 매개 변수 로 대체 할 수 있 습 니 다.
4)yield 명령 을 사용 할 수 없 기 때문에 화살표 함 수 는 Generator 함수 로 사용 할 수 없습니다.

function foo () {
 setTimeout(() => {
 console.log('id: ', this.id)
 }, 100)
}

var id = 21

foo.call({id: 42})

위의 코드 에서 setTimeout 의 매개 변 수 는 화살표 함수 입 니 다.이 화살표 함수 의 정 의 는 foo 함수 가 생 성 될 때 이 며,실제 실행 은 100 ms 이후 까지 기 다 려 야 합 니 다.일반 함수 라면 실행 할 때 this 는 전역 대상 window 를 가리 키 며 21 을 출력 해 야 합 니 다.그러나 화살표 함수 로 인해 this 는 함수 정의 가 유효 할 때 있 는 대상 을 가리 키 고 출력 하 는 것 은 42 입 니 다.
화살표 함수 가 자신의 this 가 전혀 없어 서 내부 의 this 가 바로 외부 코드 블록 의 this 입 니 다.바로 this 가 없 기 때문에 구조 함수 로 사용 할 수 없습니다.
this 를 제외 하고 다음 세 개의 변 수 는 화살표 함수 에 도 존재 하지 않 습 니 다.
arguments, super, new.target
다른 외 에 화살표 함수 에 자신의 this 가 없 기 때문에 물론 call(),apply(),bid()등 방법 으로 this 의 방향 을 바 꿀 수 없습니다.

(function() {
 return [
 (() => this.x).bind({x: 'inner'})()
 ]
}).call({x: 'outer'})

적용 되 지 않 는 경우
화살표 함수 로 인해 this 는'동적'에서'정적'으로 바 뀌 었 기 때문에 다음 두 장 소 는 화살표 함 수 를 사용 해 서 는 안 됩 니 다.
첫 번 째 장 소 는 함 수 를 정의 하 는 방법 이 고 이 방법 내부 에는 this 가 포함 되 어 있 습 니 다.

window.lives = 100
var cat = {
 lives: 9,
 jumps: () => { this.lives--; console.log(this.lives)}
}

// 99

위의 코드 에서 cat.jumps()방법 은 화살표 함수 입 니 다.이것 은 잘못된 것 입 니 다.cat.jumps()를 호출 할 때 일반 함수 라면 이 방법 내부 의 this 는 cat 를 가리 킵 니 다.위 와 같은 화살표 함수 로 쓰 면 this 는 전체 대상 을 가리 키 며 예상 되 는 결 과 를 얻 지 못 합 니 다.
두 번 째 장 소 는 동적 this(이벤트 감청)가 필요 할 때 화살표 함 수 를 사용 해 서 는 안 됩 니 다.

var button = document.getElementById('press');
button.addEventListener('click', () => {
 this.classList.toggle('on');
});

위의 코드 가 실 행 될 때 단 추 를 누 르 면 오류 가 발생 합 니 다.button 의 감청 함 수 는 화살표 함수 이기 때문에 안의 this 가 전체 대상 입 니 다.일반 함수 로 바 뀌 면 this 는 클릭 한 단추 대상 을 동적 으로 가리 키 게 됩 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.