'화살표 함수'와 '함수'는 동일하거나 교환 가능합니까?

'화살표 함수'와 '함수'는 동일하거나 교환 가능합니까?

---

ES2015의 화살표 함수는보다 간결한 구문을 제공합니다.

• 모든 함수 선언 / 표현을 화살표 함수로 바꿀 수 있습니까?
• 무엇을 찾아야합니까?

예 :

생성자 함수

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

프로토 타입 방법

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

객체 (리터럴) 방법

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

콜백

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

가변 기능

function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// vs
const sum = (...args) => {
  // ...
};

---

tl; dr : 아니요! 화살표 함수와 함수 선언 / 표현은 동일하지 않으며 맹목적으로 바꿀 수 없습니다.
당신은 않습니다 대체 할 기능하면 되지 사용 this, arguments및 호출되지 않고 new, 다음 네.

---

자주 : 그것은 따라 달라집니다 . 화살표 함수는 함수 선언 / 표현과 동작이 다르므로 차이점을 먼저 살펴 보겠습니다.

1. 어휘 this와arguments

화살표 함수에는 자체 this또는 arguments바인딩 이 없습니다 . 대신, 이러한 식별자는 다른 변수와 같이 어휘 범위에서 분석됩니다. 그 수단 화살표 함수 내에 있음 this과 arguments의 값을 참조 this하고 arguments화살표 기능하는 환경에서 정의 된 (즉, "외부"화살표) 함수에서 :

// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

함수 표현식의 경우, this내부에 작성된 오브젝트를 참조하십시오 createObject. 화살표 함수의 경우 this를 말한다 this의 createObject자체.

this현재 환경 에 액세스해야 할 경우 화살표 기능이 유용 합니다.

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

참고 인이 같은 수단 것이 없는 가능성이 화살표의 기능이 설정 this으로 .bind하거나 .call.

에 익숙하지 않은 경우 this읽기를 고려하십시오.

• MDN-이
• YDKJS-this & Object 프로토 타입

2. 화살표 기능을 사용하여 호출 할 수 없습니다 new

ES2015는 호출 가능한 기능과 구성 가능한 기능을 구분 합니다. 함수를 구성 할 수있는 경우 new, 즉로 호출 할 수 있습니다 new User(). 함수를 호출 할 수 있으면 함수를 호출하지 않고도 호출 할 수 있습니다 new(즉, 일반 함수 호출).

함수 선언 / 표현을 통해 생성 된 함수는 구성 가능하고 호출 가능합니다.
화살표 함수 (및 메소드)는 호출 만 가능합니다. class생성자는 구성 가능합니다.

호출 할 수없는 함수를 호출하거나 구성 할 수없는 함수를 구성하려고하면 런타임 오류가 발생합니다.

---

이것을 알면 다음과 같이 말할 수 있습니다.

교체 가능 :

• 기능은 사용하지 않는 this나 arguments.
• 함께 사용되는 기능 .bind(this)

교체 불가 :

• 생성자 함수
• 프로토 타입에 추가 된 함수 / 메소드 (보통 사용하기 때문에 this)
• 다양한 기능 (사용하는 경우 arguments(아래 참조))

---

예제를 사용하여이를 자세히 살펴 보겠습니다.

생성자 함수

화살표 함수를로 호출 할 수 없으므로 작동하지 않습니다 new. 함수 선언 / 표현식을 계속 사용하거나 사용하십시오 class.

프로토 타입 방법

프로토 타입 메서드는 일반적으로 this인스턴스에 액세스하는 데 사용되므로 대부분 그렇지 않습니다 . 그들이을 사용하지 않으면 this바꿀 수 있습니다. 그러나 간결한 구문을 주로 관리하는 경우 class간결한 메소드 구문과 함께 사용하십시오 .

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

객체 메소드

객체 리터럴의 메소드와 유사합니다. 메소드가를 통해 객체 자체를 참조하려면 this함수 표현식을 계속 사용하거나 새 메소드 구문을 사용하십시오.

const obj = {
  getName() {
    // ...
  },
};

콜백

때에 따라 다르지. 외부의 별칭을 지정 this하거나 다음을 사용 하는 경우 반드시 교체해야합니다 .bind(this).

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

그러나 : 명시 적으로 콜백을 호출하는 코드를 설정하는 경우 this, 특히 jQuery를 함께 종종 이벤트 핸들러의 경우와 같이, 특정 값으로하고, 콜백 사용 this(또는 arguments), 당신은 할 수없는 화살표 기능을 사용!

가변 기능

화살표 함수에는 자체 기능이 없으므로 화살표 함수로 arguments간단히 바꿀 수 없습니다. 그러나, ES2015은 사용하는 대신 도입 arguments: 나머지 매개 변수를 .

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

---

관련 질문 :

• ECMAScript 6에서 언제 화살표 기능을 사용해야합니까?
• ES6 화살표 함수에는 자체 인수가 있습니까?
• ES6 화살표 함수와 Function.prototype.bind에 바인딩 된 함수의 차이점 (있는 경우)은 무엇입니까?
• 화살표 함수 (공개 클래스 필드)를 클래스 메서드로 사용하는 방법은 무엇입니까?

추가 자료 :

• MDN-화살표 기능
• YDKJS-화살표 기능

참고 URL : https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable