JavaScript의 일반 함수와 화살표 함수의 차이점과 사용법을 자세히 설명하는 코드 예제

이번 글은 자바스크립트의 일반적인 함수와 화살표 함수의 차이점과 사용법을 주로 소개하고 있어 매우 좋고 참고할만한 내용이 있습니다

최근에 다음과 같은 질문을 받았습니다.

JavaScript에서 화살표 함수( => )와 일반 함수( function )의 차이점은 무엇인가요?

당시 제가 생각한 것은 이 질문은 매우 간단합니다~(플래그). 그러다가 엉뚱한 대답을 했습니다...

화살표 기능에 있는 이 내용은 관련이 없습니다. 호출될 때의 컨텍스트와 정의될 때의 컨텍스트에 따라 다릅니다

이것은 정답은 아니지만... 완전히 틀린 것은 아니지만

화살표 함수의 this

우선 내 대답에 잘못된 부분이 없습니다. 화살표 함수의 this는 호출될 때 컨텍스트와 아무 관련이 없습니다. 🎜>

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

이 예에서 볼 수 있듯이 화살표 함수가 정의된 후에는 이것이 어떻게 호출되든 변경되지 않는다는 것이 사실입니다.

하지만; 엄밀히 말하면 이것은 "정의될 때 컨텍스트에 의존"하지 않습니다. 왜냐하면 화살표 함수는 자체 this를 바인딩하지 않고 단순히 화살표 함수에서 이것을 호출할 때 가장 가까운 this를 찾기 위해 범위 체인을 따라 위쪽으로 검색하기 때문입니다. 사용해 보세요.

효과면에서는 이전에 했던 것과 동일하지만, 그 본질은 완전히 다릅니다. 호출 컨텍스트에 영향을 받지 않지만 많은 기능이 줄어듭니다.

화살표 함수는 실제로 더 간단한 함수입니다

사실 이것뿐만이 아닙니다. 이는 화살표 함수의 일반 함수와 다릅니다. this, 인수,

super(ES6), new.target을 포함한 로컬 변수에는 이와 같은 자동 바인딩이 없습니다. (ES6)...

다른 예를 빌리세요:

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

일반 함수에서는 다양한 지역 변수가 자동으로 바인딩됩니다. Arrow 함수는 범위 체인을 따라 위쪽으로 검색하는 것이 매우 간단합니다. ..

화살표 함수는 참 단순하고 순수한 것입니다;

그래서 저는 개인적으로 화살표 함수가 함수형 프로그래밍

프로그래밍에 더 적합하다고 생각합니다. 화살표 함수를 사용하면 명시적으로 선언되지 않은 변수의 영향을 받기가 더 어려워지고 예상치 못한 계산 결과가 발생하게 됩니다.

그렇다면 일반 함수도 화살표 함수와 동일한 효과를 얻을 수 있을까요?

그때처럼 단순히 이 변덕스러운 놈을 고치는 것을 고려한다면... 아주 간단할 것입니다. 일반적으로 사용되는 방법은 다음과 같습니다.

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

또는

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

그러나 두 번째 방법은 이 변수만 수정할 수 있습니다. 위에서 언급한 것처럼 화살표 함수의 인수와 같은 변수도 비슷한 효과를 얻기 위해 범위 체인에서 찾습니다. 지역 변수를 재정의하는 방법은 한 가지뿐이며, babel도 이 방법을 사용하여 화살표 함수를 처리합니다.

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

그럼... 화살표 함수에 인수를 사용하려면 어떻게 해야 할까요?

...이런 필요성이 있다면 일반 기능을 사용하는 것이 더 적합할 것 같습니다...

그러나 그렇다고 해서 그런 것은 아닙니다.

와 유사한 화살표 기능을 사용할 수 없습니다. 모든 매개변수는 배열 형식으로 가져옵니다. 확장 연산자 를 사용하여 다음과 같은 매개변수를 받을 수 있습니다.

const testFunc = (...args)=>{
  console.log(args) //数组形式输出参数
}

이 작성 방법이 필요한 시나리오가 있을 수 있지만, 여전히 고정된 매개변수를 받아들이고 계산 결과를 반환하는 간단한 상황에는 화살표 함수가 더 적합하다고 생각합니다.

위 내용은 JavaScript의 일반 함수와 화살표 함수의 차이점과 사용법을 자세히 설명하는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!