ES2015에서 명명 된 화살표 함수를 작성하는 방법

ES6 에서 새 화살표 구문으로 변환하려고하는 기능이 있습니다. 명명 된 함수입니다.

function sayHello(name) {
    console.log(name + ' says hello');
}

var 문없이 이름을 지정하는 방법이 있습니까?

var sayHello = (name) => {
    console.log(name + ' says hello');
}

분명히이 기능을 정의한 후에 만 ​​사용할 수 있습니다. 다음과 같은 것 :

sayHello = (name) => {
        console.log(name + ' says hello');
    }

ES6 에서 이것을 수행하는 새로운 방법이 있습니까?

ES2015에서 명명 된 화살표 함수를 작성하는 방법

당신은 당신의 질문에서 배제 한 방식으로 : 변수 또는 속성 이름을 JavaScript 엔진에서 합리적으로 이름으로 사용할 수있는 할당 또는 속성 이니셜 라이저의 오른쪽에 배치하십시오. 다른 건 없어 그것을 할 방법이 있지만, 그 일을하는 것은 정확하고 완전하게 사양이 적용됩니다.

사양에 따라이 함수의 이름은 sayHello다음 과 같습니다.

var sayHello = name => {
    console.log(name + ' says hello');
};

이는 할당 연산자> 런타임 의미론 : 추상 오퍼레이션을 호출 하는 평가에 정의되어 있습니다.SetFunctionName 을 호출 (해당 호출은 현재 1.e.iii 단계에 있음).

와 비슷하게, 런타임 의미 : PropertyDefinitionEvaluation를 호출 SetFunctionName하여 및이 기능을 진정한 이름을 제공합니다 :

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

현대식 엔진은 이미 그러한 문장에 대한 함수의 내부 이름을 설정합니다. Edge에는 여전히 name런타임 플래그 뒤의 함수 인스턴스에서 사용할 수있는 비트가 있습니다 .

예를 들어 Chrome 또는 Firefox에서 웹 콘솔을 열고이 스 니펫을 실행하십시오.

"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

Chrome 51 이상 및 Firefox 53 이상 (및 실험용 플래그가있는 Edge 13 이상)에서 실행하면 다음이 표시됩니다.

foo.name은 foo입니다.
오류
    foo에서 (http://stacksnippets.net/js:14:23)
    http://stacksnippets.net/js:17:3

foo.name is: foo및을 참고하십시오 Error...at foo.

Chrome 50 및 이전 버전, Firefox 52 및 이전 버전 및 실험용 플래그가없는 Edge에서는 Function#name속성 (아직) 이 없기 때문에 대신 표시됩니다 .

foo.name은 다음과 같습니다. 
오류
    foo에서 (http://stacksnippets.net/js:14:23)
    http://stacksnippets.net/js:17:3

이름이 누락되어 있습니다 foo.name is:,하지만이 되는 스택 추적에 표시. 실제로 함수 에서 name 속성 을 구현하는 것이 다른 ES2015 기능보다 우선 순위가 낮다는 것입니다. 크롬과 파이어 폭스는 이제 그것을 가지고있다. Edge는 플래그 뒤에 있으며 플래그 뒤에는 더 이상 없을 것입니다.

분명히, 나는이 기능을 정의한 후에 만 ​​사용할 수 있습니다

옳은. 화살표 함수 에는 함수 선언 구문 이없고 함수 표현식 구문 만 있으며, 이전 스타일의 명명 된 함수 표현식 ( var f = function foo() { };) 의 이름과 같은 화살표는 없습니다 . 따라서 다음과 같은 것은 없습니다.

console.log(function fact(n) {
    if (n < 0) {
        throw new Error("Not defined for negative numbers");
    }
    return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120

그것을 두 가지 표현으로 나눠야합니다 ( 어쨌든 그렇게해야한다고 주장 합니다 ) .

let fact = n => {
    if (n < 0) {
      throw new Error("Not defined for negative numbers.");
    }
    return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));

물론 단일 표현식이 필요한 곳에 이것을 배치 해야하는 경우 항상 ... 화살표 기능을 사용할 수 있습니다.

console.log((() => {
    let fact = n => {
        if (n < 0) {
            throw new Error("Not defined for negative numbers.");
        }
        return n == 0 ? 1 : n * fact(n - 1);
    };
    return fact(5);
})()); // 120

나는 그것이 예쁘다고 말하지는 않지만, 절대적으로 단일 표현 래퍼가 필요하다면 작동합니다.

화살표 구문은 익명 함수의 약자입니다. 익명의 기능은 익명입니다.

명명 된 함수는 function키워드 로 정의됩니다 .

'이름'으로 표시되는 경우 .name 말하면 화살표 기능 속성을 설정 입니다.

대입 식의 오른쪽에 화살표 함수가 정의되어 있으면 엔진은 왼쪽의 이름을 사용하여 화살표 함수를 설정하는 데 사용합니다 ( .name예 :

var sayHello = (name) => {
    console.log(name + ' says hello');
}

sayHello.name //=== 'sayHello'

말했듯이, 귀하의 질문은 '화살표 기능을 끌어 올릴 수 있습니까?'인 것 같습니다. 그 질문에 대한 답은 큰 '아니요'입니다.

ES7에서 가능할 것으로 보입니다 : https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions

주어진 예는 다음과 같습니다.

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

ES6 화살표 함수의 본문은이를 둘러싼 코드와 동일한 어휘를 공유하므로 ES7 속성 이니셜 라이저의 범위 지정 방식으로 인해 원하는 결과를 얻습니다.

이것을 babel과 함께 사용하려면 가장 실험적인 ES7 stage 0 구문을 활성화해야했습니다. 내 webpack.config.js 파일에서 babel 로더를 다음과 같이 업데이트했습니다.

{test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'},

실제로 화살표 기능의 이름을 지정하는 한 가지 방법처럼 보입니다 (적어도 크롬 77 ...).

"use strict";
let fn_names = {};
fn_names.foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

명명 된 화살표 함수를 작성하려면 LoginClass 라는 클래스가 있고이 클래스 내에 function 이라는 화살표를 작성했습니다.successAuth

    constructor() {

    }

    successAuth = (dataArgs)=> { //named arow function

    }

}

이것은 ES6입니다

예, 당신이 겪고있는 것은 다음과 같습니다.

const foo = (depth) => {console.log("hi i'm Adele")}
foo -> // the function itself
foo() -> // "hi i'm Adele"

함수 부분과 화살표 부분을 건너 뛰어 함수를 만들 수 있습니다. 예:

 class YourClassNameHere{

   constructor(age) {
     this.age = age;
   }

   foo() {
     return "This is a function with name Foo";
   }

   bar() {
     return "This is a function with name bar";
   }

 }

let myVar = new YourClassNameHere(50);
myVar.foo();