• Terjemahan

Fungsi panah gemuk (=>), juga dikenal sebagai fungsi panah, adalah fungsi yang benar-benar baru di ECMAScript 2015 (sebelumnya dikenal sebagai ES6). Jika rumornya bisa dipercaya, maka di ECMAScript 2015 => sintaksis mulai digunakan sebagai pengganti –> sintaksis di bawah pengaruh CoffeeScript. Juga, kesamaan konteks mentransfer hal ini.

Fungsi panah memiliki dua tujuan utama: untuk memberikan sintaksis yang lebih ringkas; memastikan bahwa leksikal this diteruskan dengan cakupan induk. Mari kita lihat lebih dekat satu per satu!

Sintaks fungsi baru

Sintaks fungsi JavaScript klasik bersifat kaku, baik itu fungsi dengan satu variabel atau halaman dengan banyak fungsi. Setiap kali Anda mendeklarasikan suatu fungsi, Anda perlu menulis function()(). Kebutuhan akan sintaks fungsi yang lebih ringkas adalah salah satu alasan mengapa CoffeeScript menjadi sangat populer pada masa itu. Kebutuhan ini terutama terlihat jelas dalam kasus fungsi panggilan balik kecil. Mari kita lihat rantai Promise:
fungsi getVerifiedToken(pemilih) ( kembalikan getUsers(pemilih) .then(fungsi (pengguna) ( kembalikan pengguna; )).lalu(verifyUser) .then(fungsi (pengguna, terverifikasiToken) ( kembalikan terverifikasiToken; )) .catch(fungsi (err ) (log(err.stack); ));
Di atas Anda dapat melihat kode yang kurang lebih mudah dicerna yang ditulis menggunakan sintaks fungsi klasik dalam JavaScript. Dan seperti inilah kode yang sama, ditulis ulang menggunakan sintaks panah:
fungsi getVERIFIKASIToken(pemilih) ( kembalikan getUsers(pemilih) .then(pengguna => pengguna) .then(verifyUser) .then((pengguna, terverifikasiToken) => terverifikasiToken) .catch(err => log(err.stack)); )
Di sini Anda perlu memperhatikan beberapa poin penting:

• Kami kehilangan fungsi dan () karena fungsi panggilan balik kami ditulis dalam satu baris.
• Kami telah menghapus (). Mereka sekarang tidak membungkus daftar argumen ketika hanya ada satu argumen (argumen lain dianggap sebagai pengecualian; misalnya, (...args) => ...).
• Kami menyingkirkan kata kunci return. Dengan menghapus (), kami mengizinkan fungsi panah satu baris untuk melakukan pengembalian implisit (dalam bahasa lain, fungsi seperti itu sering disebut fungsi lambda).

Mari kita sekali lagi memperhatikan poin terakhir. Pengembalian implisit hanya terjadi dalam kasus fungsi panah satu baris. Ketika fungsi panah didefinisikan dengan (), meskipun itu adalah pernyataan terpisah, tidak ada pengembalian implisit yang terjadi.
const getVERIFIKASIToken = pemilih => ( kembalikan getUsers() .then(users => pengguna) .then(verifyUser) .then((user, terverifikasiToken) => terverifikasiToken) .catch(err => log(err.stack)); )
Di sinilah kesenangan dimulai. Karena fungsi kita hanya memiliki satu operator, kita dapat menghapus () dan kodenya akan sangat mirip dengan sintaks CoffeeScript:
const getVERIFIKASIToken = pemilih => getUsers() .then(pengguna => pengguna) .then(verifyUser) .then((pengguna, terverifikasiToken) => terverifikasiToken) .catch(err => log(err.stack));
Padahal kode di atas ditulis menggunakan sintaks ES2015. (Saya juga terkejut bahwa ini dikompilasi dengan sempurna.) Ketika kita berbicara tentang fungsi panah dengan satu pernyataan, ini tidak berarti bahwa pernyataan tersebut tidak boleh menempati lebih dari satu baris, untuk kemudahan penggunaan.

Namun, ada satu kelemahan signifikan: dengan menghapus () dari fungsi panah, bagaimana kita bisa mengembalikan objek kosong? Misalnya sama ()?
const objek kosong =() =>(); objek kosong(); // ?
Dan inilah tampilan seluruh kodenya:
fungsi () ( kembalikan 1; ) () => ( kembalikan 1; ) () => 1 fungsi (a) ( kembalikan a * 2; ) (a) => ( kembalikan a * 2; ) (a) => a * 2 a => a * 2 fungsi (a, b) ( kembalikan a * b; ) (a, b) => ( kembalikan a * b; ) (a, b) => a * b fungsi () ( mengembalikan argumen; ) (...args) => args () => () // tidak terdefinisi () => (()) // ()

Leksikal ini

Kisah tentang bagaimana mereka mencoba menyelundupkan ini ke dalam JavaScript telah menjadi debu. Setiap fungsi di JavaScript menetapkan konteksnya sendiri untuk ini. Konteks ini, di satu sisi, sangat mudah untuk dilewati, namun di sisi lain, sangat mengganggu. Pada contoh di bawah ini Anda dapat melihat kode jam yang memperbarui data setiap detik menggunakan jQuery:
$(".waktu saat ini").masing-masing(fungsi () ( setInterval(fungsi () ( $(ini).teks(Tanggal.sekarang()); ), 1000); ));
Saat kami mencoba merujuk ke elemen DOM yang ditentukan melalui masing-masing dalam panggilan balik setInterval, sayangnya, kami mendapatkan ini yang sama sekali berbeda - yang dimiliki oleh panggilan balik tersebut. Anda dapat menyiasatinya dengan menetapkan variabel that atau self:
$(".saat ini").masing-masing(fungsi () ( var self = ini; setInterval(fungsi () ( $(mandiri).teks(Tanggal.sekarang()); ), 1000); ));
Fungsi panah gemuk dapat membantu memecahkan masalah ini karena tidak memiliki this:
$(".waktu saat ini").masing-masing(fungsi () ( setInterval(() => $(ini).teks(Tanggal.sekarang()), 1000); ));

Bagaimana dengan argumennya?

Salah satu kelemahan fungsi panah adalah tidak memiliki variabel argumen sendiri, seperti fungsi biasa:
fungsi log(pesan) ( const print = () => console.log(argumen); print(`LOG: $(msg)`); ) log("halo"); // Halo
Mari kita ulangi bahwa fungsi panah tidak memiliki argumen ini dan tidak ada argumen. Namun, dengan mempertimbangkan hal ini, Anda masih bisa meneruskan argumen ke fungsi panah menggunakan parameter rest (juga dikenal sebagai operator spread):
fungsi log(pesan) ( const print = (...args) => console.log(args); print(`LOG: $(msg)`); ) log("halo"); //LOG: halo

Bagaimana dengan generator?

Fungsi panah tebal tidak dapat digunakan sebagai generator. Tidak ada pengecualian atau solusi. Dot.

Kesimpulan

Fungsi panah gemuk adalah salah satu alasan mengapa saya sangat menyukai JavaScript. Sangat menggoda untuk mulai menggunakan => alih-alih fungsi. Saya telah melihat seluruh perpustakaan yang hanya menggunakan opsi =>. Namun, menurut saya ini tidak bijaksana. Lagi pula, => memiliki banyak keunikan dan fungsi tersembunyi. Saya sarankan menggunakan fungsi panah hanya jika Anda memerlukan fungsionalitas baru:

• Fungsi dengan pernyataan tunggal yang segera kembali;
• fungsi yang perlu bekerja dengan ini dengan lingkup induk.

ES6 hari ini

Jadi apakah mungkin untuk memanfaatkan ES6 saat ini? Penggunaan transpiler telah menjadi hal yang lumrah dalam beberapa tahun terakhir. Baik pengembang biasa maupun perusahaan besar tidak ragu untuk menggunakannya.

Halo semua! Pada artikel ini kita akan melihat, apa saja fungsi panah di ES6 dan cara menggunakannya.

Fungsi panah adalah fungsi yang ditulis menggunakan operator panah( => ).

Mari kita lihat contohnya segera:

Misalkan penjumlahan = (x, y) => x + y;
konsol.log(tambahkan(5, 2));

Sebagai hasil dari menjalankan fungsi ini, kita akan melihat angka 7 di konsol.

Pertama, kita masukkan argumen dalam tanda kurung, lalu kita beri tanda panah, lalu kita tulis kode fungsi itu sendiri. Dalam kasus kami, ini hanya mengambil dua angka dan menjumlahkannya. Secara teori, ini sama dengan ekspresi fungsi V ES5. Jika Anda menggunakan Babel atau kompiler serupa, kemungkinan besar mereka akan menulis sesuatu seperti ini:

Var tambah = fungsi tambah(x, y) (
kembalikan x + y;
};

Jika fungsi Anda hanya menggunakan satu parameter, tanda kurung bersifat opsional.

Misalkan kuadrat = x => x*x;

Fungsi ini hanya membutuhkan satu argumen dan mengkuadratkan bilangan yang diberikan.

Fungsi tanpa parameter:

Misalkan fungsi = () => 77;

Jika fungsi Anda berisi beberapa baris, pertama, Anda perlu menggunakan kurung kurawal, dan kedua, pastikan untuk menulis apa yang dikembalikan oleh fungsi tersebut, yaitu. gunakan kata kunci kembali.

Misalkan kalikan = (x, y) => (
misalkan hasil = x*y;
hasil pengembalian;
};

Jika Anda perlu mengembalikan objek literal, Anda perlu membungkusnya dalam tanda kurung:

Misalkan getObject = () => (( merek: "BMW" ));

Fungsi pemanggilan mandiri terlihat seperti ini:

Pembaruan terakhir: 04/09/2018

Fungsi panah adalah versi singkat dari fungsi reguler. Fungsi panah dibentuk dengan menggunakan tanda panah (=>), diawali dengan parameter fungsi dalam tanda kurung, dan diikuti dengan isi fungsi itu sendiri. Misalnya:

Misalkan jumlah = (x, y) => x + y; misalkan a = jumlah(4, 5); // 9 misalkan b = jumlah(10, 5); // 15

Dalam hal ini, fungsi (x, y) => x + y menambahkan dua angka dan ditetapkan ke jumlah variabel. Fungsi ini mengambil dua parameter - x dan y. Tubuhnya adalah jumlah dari nilai parameter ini. Dan karena setelah panah sebenarnya ada nilai tertentu yang mewakili jumlah angka, fungsi akan mengembalikan nilai ini. Dan kita dapat memanggil fungsi ini melalui variabel penjumlahan dan memasukkan hasilnya ke dalam variabel a dan b.

Jika panah diikuti oleh operasi atau ekspresi yang mengembalikan suatu nilai, maka nilai tersebut sebenarnya dikembalikan dari fungsi panah. Namun ekspresi yang tidak mengembalikan apa pun dan hanya melakukan beberapa tindakan juga dapat digunakan sebagai isi fungsi:

Misalkan jumlah = (x, y) => console.log(x + y); jumlah(4, 5); // 9 jumlah(10, 5); // 15

Dalam hal ini, fungsi console.log() tidak mengembalikan apa pun, dan oleh karena itu fungsi penjumlahan juga tidak mengembalikan hasil apa pun.

Jika suatu fungsi mengambil satu parameter, maka tanda kurung disekitarnya dapat dihilangkan:

Var persegi = n => n * n; konsol.log(persegi(5)); // 25 konsol.log(persegi(6)); // 36 konsol.log(persegi(-7)); // 49

Jika isi suatu fungsi merepresentasikan sekumpulan ekspresi, maka ekspresi tersebut diapit oleh kurung kurawal:

Var square = n => ( biarkan hasil = n * n; kembalikan hasil; ) console.log(square(5)); // 25

Untuk mengembalikan hasil dari suatu fungsi dalam kasus ini, gunakan pernyataan return standar.

Perhatian khusus harus diberikan pada kasus ketika fungsi panah mengembalikan objek:

Misalkan pengguna = (Namapengguna,Umur pengguna) => ((nama:Namapengguna, umur:Umur pengguna)); biarkan tom = pengguna("Tom", 34); biarkan bob = pengguna("Bob", 25); console.log(tom.nama, tom.usia); // "Tom", 34 console.log(bob.nama, bob.usia); // "Bob", 25

Suatu objek juga didefinisikan menggunakan kurung kurawal, tetapi objek tersebut diapit tanda kurung.

Jika fungsi panah tidak mengambil parameter apa pun, maka tanda kurung kosong ditempatkan:

Var halo = ()=> console.log("Halo Dunia"); Halo(); // Halo Dunia halo(); // Halo Dunia

12 jawaban

Apa ini

Ini adalah fungsi panah. Fungsi panah adalah sintaksis singkat yang diperkenalkan di ECMAscript 6 yang dapat digunakan dengan cara yang mirip dengan cara Anda menggunakan ekspresi fungsi. Dengan kata lain, Anda sering kali dapat menggunakannya sebagai pengganti ekspresi seperti function (foo) (...) . Namun keduanya mempunyai beberapa perbedaan penting. Misalnya, mereka tidak mengikat nilai-nilai ini (lihat pembahasan di bawah).

Fungsi panah adalah bagian dari spesifikasi ECMAscript 6. Fungsi tersebut belum didukung di semua browser, tetapi didukung sebagian atau seluruhnya di Node v. 4.0+ dan di sebagian besar browser modern yang digunakan pada tahun 2018. (Di bawah ini adalah sebagian daftar browser yang didukung).

Dari dokumentasi Mozilla :

Ekspresi fungsi panah (juga dikenal sebagai fungsi panah gemuk) memiliki sintaksis yang lebih pendek daripada ekspresi fungsi dan secara leksikal mengikat nilai this (tidak mengikat this , argument , super , atau new.target miliknya sendiri). Fungsi panah selalu anonim. Ekspresi fungsi ini paling cocok untuk fungsi non-metode dan tidak dapat digunakan sebagai konstruktor.

Catatan tentang cara kerjanya di fungsi panah

Salah satu fitur paling nyaman dari fungsi panah tersembunyi dalam teks di atas:

Fungsi panah... secara leksikal mengikat nilai this (tidak mengikat thisnya sendiri...)

Secara sederhana, ini berarti fungsi panah menyimpan nilai this dari konteksnya dan tidak memiliki this sendiri. Fungsi tradisional dapat mengikat nilai ini sendiri, bergantung pada bagaimana nilai tersebut didefinisikan dan dipanggil. Ini mungkin memerlukan banyak senam, seperti self = this; dll. untuk mengakses atau memanipulasi ini dari satu fungsi di dalam fungsi lainnya. Untuk informasi lebih lanjut mengenai topik ini, lihat penjelasan dan contoh dalam dokumentasi Mozilla.

Kode sampel

Contoh (juga dari dokumen):

Var a = [ "Kami" terjaga sepanjang malam "sampai matahari", "Kami" terjaga sepanjang malam untuk mendapatkan sesuatu", "Kami" terjaga sepanjang malam untuk bersenang-senang", "Kami" terjaga sepanjang malam untuk mendapatkan lucky" ]; // Kedua tugas ini setara: // Jadul: var a2 = a.map(function(s)( return s.length )); // ECMAscript 6 menggunakan fungsi panah var a3 = a.map (s => s.length); // a2 dan a3 akan sama

Catatan Kompatibilitas

Anda dapat menggunakan fungsi panah di Node, tetapi dukungan browser tidak sepenuhnya benar.

Dukungan browser untuk fungsi ini telah meningkat secara signifikan, namun masih belum cukup luas untuk sebagian besar aplikasi berbasis browser. Mulai 12 Desember 2017, ini didukung dalam versi saat ini:

• Chrome (vs. 45+)
• Firefox (vs. 22+)
• Tepi (vs. 12+)
• Opera (v.32+)
• Peramban Android (versi 47+)
• Opera Seluler (versi 33+)
• Chrome untuk Android (versi 47+)
• Firefox untuk Android (versi 44+)
• Safari (versi 1 0+)
• iOS Safari (versi 10.2+)
• Internet Samsung (v.5+)
• Peramban Baidu (v.7.12+)

Tidak didukung di:

• IE (sampai Pasal 11)
• Opera Mini (hingga versi 8.0)
• Browser Blackberry (sampai versi 10)
• IE Mobile (hingga versi 11)
• UC Browser untuk Android (hingga versi 11.4)
• QQ (hingga versi 1.2)

Anda dapat menemukan informasi lebih lanjut (dan lebih terkini) di CanIUse.com (tidak ada afiliasi).

Ini dikenal sebagai fungsi panah, bagian dari spesifikasi ECMAScript 2015...

var foo = ["a", "ab", "abc"]; var bar = foo.map(f => f.length); konsol.log(bar); // 1,2,3

Sintaks yang lebih pendek dari sebelumnya:

// < ES6: var foo = ["a", "ab", "abc"]; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3

Hal menakjubkan lainnya adalah leksikal ini... Biasanya, Anda melakukan sesuatu seperti:

function Foo() ( this.name = nama; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = function() ( var self = ini; setInterval(function() ( // ini adalah Window, bukan Foo (), seperti yang Anda harapkan console.log(this); // // itulah alasan kami menugaskan ulang ini ke self sebelum setInterval() console.log(self.count++), 1000) ) new Foo();

Tapi ini bisa ditulis ulang menggunakan panah seperti ini:

function Foo() ( this.name = nama; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = function() ( setInterval(() => ( console.log(this); // console.log(ini.hitungan); // 1, 2, 3 ini.hitung++), 1000) ) foo baru();

Ini akan menjadi "ekspresi fungsi panah" yang diperkenalkan di ECMAScript 6.

Untuk tujuan sejarah (jika halaman wiki berubah nanti), ini adalah:

Ekspresi fungsi panah memiliki sintaksis yang lebih pendek daripada ekspresi fungsi dan secara leksikal mengikat nilai tersebut. Fungsi panah selalu anonim.

Juga dikenal sebagai Fungsi Panah Gemuk. Ini adalah cara sederhana dan jelas untuk menulis ekspresi fungsi, seperti function() () .

Fungsi Panah dapat menghilangkan kebutuhan akan function , return , dan () saat mendefinisikan fungsi. Itu adalah satu baris yang mirip dengan ekspresi lambda di Java atau Python.

Contoh tanpa parameter

const antrian = ["Dave", "Sarah", "Sharon"]; const pelanggan berikutnya = () => antrian; console.log(nextCustomer()); // "Dave"

Jika Anda perlu melakukan beberapa pernyataan dalam fungsi panah yang sama, contoh ini mengharuskan Anda menyertakan antrian dalam kurung kurawal () . Dalam hal ini, pernyataan return tidak dapat dihilangkan.

Contoh dengan 1 parameter

const antrian = ["Dave", "Sarah", "Sharon"]; const addCustomer = nama => ( antrian.push(nama); ); addCustomer("Toby"); console.log(antrian); // ["Dave", "Sarah", "Sharon", "Toby"]

Anda dapat menghilangkan () dari di atas.

Jika hanya ada satu parameter, tanda kurung () di sekitar parameter dapat dihilangkan.

Contoh dengan banyak parameter

const addNumbers = (x, y) => x + y console.log(addNumbers(1, 5)); // 6

Contoh yang berguna

const buah = [ (nama: "Apel", harga: 2), (nama: "Pisang", harga: 3), (nama: "Pir", harga: 1) ];

Jika kita ingin mendapatkan harga tiap buah dalam satu array, di ES5 kita bisa melakukan:

Buah-buahan.peta(fungsi(buah) ( return buah.harga; )); //

Di ES6, dengan fungsi panah baru, kita dapat membuatnya lebih ringkas:

Buah-buahan.peta(buah => buah.harga); //

Informasi lebih lanjut tentang fungsi panah dapat ditemukan.

Kompatibilitas peramban

• YAITU: belum didukung
• Tepi: 12+ (Semua versi)
• Firefox: 22+
• Krom: 45+
• Safari: 10+
• iOS Safari: 10.2+
• Peramban Android: 56+

Untuk informasi kompatibilitas browser terkini, silakan kunjungi

Seperti yang dikatakan orang lain, ini adalah sintaks baru untuk membuat fungsi.

Namun, jenis fungsi ini berbeda dari biasanya:

Mereka mengikat nilai ini. Seperti yang dijelaskan dalam spesifikasi,

ArrowFunction tidak mendefinisikan pengikatan lokal untuk argument , super , this , atau new.target . Referensi apa pun ke argumentasi, super, ini, atau new.target dalam ArrowFunction menyelesaikan pengikatan dalam lingkungan leksikal. Biasanya ini akan menjadi lingkungan fungsional sekaligus fungsi.

Meskipun ArrowFunction mungkin berisi referensi ke super , objek fungsi yang dibuat pada langkah 4 tidak diubah menjadi metode dengan mengeksekusi MakeMethod . ArrowFunction yang mereferensikan super selalu terkandung dalam fungsi non-panah, dan implementasi super yang diperlukan dapat diakses melalui cakupan yang ditangkap oleh objek fungsi ArrowFunction.

• Mereka adalah non-konstruktor.

  Ini berarti bahwa mereka tidak memiliki metode [] internal dan oleh karena itu tidak dapat dipakai, misalnya

  Var f = a => a; f(123); // 123 f baru(); // TypeError: f bukan konstruktor

Menambahkan contoh CRUD sederhana dengan panah

//Fungsi Panah var pelanggan = [ ( nama: "Dave", kontak: "9192631770" ), ( nama: "Sarah", kontak: "9192631770" ), ( nama: "Akhil", kontak: "9928462656" )] , // Tidak Ada Param READ getFirstCustomer = () => ( console.log(this); pelanggan kembali; ); console.log("Pelanggan Pertama "+JSON.stringify(getFirstCustomer())); // "Dave" //1 Param SEARCH getNthCustomer = indeks=>( if(index>customers.length) ( return "Tidak ada hal seperti itu"; ) else( pelanggan kembali; ) ); console.log("Pelanggan ke-N adalah " +JSON.stringify(getNthCustomer(1))); //2params ADD addCustomer = (nama, kontak)=> pelanggan.push(( "nama": nama, "kontak":kontak )); addCustomer("Hitesh","8888813275"); console.log("Pelanggan Ditambahkan "+JSON.stringify(pelanggan)); //2 param UPDATE updateCustomerName = (index, newName)=>(customers.name= newName); updateCustomerName(customers.length-1,"HiteshSahu"); console.log("Pelanggan yang Diperbarui "+JSON.stringify(pelanggan)); //1 param DELETE deleteCustomer = (customerToRemove) => pelanggan.pop(customerToRemove); hapusPelanggan(getPelangganPertama()); console.log("Pelanggan yang Dihapus "+JSON.stringify(pelanggan));

Seperti semua jawaban lainnya, ini adalah bagian dari sintaks fungsi ES2015. Secara khusus, ini bukan operator, ini adalah token token yang memisahkan parameter dari isi: ArrowFunction: ArrowParameters => ConciseBody . Misalnya. (params) => ( /* badan */ ) .

Dalam javascript, simbol => adalah simbol ekspresi fungsi panah. Ekspresi fungsi panah tidak memiliki pengikatan this sendiri dan oleh karena itu tidak dapat digunakan sebagai fungsi konstruktor. Misalnya:

varwords = "hai dari objek luar"; let obj = ( kata-kata: "hai dari dalam objek", talk1: () => (console.log(this.words)), talk2: function () (console.log(this.words)) ) obj.talk1( ); // tidak memiliki pengikatan this sendiri, === window obj.talk2(); // memiliki pengikatan this sendiri, ini adalah obj

Aturan penggunaan fungsi panah:

• Jika ada hanya satu argumen, Anda dapat menghilangkan tanda kurung argumen.
• Jika Anda mengembalikan ekspresi dan melakukannya pada baris yang sama, Anda dapat menghilangkan pernyataan () dan return

Misalnya:

misalkan kali2 = val => val * 2; // Letaknya di baris yang sama dan mengembalikan ekspresi sehingga () dikomit dan ekspresi kembali secara implisit // hanya ada satu argumen, oleh karena itu tanda kurung di sekitar argumen dihilangkan console.log(times2(3));

Tidak puas dengan jawaban lain. Jawaban dengan suara terbanyak pada 13/3/2019 ternyata salah.

Versi singkat singkat dari apa yang => maksudnya adalah cara pintas menulis suatu fungsi Dan untuk menghubungkannya ke arus ini

Const foo = a => a * 2;

Jalan pintas yang efektif untuk

Const foo = function(a) ( return a * 2; ).bind(ini);

Anda dapat melihat semua hal yang telah dipotong. Kita tidak memerlukan function , return , .bind(this) , tanda kurung atau tanda kurung

Contoh fungsi panah yang sedikit lebih panjang bisa jadi

Const foo = (lebar, tinggi) => ( luas const = lebar * tinggi; luas kembali; );

Terlihat bahwa jika kita memerlukan beberapa argumen fungsi, kita memerlukan tanda kurung, dan jika kita ingin menulis lebih dari satu ekspresi, kita memerlukan kurung kurawal dan return yang eksplisit.

Penting untuk memahami bagian .bind dan ini adalah topik besar. Ini ada hubungannya dengan apa artinya ini dalam JavaScript.

SEMUA fungsi memiliki parameter implisit yang disebut this . Cara pengaturannya saat memanggil suatu fungsi bergantung pada cara pemanggilan fungsi tersebut.

menerima

Fungsi foo() ( console.log(ini); )

Jika Anda menyebutnya oke

Fungsi foo() ( console.log(ini); ) foo();

ini akan menjadi objek global.

Jika Anda berada dalam mode ketat

"gunakan ketat"; fungsi foo() ( console.log(ini); ) foo(); // atau fungsi foo() ( "use strict"; console.log(this); ) foo();

Tidak akan terdefinisi

Anda dapat mengaturnya secara langsung menggunakan panggilan atau lamaran

Fungsi foo(msg) ( console.log(msg, this); ) const obj1 = (abc: 123) const obj2 = (def: 456) foo.call(obj1, "hello"); // mencetak Halo (abc: 123) foo.apply(obj2, ["hai"]); // mencetak Hai (def: 456)

Anda juga dapat mengaturnya secara implisit menggunakan operator titik.

Fungsi foo(msg) ( console.log(msg, this); ) const obj = ( abc: 123, bar: foo, ) obj.bar("Hola"); // mencetak Hola (abc:123, bar: f)

Masalahnya muncul ketika Anda ingin menggunakan suatu fungsi sebagai panggilan balik atau pendengar. Anda membuat kelas dan ingin menetapkan fungsi sebagai panggilan balik yang mengakses instance kelas.

Kelas ShowName ( konstruktor(nama, elem) ( this.name = nama; elem.addEventListener("click", function() ( console.log(this.name); // tidak akan berfungsi )); ) )

Kode di atas tidak akan berfungsi karena ketika elemen memunculkan acara dan memanggil fungsi, nilai this tidak akan menjadi turunan dari kelas.

Salah satu cara umum untuk mengatasi masalah ini adalah dengan menggunakan .bind

Kelas ShowName ( konstruktor(nama, elem) ( this.name = nama; elem.addEventListener("klik", function() ( console.log(this.name); ).bind(this); //<=========== ADDED! =========== } }

Karena sintaks panah melakukan hal yang sama, kita dapat menulis

Kelas ShowName ( konstruktor(nama, elem) ( this.name = nama; elem.addEventListener("click",() => ( console.log(this.name); )); ) )

bind secara efektif membuat fungsi baru. Jika ikatan tidak ada, Anda bisa membuatnya sendiri seperti ini

Fungsi mengikat(funcitonToBind, valueToUseForThis) ( mengembalikan fungsi(...args) ( functionToBind.call(valueToUseForThis, ...args); )

Dalam JavaScript lama tanpa operator penyebaran, hal ini akan terjadi

Fungsi mengikat(funcitonToBind, valueToUseForThis) ( mengembalikan fungsi() ( functionToBind.apply(valueToUseForThis, argumen); )

Memahami bahwa kode memerlukan pemahaman tentang penutupan, tetapi versi singkat dari bind membuat fungsi baru yang selalu memanggil fungsi asli dengan nilai this yang terikat padanya. Fungsi panah melakukan hal yang sama karena merupakan jalan pintas untuk mengikat (ini)

Panah fungsi, yang diwakili oleh simbol (=>), membantu Anda membuat fungsi dan metode anonim. Ini menghasilkan sintaksis yang lebih pendek. Misalnya, di bawah ini adalah fungsi Tambah sederhana yang mengembalikan penjumlahan dua angka.

Fungsi Tambah(angka1, angka2)( kembalikan angka1 + angka2; )

Fungsi di atas menjadi lebih pendek menggunakan sintaks Panah seperti yang ditunjukkan di bawah ini.

Kode di atas terdiri dari dua bagian seperti terlihat pada gambar di atas:

Input: - Bagian ini menentukan parameter input untuk fungsi anonim.

Logikanya: - Bagian ini muncul setelah simbol "=>". Bagian ini memiliki logika fungsi sebenarnya.

Banyak pengembang percaya bahwa fungsi panah membuat sintaks Anda lebih pendek, sederhana, dan karenanya membuat kode Anda mudah dibaca.

Jika Anda mempercayai kalimat di atas, izinkan saya meyakinkan Anda bahwa itu hanyalah mitos. Jika Anda berpikir sejenak, fungsi yang ditulis dengan benar dengan nama jauh lebih mudah dibaca daripada fungsi samar yang dibuat dalam satu baris menggunakan simbol panah.

Kegunaan utama fungsi panah adalah untuk memastikan bahwa kode dieksekusi dalam konteks pemanggil.

Lihat kode di bawah ini yang mendefinisikan "konteks" variabel global, variabel global ini dapat diakses di dalam fungsi "SomeOtherMethod" yang dipanggil dari metode lain "SomeMethod".

SomeMethod ini memiliki variabel konteks lokal. Sekarang, karena SomeOtherMethod dipanggil dari "SomeMethod", kami berharap ini menampilkan "konteks lokal", tetapi ini menampilkan "konteks global".

Var konteks = "konteks global"; function SomeOtherMethod())( alert(this.context); ) function SomeMethod())( this.context = "konteks lokal"; SomeOtherMethod(); ) var instance = new SomeMethod();

Namun jika Anda mengganti panggilan dengan fungsi panah, maka akan menampilkan "konteks lokal".

Var konteks = "konteks global"; function SomeMethod())( this.context = "konteks lokal"; SomeOtherMethod = () => ( alert(this.context); ) SomeOtherMethod(); ) var instance = new SomeMethod();

Saya menyarankan Anda untuk membaca tautan ini (Fungsi panah dalam JavaScript) yang menjelaskan semua skenario konteks javascript dan dalam hal ini konteks pemanggil tidak dipatuhi.

Anda juga dapat melihat demonya Fungsi panah dengan javascript di video YouTube ini, yang secara praktis menunjukkan istilah Konteks.

Mereka menjadi sangat modis, kami melihatnya di semua artikel baru. Dan, jika Anda tidak terbiasa, Anda akan kesulitan memahami kode modern (ES6) yang berisi fungsi panah.

Artikel ini tidak dimaksudkan untuk memberi tahu Anda kapan atau bagaimana menggunakannya. Saya hanya akan mencoba menjelaskan sintaks baru bagi mereka yang baru pertama kali melihatnya. Apakah Anda menggunakannya atau tidak, itu tidak penting, tetapi cepat atau lambat Anda akan tetap menemukannya di suatu tempat. Jadi lebih baik memahami mekanisme sintaks baru ini.

Berikut ini contoh kecilnya:

Const addOne = fungsi(n) ( kembalikan n + 1; )

Kode di atas dapat ditulis seperti ini:

Const addOne = (n) => ( kembalikan n + 1; )

Atau, dalam hal ini, lebih singkat lagi:

Const addSatu = (n) => n + 1;

Contoh kedua menggunakan kurung kurawal ( ... ), tetapi karena hanya satu baris kode, kurung kurawal dapat dihilangkan dan return tersirat, seperti terlihat pada contoh ketiga.

Satu parameter

Jika fungsi panah memiliki satu parameter, tanda kurung dapat dihilangkan:

// Dulu: someCallBack((hasil) => ( ... )) // Sekarang: someCallBack(hasil => ( ... ))

Namun jika tidak ada parameternya maka harus menggunakan tanda kurung buka dan tutup:

SomeCallBack(() => ( ... ))

Fungsi panggilan balik

Panah fungsi sangat berguna untuk callback. Mereka yang akrab dengan JavaScript akrab dengan cakupan leksikalnya, yang cukup rapi, namun dapat melakukan trik seperti ini ( ini):

Var_ini = ini; someCallBack(fungsi() ( _this.accessOuterScope(); ))

Ada beberapa variasi dari "_ini" ini (seperti "diri" atau "itu"), namun gagasannya sama. Dalam fungsi panggilan balik kita memerlukan akses ke versi cakupan luar, tetapi idenya sama. Dalam fungsi panggilan balik, kita memerlukan akses ke versi cakupan luar this , yang sekarang berbeda dari sebelumnya karena kita sedang membicarakan fungsi panggilan balik.

Dengan menggunakan fungsi panah, kita mendapatkan "cakupan blok" dan "ini", yang merupakan "ini" yang sama dalam kedua kasus. Artinya kode di atas dapat ditulis ulang tanpa _this = this:

SomeCallBack(() => ( this.accessOuterScope(); ))

"Pembungkus"

Mari kita bayangkan situasi seperti di React, di mana acaranya diKlik harus memanggil doSomething() , (), tetapi juga harus meneruskan argumen ke doSomething() (misalnya ID). Contoh ini sebenarnya tidak berfungsi:

} })

Kode akan berjalan, namun secara teknis ia akan segera memanggil doSomething() saat halaman dimuat. Untuk mengatasi masalah ini, beberapa pengembang mengacu pada fungsi wrapper:

Pengguna Const = React.createClass(function() ( render: function() ( return

), onClick: function() ( melakukan Sesuatu(ini.props.userId); ) ))

Tidak adanya tanda kurung di this.onClick berarti ini hanyalah referensi fungsi dan bukan pemanggilan fungsi.

Fungsi onClick() kini menjadi semacam pembungkus doSomething() . Dengan fungsi panah Anda dapat membuat “pembungkus” jenis ini:

Pengguna Const = React.createClass(function() ( render: function() ( return

} })

Sebagai alternatif, kita juga bisa menggunakan .bind() , yang tidak memerlukan pembungkus apa pun (fungsi panah atau apa pun):

Pengguna Const = React.createClass(function() ( render: function() ( return

} })

Dukungan browser untuk fungsi panah

Jika Anda memerlukan dukungan untuk browser selain versi terbaru krom Dan Firefox, menggunakan Transpiler Babel untuk mengonversi kode ES6 yang Anda tulis ke ES5.