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

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

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

답변

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

sayHello.name //=== 'sayHello'

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

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

"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);
}

    constructor() {

    }

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

    }

}

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