js 화살표 함수와 일반 함수의 차이점

이 글은 주로 자바스크립트 화살표 함수와 일반 함수의 차이점을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

화살표 함수 - ES6에 도입된 새로운 기능 - JavaScript로 간결한 함수 작성을 지원합니다. 일반 함수와 화살표 함수는 비슷하게 작동하지만 아래 설명과 같이 두 함수 사이에는 몇 가지 흥미로운 차이점이 있습니다.

문법

일반 함수 구문:

let x = function function_name(parameters){ 
   // 函数体
};

일반 함수 예:

let square = function(x){ 
  return (x*x); 
}; 
console.log(sqaure(9));

출력:

화살표 함수 구문:

let x = (parameters) => { 
    // 函数体
};

화살표 기능의 예:

var square = (x) => { 
    return (x*x); 
}; 
console.log(square(9));

출력:

this 키워드 사용

일반 함수와 달리 화살표 함수에는 자체 this가 없습니다.

예:

let user = { 
    name: "GFG", 
    gfg1:() => { 
        console.log("hello " + this.name); 
    }, 
    gfg2(){        
        console.log("Welcome to " + this.name); 
    }   
 }; 
user.gfg1(); 
user.gfg2();

출력:

인수 개체의 가용성

인수 개체는 화살표 함수에서는 사용할 수 없지만 일반 함수에서는 사용할 수 있습니다.

일반 함수의 예:

let user = {       
    show(){ 
        console.log(arguments); 
    } 
}; 
user.show(1, 2, 3);

출력:

화살표 함수의 예:

let user = {      
        show_ar : () => { 
        console.log(...arguments); 
    } 
}; 
user.show_ar(1, 2, 3);

출력:

새 키워드 사용

함수 선언 또는 일반 사용 표현식으로 생성된 함수는 "구성 가능"하고 "호출 가능"합니다. 일반 함수는 생성 가능하므로 'new' 키워드를 사용하여 호출할 수 있습니다. 그러나 화살표 함수는 "호출 가능"할 뿐 구성할 수는 없습니다. 따라서 new 키워드를 사용하여 생성할 수 없는 화살표 함수를 생성하려고 하면 런타임 오류가 발생합니다.

일반 함수의 예:

let x = function(){ 
    console.log(arguments); 
}; 
new x =(1,2,3);

출력:

화살표 함수의 예:

let x = ()=> { 
    console.log(arguments); 
}; 
new x(1,2,3);

출력:

관련 권장 사항: "javascript 튜토리얼"

위 내용은 js 화살표 함수와 일반 함수의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!