ฉันจะเขียนฟังก์ชัน arrow ที่มีชื่อใน 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หรือไม่?

ฉันจะเขียนฟังก์ชัน arrow ที่มีชื่อใน ES2015 ได้อย่างไร

คุณทำสิ่งที่คุณตัดออกในคำถามของคุณ: คุณวางไว้ที่ด้านขวามือของการกำหนดค่าเริ่มต้นหรือคุณสมบัติเริ่มต้นที่ตัวแปรหรือชื่อคุณสมบัติสามารถใช้เป็นชื่อโดยเอ็นจิน JavaScript ไม่มีวิธีอื่นที่จะทำ แต่การทำนั้นถูกต้องและครอบคลุมโดยข้อกำหนด

ตามข้อมูลจำเพาะฟังก์ชั่นนี้มีชื่อจริงsayHello:

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

สิ่งนี้ถูกกำหนดไว้ในตัวดำเนินการที่ได้รับมอบหมาย> ความหมายของรันไทม์: การประเมินผลที่เรียกการSetFunctionNameดำเนินการเชิงนามธรรม (การเรียกนั้นอยู่ในขั้นตอนที่ 1.e.iii

เสมือนความหมายรันไทม์: การเรียกPropertyDefinitionEvaluationSetFunctionNameและทำให้ชื่อนี้เป็นฟังก์ชันจริง:

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: fooError...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 อื่น ๆ Chrome และ Firefox มีตอนนี้ Edge มีด้านหลังธงโดยสันนิษฐานว่าจะไม่อยู่ด้านหลังธงนานนัก

เห็นได้ชัดว่าฉันสามารถใช้ฟังก์ชั่นนี้หลังจากที่ฉันได้กำหนดไว้เท่านั้น

แก้ไข. ไม่มีไวยากรณ์การประกาศฟังก์ชันสำหรับฟังก์ชันลูกศรเฉพาะไวยากรณ์นิพจน์ฟังก์ชันเท่านั้นและไม่มีลูกศรเทียบเท่ากับชื่อในรูปแบบเก่าที่ชื่อ function expression ( 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คำหลัก

ถ้าโดย 'named' คุณหมายถึงคุณต้องการให้.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'},

ที่จริงแล้วดูเหมือนว่าจะมีวิธีหนึ่งในการตั้งชื่อฟังก์ชั่นลูกศร (อย่างน้อยที่สุดของ chrome 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);
}

เพื่อเขียนฟังก์ชั่น arrow ชื่อคุณสามารถเพื่อนตัวอย่างร้องซึ่งฉันมีชั้นชื่อ LoginClass และภายในชั้นนี้ฉันเขียนลูกศรชื่อฟังก์ชั่นชื่อsuccessAuth ชั้น LoginClass {

    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();