제이스크립트 화살표 함수
- 이전 페이지 JS this 키워드
- 다음 페이지 JS 클래스
과목 추천:
ES6에서 꺽호 함수가 도입되었습니다.
꺽호 함수는 더 짧은 함수를 작성할 수 있게 합니다:
문법
let myFunction = (a, b) => a * b;
hello = function() {
꺽호 함수를 사용한 후:
}
이전:
hello = () => {
꺽호 함수를 사용한 후:
}
return "Hello World!"; 정말 짧아졌습니다! 함수가 하나의 문장만 있고 그 문장이 값을 반환하면 꺽호와 return을 생략할 수 있습니다. return
키워드:
꺽호 함수의 기본 반환 값:
hello = () => "Hello World!";주석:
이는 함수가 하나의 문장만 있을 때만 유효합니다.
매개변수가 있으면 꺽호 안에 값을 전달합니다:
매개변수를 포함한 꺽호 함수:
hello = (val) => "Hello " + val;
실제로, 하나의 매개변수만 있으면 꺽호를 생략할 수도 있습니다:
꺽호 함수(불필요한 꺽호):
이 hello = val => "Hello " + val;
에 대해 어떻게 대처해야 하나요? 이 일반 함수와 비교해 꺽호 함수는
결론적으로, 꺽호 함수를 사용하면 처리도 달라집니다. 이 의 바인딩.
일반 함수에서 키워드 이 호출하는 함수의 객체를 나타내며, 그것은 창, 문서, 버튼이나 다른 어떤 것도 될 수 있습니다.
꺽호 함수에 대해이 키워드는 항상 꺽호 함수를 정의하는 객체를 나타냅니다.
이 차이를 이해하기 위해 두 개의 예제를 보겠습니다.
이 두 예제는 두 번 호출되었습니다. 첫 번째는 페이지 로드 시, 두 번째는 사용자가 버튼을 클릭할 때입니다.
첫 번째 예제는 일반 함수를 사용하고, 두 번째 예제는 꺽호 함수를 사용합니다.
결과는 첫 번째 예제가 두 개의 다른 객체(윈도우와 버튼)를 반환하고, 두 번째 예제는 두 번의 윈도우 객체를 반환하는 이유는 윈도우 객체가 함수의 '소유자'이기 때문입니다.
예제
일반 함수에서 this는 호출하는 함수의 객체를 나타냅니다：
// 일반 함수：
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// 윈도우 객체가 이 함수를 호출합니다：
window.addEventListener("load", hello);
// 버튼 객체가 이 함수를 호출합니다：
document.getElementById("btn").addEventListener("click", hello);
예제
꺽호 함수를 사용하면 이 함수 소유자를 나타냅니다：
// 화살표 함수：
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// 윈도우 객체가 이 함수를 호출합니다：
window.addEventListener("load", hello);
// 버튼 객체가 이 함수를 호출합니다：
document.getElementById("btn").addEventListener("click", hello);
함수를 사용할 때 이러한 차이점을 기억해야 합니다. 때로는 일반 함수의 동작이 바람직할 수 있으며, 그렇지 않으면 화살표 함수를 사용해야 합니다.
브라우저 지원
아래 표는 JavaScript 화살표 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다：
| 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 45 | 에지 12 | 파이어폭스 22 | 사파리 10 | 오페라 32 |
| 2015년 9월 | 2015년 7월 | 2013년 5월 | 2016년 9월 | 2015년 9월 |
- 이전 페이지 JS this 키워드
- 다음 페이지 JS 클래스
