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

Question

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) => {
  // ...
};

Answer 1

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에서 Arrow 함수는 언제 사용해야합니까?
• ES6 화살표 함수에 자체 인수가 있습니까?
• ES6 화살표 함수와 Function.prototype.bind에 바인딩 된 함수의 차이점 (있는 경우)은 무엇입니까?
• 화살표 함수 (공용 클래스 필드)를 클래스 메서드로 사용하는 방법은 무엇입니까?

추가 리소스 :

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

Answer 2

화살표 기능 => 지금까지 최고의 ES6 기능. 그것들은 제가 끊임없이 사용하는 ES6에 엄청나게 강력한 추가 기능입니다.

잠깐, 코드의 모든 곳에서 화살표 함수를 사용할 수는 없으며 화살표 함수를 사용할 수없는 경우와 같은 모든 경우에 작동하지 않을 것 this입니다. 의심 할 여지없이 화살표 기능은 코드를 단순하게 만들어주는 큰 추가 기능입니다.

그러나 동적 컨텍스트가 필요한 경우 화살표 함수를 사용할 수 없습니다. 메서드 정의, 생성자를 사용하여 개체 만들기, 이벤트 처리시 여기에서 대상 가져 오기.

다음과 같은 이유로 화살표 기능을 사용해서는 안됩니다.

1. 그들은 가지고 있지 않다 this

   " this" 의 값이 무엇 이어야 하는지 파악하기 위해 "어휘 범위 지정"을 사용 합니다. 간단한 단어 어휘 범위 지정에서는 this함수 본문 내부의 " "를 사용합니다 .

2. 그들은 가지고 있지 않다 arguments

   화살표 함수에는 arguments개체 가 없습니다 . 그러나 나머지 매개 변수를 사용하여 동일한 기능을 얻을 수 있습니다.

   let sum = (...args) => args.reduce((x, y) => x + y, 0) sum(3, 3, 1) // output - 7 `

3. 그들은 함께 사용할 수 없습니다 new

   화살표 함수는 프로토 타입 속성이 없기 때문에 해석자가 될 수 없습니다.

화살표 기능을 사용하는 경우 및 사용하지 않는 경우 :

1. 객체 리터럴의 속성으로 함수를 추가하는 데 사용하지 마십시오. 우리가 이것에 접근 할 수 없기 때문입니다.
2. 함수 표현식은 객체 메서드에 가장 적합합니다. 기능과 같은 콜백 또는 방법에 가장 적합 화살표 map, reduce또는 forEach.
3. 이름으로 호출 할 함수에 대해 함수 선언을 사용합니다 (게양되기 때문에).
4. 콜백에 화살표 함수를 사용하십시오 (간결한 경향이 있기 때문).

Answer 3

와 함께 화살표 함수를 사용하기 위해 function.prototype.call객체 프로토 타입에 도우미 함수를 만들었습니다.

  // Using
  // @func = function() {use this here} or This => {use This here}
  using(func) {
    return func.call(this, this);
  }

용법

  var obj = {f:3, a:2}
  .using(This => This.f + This.a) // 5

편집하다

도우미가 필요하지 않습니다. 다음과 같이 할 수 있습니다.

var obj = {f:3, a:2}
(This => This.f + This.a).call(undefined, obj); // 5