Fungsi Arrow JavaScript

Dalam tutorial ini, anda akan belajar mengenai fungsi anak panah JavaScript dengan bantuan contoh.

Fungsi panah adalah salah satu ciri yang diperkenalkan dalam versi ES6 JavaScript. Ini membolehkan anda membuat fungsi dengan cara yang lebih bersih berbanding dengan fungsi biasa. Contohnya,
fungsi ini

 // function expression let x = function(x, y) ( return x * y; )

boleh ditulis sebagai

 // using arrow functions let x = (x, y) => x * y;

menggunakan fungsi anak panah.

Sintaks Fungsi Panah

Sintaks fungsi anak panah adalah:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Di sini,

  • myFunction adalah nama fungsi
  • arg1, arg2,… argN adalah argumen fungsi
  • statement(s) adalah badan fungsi

Sekiranya badan mempunyai pernyataan atau ungkapan tunggal, anda boleh menulis fungsi anak panah sebagai:

 let myFunction = (arg1, arg2,… argN) => expression

Contoh 1: Fungsi Anak Panah Tanpa Hujah

Sekiranya fungsi tidak mengambil argumen, maka anda harus menggunakan tanda kurung kosong. Sebagai contoh,

 let greet = () => console.log('Hello'); greet(); // Hello

Contoh 2: Fungsi Panah dengan Satu Hujah

Sekiranya fungsi hanya mempunyai satu argumen, anda boleh menghilangkan tanda kurung. Sebagai contoh,

 let greet = x => console.log(x); greet('Hello'); // Hello

Contoh 3: Fungsi Anak Panah sebagai Ungkapan

Anda juga boleh membuat fungsi secara dinamik dan menggunakannya sebagai ungkapan. Sebagai contoh,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Contoh 4: Fungsi Panah Multiline

Sekiranya badan fungsi mempunyai banyak pernyataan, anda perlu memasukkannya ke dalam kurungan keriting (). Sebagai contoh,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

ini dengan Fungsi Arrow

Di dalam fungsi biasa, kata kunci ini merujuk kepada fungsi di mana ia dipanggil.

Walau bagaimanapun, thistidak dikaitkan dengan fungsi anak panah. Fungsi anak panah tidak ada yang tersendiri this. Oleh itu, setiap kali anda memanggil this, ia merujuk kepada ruang lingkup induknya. Sebagai contoh,

Di dalam fungsi biasa

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Pengeluaran

 25 Tetingkap yang tidak ditentukan ()

Di sini, this.agebahagian dalam this.sayName()dapat dicapai kerana this.sayName()kaedah objek.

Namun, innerFunc()adalah fungsi normal dan this.agetidak dapat diakses kerana thismerujuk kepada objek global (Window object di browser) Oleh itu, this.agedi dalam innerFunc()fungsi memberi undefined.

Di dalam fungsi anak panah

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Pengeluaran

 25 25

Di sini, innerFunc()fungsi ditakrifkan menggunakan fungsi anak panah. Dan di dalam fungsi anak panah, thismerujuk kepada skop ibu bapa. Oleh itu, this.agememberi 25 .

Hujah Mengikat

Fungsi biasa mempunyai argumen yang mengikat. Itulah sebabnya apabila anda menyampaikan argumen ke fungsi biasa, anda dapat mengaksesnya menggunakan argumentskata kunci. Sebagai contoh,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Fungsi anak panah tidak mempunyai argumen yang mengikat.

Apabila anda cuba mengakses argumen menggunakan fungsi anak panah, ia akan memberikan kesalahan. Sebagai contoh,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Untuk menyelesaikan masalah ini, anda boleh menggunakan sintaks spread. Sebagai contoh,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Fungsi Panah dengan Janji dan Panggilan Balik

Fungsi anak panah memberikan sintaks yang lebih baik untuk menulis janji dan panggilan balik. Sebagai contoh,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

boleh ditulis sebagai

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Perkara Yang Harus Anda Elakkan Dengan Fungsi Panah

1. Anda tidak boleh menggunakan fungsi anak panah untuk membuat kaedah di dalam objek.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Anda tidak boleh menggunakan fungsi anak panah sebagai konstruktor . Sebagai contoh,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Catatan : Fungsi panah diperkenalkan pada ES6 . Beberapa penyemak imbas mungkin tidak menyokong penggunaan fungsi anak panah. Lawati sokongan JavaScript Arrow Function untuk mengetahui lebih lanjut.

Artikel menarik...