Bagaimana cara menulis fungsi panah bernama di ES2015?

Saya memiliki fungsi yang saya coba konversi ke sintaks panah baru di ES6 . Ini adalah fungsi bernama:

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

Apakah ada cara untuk memberinya nama tanpa pernyataan var:

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

Jelas, saya hanya bisa menggunakan fungsi ini setelah saya mendefinisikannya. Sesuatu seperti berikut:

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

Apakah ada cara baru untuk melakukan ini di ES6 ?

Bagaimana cara menulis fungsi panah bernama di ES2015?

Anda melakukannya dengan cara Anda mengesampingkan dalam pertanyaan Anda: Anda meletakkannya di sisi kanan tugas atau penginisialisasi properti di mana variabel atau nama properti dapat digunakan sebagai nama oleh mesin JavaScript. Tidak ada yang lain cara untuk melakukannya, tetapi melakukan itu benar dan sepenuhnya dicakup oleh spesifikasi.

Per spec, fungsi ini memiliki nama yang benar, sayHello:

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

Ini didefinisikan dalam Penugasan Operator> Runtime Semantics: Evaluasi di mana ia menyebut operasi abstrakSetFunctionName (panggilan itu saat ini dalam langkah 1.e.iii).

Serupa dengan itu, Runtime Semantics: PropertyDefinitionEvaluation memanggil SetFunctionNamedan dengan demikian memberikan fungsi ini nama sebenarnya:

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

Mesin modern menetapkan nama internal fungsi untuk pernyataan seperti itu sudah; Edge masih memiliki bit yang membuatnya tersedia namepada instance fungsi di belakang flag runtime.

Misalnya, di Chrome atau Firefox, buka konsol web lalu jalankan cuplikan ini:

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

Di Chrome 51 dan di atasnya dan Firefox 53 dan di atasnya (dan Edge 13 dan di atasnya dengan bendera eksperimental), saat Anda menjalankannya, Anda akan melihat:

foo.name adalah: foo
Kesalahan
    di foo (http://stacksnippets.net/js:14:23)
    di http://stacksnippets.net/js:17:3

Perhatikan foo.name is: foodan Error...at foo.

Di Chrome 50 dan sebelumnya, Firefox 52 dan sebelumnya, dan Edge tanpa bendera eksperimental, Anda akan melihat ini karena mereka tidak memiliki Function#nameproperti (belum):

foo.name adalah: 
Kesalahan
    di foo (http://stacksnippets.net/js:14:23)
    di http://stacksnippets.net/js:17:3

Perhatikan bahwa nama ini hilang dari foo.name is:, tetapi yang ditampilkan dalam jejak stack. Hanya saja sebenarnya mengimplementasikan name properti pada fungsi itu prioritas lebih rendah daripada beberapa fitur ES2015 lainnya; Chrome dan Firefox memilikinya sekarang; Edge memilikinya di belakang bendera, mungkin itu tidak akan berada di belakang bendera lebih lama.

Jelas, saya hanya bisa menggunakan fungsi ini setelah saya mendefinisikannya

Benar. Tidak ada sintaks deklarasi fungsi untuk fungsi panah, hanya sintaks ekspresi fungsi , dan tidak ada panah yang setara dengan nama dalam ekspresi fungsi bernama gaya lama ( var f = function foo() { };). Jadi tidak ada yang setara dengan:

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

Anda harus memecahnya menjadi dua ekspresi (saya berpendapat Anda harus tetap melakukannya ) :

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

Tentu saja, jika Anda harus meletakkan ini di mana satu ekspresi diperlukan, Anda selalu dapat ... menggunakan fungsi panah:

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

Saya tidak mengatakan itu cantik, tetapi bekerja jika Anda benar-benar membutuhkan pembungkus ekspresi tunggal.

Tidak. Sintaks panah adalah bentuk pendek untuk fungsi anonim. Fungsi anonim, yah, anonim.

Fungsi-fungsi yang disebutkan didefinisikan dengan functionkata kunci.

Jika dengan 'bernama', berarti Anda ingin .nameproperti fungsi panah Anda disetel, Anda beruntung.

Jika fungsi panah didefinisikan di sisi kanan ekspresi penugasan, mesin akan mengambil nama di sisi kiri dan menggunakannya untuk mengatur fungsi panah .name, misalnya

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

sayHello.name //=== 'sayHello'

Karena itu, pertanyaan Anda tampaknya lebih 'dapatkah saya mendapatkan fungsi panah untuk diangkat?'. Jawabannya adalah jawaban "tidak", saya rasa.

Tampaknya ini akan dimungkinkan dengan ES7: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions

Contoh yang diberikan adalah:

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

Tubuh fungsi panah ES6 berbagi leksikal yang sama ini dengan kode yang mengelilinginya, yang memberi kita hasil yang diinginkan karena cara penginisialisasi properti ES7 dicakup.

Perhatikan bahwa untuk mendapatkan ini bekerja dengan babel saya perlu mengaktifkan sintaks ES7 tahap 0 paling eksperimental. Dalam file webpack.config.js saya, saya memperbarui babel loader seperti:

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

Sebenarnya sepertinya salah satu cara untuk memberi nama fungsi panah (setidaknya pada chrome 77 ...) adalah dengan melakukan ini:

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

untuk menulis fungsi panah bernama Anda dapat menggunakan contoh di bawah ini, di mana saya memiliki kelas bernama LoginClass dan di dalam kelas ini saya menulis sebuah panah bernama fungsi , bernama successAuth kelas LoginClass {

    constructor() {

    }

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

    }

}

INI ES6

Ya saya pikir apa yang Anda kejar adalah sesuatu seperti ini:

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

Anda bisa melewati bagian fungsi dan bagian panah untuk membuat fungsi. Contoh:

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