Fungsi anak panah di JavaScript: Sintaks Fat & Ringkas

pemahaman mendalam mengenai fungsi anak panah JavaScript. Kami akan menunjukkan kepada anda cara menggunakan sintaks anak panah ES6, serta beberapa kesilapan umum untuk mengetahui apabila menggunakan fungsi anak panah dalam kod anda. Anda akan melihat banyak contoh yang menggambarkan bagaimana ia berfungsi.

Selepas pelepasan ECMAScript 2015 (juga dikenali sebagai ES6), fungsi anak panah JavaScript muncul. Terima kasih kepada sintaks ringkas dan bagaimana untuk mengendalikan kata kunci

, fungsi anak panah dengan cepat menjadi salah satu ciri kegemaran pemaju. this

mata utama

Fungsi anak panah

menyediakan sintaks ringkas dalam JavaScript dengan menghapuskan kata kunci
• , pendakap keriting function dan kata kunci {} apabila hanya ada satu ungkapan. return
Untuk fungsi parameter tunggal, tanda kurung dalam parameter fungsi anak panah boleh ditinggalkan, tetapi untuk fungsi bukan parameter atau multi-parameter dan apabila menggunakan parameter lalai, kurungan mesti digunakan.
Fungsi anak panah secara semulajadi tanpa nama, bermakna mereka tidak mempunyai pengenal nama, tetapi apabila ditugaskan kepada pembolehubah, nama fungsi dapat disimpulkan dari pembolehubah untuk debugging.
• Kata kunci
dalam fungsi anak panah
• menangkap nilainya untuk menyesuaikan konteks tertutup fungsi anak panah, bukan di mana ia dipanggil, yang menjadikannya sesuai untuk ekspresi fungsi tradisional yang perlu terikat pada this luaran keadaan konteks. this
Fungsi anak panah tidak sesuai untuk semua kes, terutamanya dalam kaedah objek atau apabila menggunakan
• pembina, kerana mereka mempunyai pengikat leksikal function dan hilang this objek. arguments
Apabila menggunakan fungsi anak panah dengan kaedah array seperti
• , .map(), .sort(), .forEach(), .filter(), .reduce(),
dan

, mereka dapat meningkatkan kebolehbacaan dan kesederhanaan , tetapi penjagaan mesti diambil untuk memastikan mereka adalah alat yang tepat untuk pekerjaan ini dalam konteks tertentu.

sintaks fungsi anak panah: menulis semula fungsi biasa

Fungsi

adalah seperti resipi di mana anda boleh menyimpan arahan yang berguna untuk mencapai apa yang perlu berlaku dalam program anda, seperti melakukan tindakan atau mengembalikan nilai. Dengan menghubungi fungsi anda, anda boleh melakukan langkah -langkah yang terkandung dalam resipi. Anda boleh melakukan ini setiap kali anda memanggil fungsi tanpa menulis semula resipi berulang kali.

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

Berikut adalah cara standard untuk mengisytiharkan fungsi dan memanggilnya dalam JavaScript:

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

anda juga boleh menulis fungsi yang sama seperti ungkapan fungsi seperti berikut:

const sayHiStranger = () => 'Hi, stranger'

Fungsi anak panah JavaScript sentiasa ekspresi. Inilah cara menulis semula fungsi di atas sebagai ungkapan fungsi anak panah menggunakan notasi anak panah lemak:

<🎜> Kelebihan termasuk: <🎜>

• hanya satu baris kod
• tidak function kata kunci
• tidak return kata kunci
• tiada pendakap keriting {}

Dalam JavaScript, fungsi ini adalah "warganegara kelas pertama". Anda boleh menyimpan fungsi dalam pembolehubah, menyampaikannya sebagai hujah kepada fungsi lain, dan mengembalikannya sebagai nilai dari fungsi lain. Anda boleh melakukan semua ini dengan fungsi anak panah JavaScript.

Tiada sintaks pendakap

Dalam contoh di atas, fungsi tidak mempunyai parameter. Dalam kes ini, anda perlu menambah satu set kurungan kosong () sebelum simbol anak panah lemak (= & gt;). Ini juga benar apabila anda membuat fungsi dengan pelbagai parameter:

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

Walau bagaimanapun, apabila hanya ada satu parameter, anda boleh meninggalkan kurungan (tidak perlu melakukan ini, tetapi ia boleh):

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

tetapi berhati -hati. Sebagai contoh, jika anda memutuskan untuk menggunakan parameter lalai, anda mesti melampirkannya dalam kurungan:

const sayHiStranger = () => 'Hi, stranger'

