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

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

黄舟
黄舟원래의
2017-03-21 14:17:551336검색

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.