화살표 함수와 일반 함수의 차이점
- hzc앞으로
- 2020-06-12 10:38:163810검색
머리말
Arrow 함수는 프론트 엔드 인터뷰에서 자주 사용되는 테스트 포인트입니다. Arrow 함수는 일반 함수보다 구문이 간단하기 때문에 많은 사람들이 알고 있다고 생각합니다. 모두에 의해. 우리가 일상적인 개발에 사용해 온 API이지만 대부분의 학생들은 이를 충분히 이해하지 못합니다. 화살표 함수의 기본 구문과 화살표 함수와 일반 함수의 차이점에 대해 자세히 알아 보겠습니다.
1. 기본 구문
【1.1】함수 정의
화살표 함수를 방어하는 것은 수학 구문의 일반 함수보다 훨씬 간단합니다. ES6에서는 화살표 함수를 정의하는 데 사용할 수 있습니다. 화살표 함수는 function 키워드를 생략하고, 함수의 매개변수는 => 앞의 괄호 안에 배치되며, 함수 본문은 => 뒤의 중괄호 안에 배치됩니다.
// 箭头函数
let fun = (name) => {
return `Hello ${name} !`;
};
// 普通函数
let fun = function (name) {
return `Hello ${name} !`;
};【1.2】화살표 함수 매개변수
① 화살표 함수에 매개변수가 없으면 빈 괄호만 작성하세요.
② 화살표 함수에 매개변수가 하나만 있는 경우 매개변수를 둘러싼 괄호를 생략할 수도 있습니다.
3 화살표 함수에 매개변수가 여러 개 있는 경우 매개변수를 쉼표(,)로 구분하고 괄호로 묶습니다.
// 没有参数
let fun1 = () => {
console.log('dingFY');
};
// 只有一个参数，可以省去参数括号
let fun2 = name => {
console.log(`Hello ${name} !`)
};
// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
return [val1, val2, val3];
};【1.3】화살표 함수의 함수 본문
① 화살표 함수의 함수 본문에 단순히 변수를 반환하거나 간단한 JS 표현식을 반환하는 코드가 한 줄만 있는 경우 함수의 중괄호 { } 본문은 생략 가능합니다.
let fun = val => val;
// 等同于
let fun = function (val) { return val };
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};② 화살표 함수의 함수 본문에 객체를 반환하는 문이 하나만 있는 경우 다음과 같이 작성할 수 있습니다.
// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });
// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };③ 화살표 함수의 함수 본문에 문이 하나만 있고 그럴 필요가 없는 경우 값을 반환하는 경우(가장 일반적으로 함수를 호출하는 경우) 이 명령문 앞에 void 키워드를 추가할 수 있습니다
let fun = () => void doesNotReturn();2. 화살표 함수와 일반 함수의 차이점
[2.1] 구문은 다음과 같습니다. more concise andclear
위의 화살표 함수의 기본 구문에서 예제에서 볼 수 있듯이 화살표 함수의 정의는 일반 함수의 정의보다 훨씬 간단하고 명확하며 빠릅니다.
【2.2】화살표 함수에는 프로토타입(프로토타입)이 없으므로 화살표 함수 자체에는 this가 없습니다
// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined
// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}【2.3】화살표 함수는 자체 this를 생성하지 않습니다
화살표 함수에는 자체 this가 없습니다. 화살표 함수 this는 정의될 때 외부 레이어의 첫 번째 일반 함수에서 상속된 this를 가리킵니다(참고: 호출될 때가 아니라 정의될 때). 따라서 화살표 함수에서 이것을 가리키는 것은 정의될 때 결정되며 나중에 변경되지 않습니다. let obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
}
obj.b();
obj.c();
call | apply | 바인딩 메소드를 사용하면 함수가 실행될 때 this의 포인팅을 동적으로 수정할 수 있습니다. 화살표 함수의 this가 정의되어 있으며 절대 변경되지 않습니다. 따라서 이러한 방법을 사용하면 화살표 기능의 포인팅을 변경할 수 없습니다. var id = 10;
let fun = () => {
console.log(this.id)
};
fun(); // 10
fun.call({ id: 20 }); // 10
fun.apply({ id: 20 }); // 10
fun.bind({ id: 20 })(); // 10
call | apply | 바인딩 메소드를 사용하면 함수가 실행될 때 this의 포인팅을 동적으로 수정할 수 있습니다. 화살표 함수의 this가 정의되어 있으며 절대 변경되지 않습니다. 따라서 이러한 방법을 사용하면 화살표 기능의 포인팅을 변경할 수 없습니다. var id = 10;
let fun = () => {
console.log(this.id)
};
fun(); // 10
fun.call({ id: 20 }); // 10
fun.apply({ id: 20 }); // 10
fun.bind({ id: 20 })(); // 10
먼저 생성자에서 new가 무엇을 하는지 알아볼까요? 간단히 말해서, 이는 4단계로 나뉩니다. ① JS는 먼저 내부적으로 객체를 생성합니다. ② 그런 다음 함수에서 객체를 가리킵니다. ③ 그런 다음 생성자에서 명령문을 실행합니다. ④ 마지막으로 객체 인스턴스를 반환합니다. 하지만! ! 화살표 함수에는 자체 this가 없기 때문에 this는 실제로 외부 실행 환경에서 this를 상속받고, this의 요점은 호출 위치나 누구에 의해 호출되더라도 절대 변하지 않으므로 화살표 함수를 함수로 사용할 수 없습니다. 생성자, 또는 생성자를 화살표 함수로 정의할 수 없다고 말합니다. 그렇지 않으면 new로 호출할 때 오류가 보고됩니다!
let Fun = (name, age) => {
this.name = name;
this.age = age;
};
// 报错
let p = new Fun('dingFY', 24);【2.6】화살표 함수는 인수를 바인딩하지 않습니다. 대신 인수 개체 대신 나머지 매개변수를 사용하여 화살표 함수의 매개변수 목록에 액세스합니다.
화살표 함수에는 자체 속성이 없습니다. 인수 객체. 화살표 함수의 인수에 액세스하면 실제로 외부 로컬(함수) 실행 환경에서 값을 얻습니다. // 普通函数
function A(a){
console.log(arguments);
}
A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 箭头函数
let B = (b)=>{
console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined
// rest参数...
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]
추천 튜토리얼: "JS Tutorial"
위 내용은 화살표 함수와 일반 함수의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!