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, 인수, super(ES6), new.target(ES6)...

다른 예를 빌리면:

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

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

화살표 함수는 너무나 단순하고 순수한 것입니다.

그래서 저는 개인적으로 화살표 함수를 사용하는 것이 함수형 프로그래밍에 더 적합하다고 생각합니다. 명시적으로 선언하지 않아 예상치 못한 계산 결과가 발생합니다.

그럼 일반 함수도 화살표 함수와 같은 효과를 얻을 수 있을까요? 또는

하지만 두 번째 방법은 이 변수만 수정할 수 있습니다. 위에서 언급한 것처럼 화살표 함수의 인수와 같은 변수도 스코프 체인에서 찾을 수 있습니다. 유사한 효과를 얻으려면 지역 변수를 재정의하는 한 가지 방법밖에 없으며 babel도 이 방법을 사용하여 화살표 기능을 처리합니다.

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

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

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

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) //数组形式输出参数
}

을 방문하세요!