JavaScript 의 일반 함수 와 화살표 함수 의 차이 점 과 용법 에 대한 상세 한 설명

최근 에 한 가지 질문 을 받 았 다.
javaScript 의 화살표 함수(=>)와 일반 함수(function)는 어떤 차이 가 있 습 니까?
내 가 그때 생각 한 것 은:이 문 제 는 매우 간단 하 다~(flag)그리고 잘못된 대답 을 했다.
화살표 함수 의 this 는 호출 시의 컨 텍스트 와 상 관 없 이 정의 시의 컨 텍스트 에 달 려 있 습 니 다.
정확 한 답 은 아니 지만...완전히 틀린 것 은 아니 지만...
화살표 함수 의 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 를 연결 하지 않 았 기 때문에 화살표 함수 에서 this 를 호출 할 때 역할 도 메 인 체인 을 따라 간단하게 위로 찾 아 최근 의 this 를 찾 아 사용 할 뿐 입 니 다.
효과 적 으로 볼 때 이것 은 제 가 예전 에 이해 한 것 과 큰 차이 가 없 지만 그들의 본질 은 전혀 다 릅 니 다.화살표 함 수 는 일반 함수 가 this 가 호출 되 지 않 을 때 문맥 의 영향 을 받 지 않 는 특성 을 추가 한 것 이 아니 라 많은 특성 을 감소 시 켰 습 니 다.
화살표 함 수 는 사실 더 간단 한 함수 입 니 다.
실제 화살표 함수 에는 this 와 일반 함수 만 다 르 지 않 습 니 다.화살표 함수 에는 this 와 같이 자동 으로 연 결 된 부분 변수 가 없습니다.예 를 들 어 this,arguments,슈퍼(ES6),new.target(ES6)...
다른 사람의 예 를 빌리다.

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

일반 함수 에서 자동 으로 연결 되 는 각종 부분 변 수 는 화살표 함수 가 매우 단순 하 게 작용 도 메 인 체인 을 따라 위로 찾 습 니 다.
화살표 함 수 는 이렇게 간단 하고 순수한 것 이다.
그래서 저 는 개인 적 으로 화살표 함수 가 함수 식 프로 그래 밍 에 더욱 적합 하 다 고 생각 합 니 다.더 짧 은 것 을 제외 하고 화살표 함 수 를 사용 하 는 것 도 성명 을 표시 하지 않 은 변수 에 영향 을 받 아 예상 치 못 한 계산 결 과 를 얻 기 어렵 습 니 다.
그렇다면 일반 함 수 는 화살표 함수 와 같은 효 과 를 실현 할 수 있 을 까?
그때 의 나 처럼 this 라 는 변 하기 쉬 운 녀석 을 고정 시 키 는 것 을 간단하게 고려 했다 면..............................................................

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

혹은

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

그러나 두 번 째 방법 은 this 라 는 변수 만 고정 시 킬 수 있 습 니 다.앞에서 말 한 바 와 같이 화살표 함수 중의 arguments 등 변수 도 작용 도 메 인 체인 에서 찾 은 것 입 니 다.비슷 한 효 과 를 실현 하기 위해 우 리 는 부분 변수 라 는 방식 만 다시 정의 할 수 있 고 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);
  };
}

그럼...화살표 함수 에서 arguments 를 사용 하려 면 어떻게 해 야 합 니까?
........................................................................
그러나 화살표 함수 에서 모든 인 자 를 배열 과 유사 한 형식 으로 가 져 올 수 없다 는 것 은 아 닙 니 다.우 리 는 연산 자 를 펼 쳐 서 인 자 를 받 을 수 있 습 니 다.예 를 들 어 다음 과 같 습 니 다.

const testFunc = (...args)=>{
  console.log(args) //        
}

아마도 정말 이런 표기 법 을 사용 해 야 하 는 장면 이 있 을 것 이다.그러나 나 는 화살표 함수 가 고정된 매개 변 수 를 받 아들 이 고 계산 결 과 를 되 돌려 주 는 간단 한 상황 에 더욱 적합 하 다 고 생각한다.
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 자 바스 크 립 트 의 일반 함수 와 화살표 함수 의 차이 점 과 용법 에 대한 상세 한 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!