Hanya kerana anda boleh, itu tidak bermakna anda sepatutnya. Dengan beberapa satira yang baik hati, baik hati, Kyle Simpson (pengarang "You Do not Know JS") meletakkan pemikirannya untuk menghilangkan kurungan ke dalam carta aliran ini. (Carta aliran harus dimasukkan di sini, tetapi kerana gambar tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

pulangan tersirat

anda boleh membuat sintaks anak panah ES6 lebih ringkas apabila terdapat hanya satu ungkapan dalam badan fungsi. Anda boleh meletakkan segala -galanya pada satu baris, keluarkan pendakap keriting, dan keluarkan kata kunci

. return

anda baru sahaja melihat bagaimana garis kod yang kemas berfungsi dalam contoh di atas. Izinkan saya memberi anda contoh lain untuk rujukan sahaja. Fungsi fungsi OrderBylikes () adalah sebagai namanya: ia mengembalikan pelbagai objek siri Netflix yang diatur dalam urutan bilangan tertinggi suka:

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

Ini sejuk, tetapi berhati -hati tentang kebolehbacaan kod - terutamanya apabila menyusun sekumpulan fungsi anak panah menggunakan garis kod dan sintaks anak panah ES6 yang tidak disusun, seperti dalam contoh ini:

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

apa yang berlaku di sana? Cuba gunakan sintaks fungsi biasa:

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

Sekarang anda dapat dengan cepat memahami bagaimana penyambut fungsi luaran mempunyai salam parameter dan mengembalikan fungsi tanpa nama. Sebaliknya, fungsi dalaman ini mempunyai parameter yang dinamakan nama dan mengembalikan rentetan menggunakan nilai ucapan dan nama. Inilah cara memanggil fungsi:

// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)

Perhatikan kesilapan pulangan tersirat ini

Apabila fungsi anak panah JavaScript anda mengandungi pelbagai pernyataan, anda perlu melampirkan semua pernyataan dalam pendakap keriting dan menggunakan kata kunci

. return

Dalam kod berikut, fungsi membina objek yang mengandungi beberapa tajuk dan ringkasan siri Netflix (komen Netflix dari laman web Rotten Tomato):

Fungsi anak panah dalam fungsi

const greeter = greeting => name => `${greeting}, ${name}!`

diperluas melalui satu siri pernyataan dan akhirnya mengembalikan objek. Ini menjadikannya tidak dapat dielakkan untuk menggunakan pendakap keriting di sekitar badan fungsi. .map()

Juga, kerana anda menggunakan pendakap keriting, pulangan tersirat bukan pilihan. Anda mesti menggunakan kata kunci

. return

Jika fungsi anda mengembalikan objek literal menggunakan pulangan tersirat , anda perlu melampirkan objek dalam kurungan. Kegagalan berbuat demikian akan mengakibatkan kesilapan kerana enjin JavaScript tersilap mengepung penyokong objek literal ke dalam pendakap fungsi. Seperti yang anda perhatikan di atas, anda tidak boleh meninggalkan kata kunci return apabila anda menggunakan pendakap keriting dalam fungsi anak panah.

versi yang lebih pendek dari kod sebelumnya menunjukkan sintaks ini:

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

anda tidak dapat menamakan fungsi anak panah

Fungsi yang tidak mempunyai pengenal nama antara kata kunci function dan senarai parameter dipanggil fungsi tanpa nama . Inilah bagaimana ekspresi fungsi tanpa nama biasa kelihatan seperti:

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

Fungsi anak panah adalah semua fungsi tanpa nama:

const sayHiStranger = () => 'Hi, stranger'

Bermula dari ES6, pembolehubah dan kaedah dapat menyimpulkan nama fungsi tanpa nama berdasarkan kedudukan sintaksis mereka, menggunakan atribut name mereka. Ini memungkinkan untuk mengenali fungsi apabila memeriksa nilai atau melaporkan ralat.

semak dengan anonymousarrowfunc:

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

Perhatikan bahawa atribut ini disimpulkan hanya wujud apabila fungsi tanpa nama diberikan kepada pembolehubah, seperti yang ditunjukkan dalam contoh di atas. Jika anda menggunakan fungsi tanpa nama sebagai fungsi panggil balik, fungsi praktikal ini hilang. Ini digambarkan oleh demonstrasi berikut, di mana fungsi tanpa nama dalam kaedah name tidak boleh menggunakan atribut .setInterval(): name

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

dan lebih daripada itu. Harta yang disimpulkan

ini masih tidak boleh digunakan sebagai pengenal yang sesuai yang mana anda boleh merujuk fungsi dari dalam fungsi -contohnya, untuk rekursi, peristiwa yang tidak bertaburan, dll. name

Ketidakpastian intrinsik fungsi anak panah mengetuai Kyle Simpson untuk menyatakan pandangannya kepada mereka seperti berikut:

Oleh kerana saya fikir fungsi tanpa nama tidak sesuai untuk kegunaan yang kerap dalam program, saya tidak suka menggunakan borang fungsi arrow = & gt; - "Anda tidak tahu js"

bagaimana menangani kata kunci ini

Perkara yang paling penting mengenai fungsi anak panah adalah untuk mengingati bagaimana mereka mengendalikan kata kunci

. Khususnya, kata kunci this di dalam fungsi anak panah tidak akan dibangkitkan. this

Untuk menggambarkan apa maksudnya, lihat demonstrasi berikut: (Pen kod harus dimasukkan di sini, tetapi kerana pen kod tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

Ini adalah butang. Mengklik butang mencetuskan kaunter terbalik dari 5 hingga 1, yang dipaparkan pada butang itu sendiri.

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

Perhatikan bagaimana pengendali acara dalam kaedah

adalah ungkapan fungsi tanpa nama biasa, bukan fungsi anak panah. Kenapa? Jika anda log masuk fungsi .addEventListener(), anda akan melihat bahawa ia merujuk elemen butang dengan pendengar yang dilampirkan, yang tepat hasil yang diharapkan dan apa yang perlu dilakukan oleh program seperti yang dirancang. this

// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)

Dalam konsol Alat Pemaju Firefox, nampaknya ini: (imej harus dimasukkan di sini, tetapi kerana imej tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

Walau bagaimanapun, cuba menggantikan fungsi biasa dengan fungsi anak panah seperti berikut:

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

Sekarang, this tidak lagi memetik butang. Sebaliknya, ia merujuk objek tetingkap: (imej harus dimasukkan di sini, tetapi kerana imej tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

Ini bermakna bahawa jika anda ingin menambah kelas ke butang menggunakan this selepas mengklik butang, kod anda tidak akan berfungsi, seperti yang ditunjukkan dalam contoh berikut:

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

Mesej ralat dalam konsol adalah seperti berikut: (gambar harus dimasukkan di sini, tetapi kerana gambar tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

Apabila anda menggunakan fungsi anak panah dalam JavaScript, nilai kata kunci this tidak dipertanggungjawabkan. Ia mewarisi dari skop induk (ini dipanggil skop leksikal). Dalam kes ini, fungsi anak panah yang dipersoalkan diluluskan sebagai hujah kepada kaedah startBtn.addEventListener(), yang berada dalam skop global. Oleh itu, this dalam pengendali fungsi juga terikat pada skop global - iaitu, objek tetingkap.

Jadi jika anda mahu this untuk merujuk butang permulaan dalam program anda, cara yang betul adalah menggunakan fungsi biasa, bukan fungsi anak panah.

Fungsi anak panah Anonymous

Perkara seterusnya yang perlu diperhatikan ialah kod dalam kaedah .setInterval() dalam demonstrasi di atas. Di sini anda juga akan mencari fungsi tanpa nama, tetapi kali ini ia adalah fungsi anak panah. Kenapa?

Perhatikan bahawa jika anda menggunakan fungsi biasa, apakah nilai this menjadi:

const sayHiStranger = () => 'Hi, stranger'

Adakah ia menjadi elemen butang? Sama sekali tidak. Ia akan menjadi objek tetingkap! (Gambar harus dimasukkan di sini, tetapi kerana gambar tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

Malah, konteksnya telah berubah kerana this kini berada dalam fungsi yang tidak terikat atau global yang diluluskan sebagai hujah kepada .setInterval(). Oleh itu, nilai kata kunci this juga berubah kerana ia kini terikat pada skop global.

Dalam kes ini, helah umum adalah untuk memasukkan pembolehubah lain untuk menyimpan nilai kata kunci this supaya ia terus merujuk elemen yang diharapkan -dalam hal ini elemen butang:

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

anda juga boleh menggunakan .bind() untuk menyelesaikan masalah ini:

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

Menggunakan fungsi anak panah, masalahnya hilang sepenuhnya. Berikut adalah nilai this apabila menggunakan fungsi anak panah:

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

(gambar harus dimasukkan di sini, tetapi kerana gambar tidak dapat dimasukkan secara langsung, ia ditinggalkan di sini)

Kali ini, konsol mencatatkan butang, yang kami mahukan. Malah, program ini akan mengubah teks butang, jadi ia memerlukan this untuk merujuk elemen butang:

// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)

Fungsi anak panah tidak mempunyai konteks this sendiri . Mereka mewarisi dari nilai this ibu bapa, dan kerana ciri ini mereka menjadi pilihan yang sangat baik dalam situasi di atas.

fungsi anak panah javascript tidak selalu alat yang betul

Fungsi anak panah bukan sekadar cara baru yang mewah untuk menulis fungsi JavaScript. Mereka mempunyai batasan sendiri, yang bermaksud bahawa dalam beberapa kes anda tidak mahu menggunakannya. Pengendali klik dalam demonstrasi sebelumnya adalah contoh, tetapi ini bukan satu -satunya. Mari kita periksa beberapa lagi.

fungsi anak panah sebagai kaedah objek

Fungsi anak panah tidak digunakan dengan baik sebagai kaedah objek. Berikut adalah contoh.

Pertimbangkan objek NetflixSeries ini, yang mempunyai beberapa sifat dan beberapa kaedah. Panggil console.log(netflixSeries.getLikes()) harus mencetak mesej yang mengandungi bilangan suka semasa. console.log(netflixSeries.addLike())

Sebaliknya, memanggil kaedah

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

pulangan "undefined mempunyai nan suka", dan memanggil kaedah

pulangan "terima kasih kerana suka undefined, yang kini mempunyai nan suka". Oleh itu, .getLikes() dan .addLike() tidak boleh merujuk kepada sifat objek this.title dan this.likes masing -masing. title likes Masalah yang sama terletak pada skop leksikal fungsi anak panah.

Dalam kaedah objek merujuk skop induk, dalam kes ini, ia adalah objek tetingkap, bukan objek induk itu sendiri - iaitu, bukan objek NetflixSeries.

this Sudah tentu, penyelesaiannya adalah menggunakan fungsi biasa:

Gunakan fungsi anak panah perpustakaan pihak ketiga

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

Satu lagi perkara yang perlu diperhatikan ialah perpustakaan pihak ketiga biasanya mengikat panggilan kaedah supaya nilai

menunjuk kepada kandungan yang berguna.

this Sebagai contoh, dalam pengendali acara jQuery,

akan membolehkan anda mengakses elemen DOM pengendali terikat:

this Walau bagaimanapun, jika kita menggunakan fungsi anak panah - seperti yang telah kita lihat, ia tidak mempunyai konteksnya sendiri - kita akan mendapat hasil yang tidak dijangka:

const sayHiStranger = () => 'Hi, stranger'

Berikut adalah contoh selanjutnya menggunakan Vue: this

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

dalam cangkuk

,

mengikat kepada contoh Vue, jadi mesej "Hello, World!"

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

Walau bagaimanapun, jika kita menggunakan fungsi anak panah, created akan menunjuk kepada skop induk, yang tidak mempunyai atribut this:

this Fungsi anak panah tidak mempunyai objek argumen message

Kadang -kadang anda mungkin perlu membuat fungsi dengan bilangan parameter yang tidak menentu. Sebagai contoh, katakan anda ingin membuat fungsi yang menyenaraikan siri Netflix kegemaran anda mengikut keutamaan. Walau bagaimanapun, anda tidak tahu berapa banyak siri yang anda mahu sertakan. JavaScript menyediakan

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

objek. Ini adalah objek seperti array (bukan array lengkap) yang menyimpan nilai yang diserahkan kepada fungsi apabila ia dipanggil.

cuba melaksanakan fungsi ini menggunakan fungsi anak panah:

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

Apabila anda memanggil fungsi tersebut, anda akan menerima mesej ralat berikut: Uncaught ReferenceRor: Argumen tidak ditakrifkan. Ini bermakna bahawa objek arguments tidak tersedia dalam fungsi anak panah. Malah, menggantikan fungsi anak panah dengan fungsi biasa dapat menyelesaikan masalah:

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

Oleh itu, jika anda memerlukan objek

, anda tidak boleh menggunakan fungsi anak panah. arguments

Tetapi bagaimana jika anda

benar -benar mahu menggunakan fungsi anak panah untuk menyalin fungsi yang sama? Satu perkara yang boleh anda lakukan ialah menggunakan parameter yang tinggal ES6 (...). Inilah cara menulis semula fungsi anda:

Kesimpulan

const sayHiStranger = () => 'Hi, stranger'

Dengan menggunakan fungsi anak panah, anda boleh menulis baris kod yang bersih, menggunakan pulangan tersirat, dan akhirnya lupa menggunakan kaedah lama untuk menyelesaikan masalah mengikat

kata kunci dalam JavaScript. Fungsi anak panah juga berfungsi dengan baik dengan kaedah array seperti

, this, .map(), .sort(), .forEach() dan .filter(). Tetapi ingat: Fungsi anak panah tidak menggantikan fungsi JavaScript biasa. Ingat, gunakannya hanya jika fungsi anak panah adalah alat yang betul. .reduce()

Jika anda mempunyai sebarang pertanyaan mengenai fungsi anak panah, atau memerlukan bantuan untuk menggunakannya dengan betul, saya cadangkan anda melawat Forum mesra SitePoint. Terdapat banyak pengaturcara yang berpengetahuan di luar sana bersedia untuk membantu.

soalan yang sering ditanya mengenai fungsi anak panah JavaScript

Apakah fungsi anak panah dalam JavaScript?

anda boleh menentukan fungsi anak panah menggunakan sintaks berikut: (parameter) => ungkapan. Sebagai contoh: (x, y) = & gt; x y mentakrifkan fungsi anak panah yang mengambil dua parameter dan mengembalikan jumlah mereka.

bagaimana untuk menentukan fungsi anak panah?

anda boleh menentukan fungsi anak panah menggunakan sintaks berikut: (parameter) => ungkapan. Sebagai contoh: (x, y) = & gt; x y mentakrifkan fungsi anak panah yang mengambil dua parameter dan mengembalikan jumlah mereka.

Apakah perbezaan antara fungsi anak panah dan fungsi biasa?

Fungsi anak panah dan fungsi biasa adalah berbeza dalam aspek berikut: Mereka tidak mempunyai

sendiri. Sebaliknya, mereka mewarisi nilai this dari skop leksikal sekitarnya. Fungsi anak panah tidak boleh digunakan sebagai pembina, yang bermaksud anda tidak boleh membuat contoh objek menggunakan this. Fungsi anak panah tidak mempunyai objek sendiri new. Sebaliknya, mereka mewarisi skop tertutup arguments. Fungsi anak panah lebih mudah dan lebih sesuai untuk operasi satu baris mudah. arguments

Apakah kelebihan menggunakan fungsi anak panah?

Fungsi anak panah menyediakan sintaks ringkas untuk menjadikan kod anda lebih mudah dibaca. Mereka juga membantu mengelakkan masalah

mengikat, kerana mereka mewarisi konteks sekitarnya. Ini dapat memudahkan corak pengekodan tertentu dan mengurangkan keperluan untuk penyelesaian seperti this, bind atau apply. call

Adakah fungsi anak panah sesuai untuk semua kes?

Walaupun fungsi anak panah berguna untuk banyak senario, mereka mungkin tidak berfungsi dalam semua kes. Mereka paling sesuai untuk fungsi pendek dan mudah. Fungsi tradisional mungkin lebih sesuai untuk fungsi atau fungsi kompleks yang memerlukan konteks this mereka sendiri.

Apa versi JavaScript menyokong fungsi anak panah?

Fungsi anak panah diperkenalkan dalam ECMAScript 6 (ES6) dan disokong oleh pelayar moden dan versi Node.js. Mereka digunakan secara meluas dalam pembangunan JavaScript moden.

Apakah batasan fungsi anak panah?

Fungsi anak panah

tidak boleh digunakan sebagai pembina, tidak mempunyai objek sendiri arguments, dan tidak begitu sesuai untuk kaedah yang memerlukan konteks this dinamik. Selain itu, sintaks ringkas mereka mungkin tidak sesuai untuk fungsi yang mengandungi pelbagai kenyataan.

Bolehkah fungsi anak panah digunakan untuk kaedah dalam objek atau kelas?

Ya, fungsi anak panah boleh digunakan untuk kaedah dalam objek atau kelas. Walau bagaimanapun, ingat bahawa fungsi anak panah tidak mempunyai this mereka sendiri, jadi mereka mungkin tidak berfungsi seperti yang diharapkan dalam kaedah yang memerlukan konteks this dinamik.

bagaimana untuk mengembalikan objek literal dari fungsi anak panah?

Apabila mengembalikan literasi objek secara langsung dari fungsi anak panah, objek perlu disertakan dalam kurungan untuk mengelakkan kekeliruan dengan blok fungsi. Sebagai contoh: () = & gt;

Bolehkah saya menghilangkan kurungan untuk parameter tunggal dalam fungsi anak panah?

Ya, jika fungsi anak panah menerima parameter tunggal, kurungan di sekitar parameter boleh ditinggalkan. Sebagai contoh, x = & gt;

Atas ialah kandungan terperinci Fungsi anak panah di JavaScript: Sintaks Fat & Ringkas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!