Fungsi panah di ES2015 memberikan sintaksis yang lebih ringkas.
- Bisakah saya mengganti semua deklarasi / ekspresi fungsi saya dengan fungsi panah sekarang?
- Apa yang harus saya perhatikan?
Contoh:
Fungsi konstruktor
function User(name) {
this.name = name;
}
// vs
const User = name => {
this.name = name;
};
Metode prototipe
User.prototype.getName = function() {
return this.name;
};
// vs
User.prototype.getName = () => this.name;
Metode objek (literal)
const obj = {
getName: function() {
// ...
}
};
// vs
const obj = {
getName: () => {
// ...
}
};
Telepon balik
setTimeout(function() {
// ...
}, 500);
// vs
setTimeout(() => {
// ...
}, 500);
Fungsi variadik
function sum() {
let args = [].slice.call(arguments);
// ...
}
// vs
const sum = (...args) => {
// ...
};
javascript
ecmascript-6
arrow-functions
Felix Kling
sumber
sumber
this
sangat berbedatimesCalled
hanya dengan 1 setiap kali tombol dipanggil. Yang menjawab pertanyaan pribadi saya:.click( () => { } )
dan.click(function() { })
keduanya membuat jumlah fungsi yang sama ketika digunakan dalam satu lingkaran seperti yang Anda lihat dari jumlah Guid di Plnkr.Jawaban:
tl; dr: Tidak! Fungsi panah dan deklarasi fungsi / ekspresi tidak setara dan tidak dapat diganti secara membabi buta.
Jika fungsi yang ingin Anda ganti tidak digunakan
this
,arguments
dan tidak dipanggil dengannew
, maka ya.Seperti yang sering: itu tergantung . Fungsi panah memiliki perilaku yang berbeda dari deklarasi / ekspresi fungsi, jadi mari kita lihat perbedaannya terlebih dahulu:
1. Leksikal
this
danarguments
Fungsi panah tidak memiliki
this
atauarguments
mengikat sendiri . Sebaliknya, pengidentifikasi tersebut diselesaikan dalam ruang lingkup leksikal seperti variabel lainnya. Itu berarti bahwa di dalam fungsi panah,this
danarguments
merujuk ke nilai-nilaithis
danarguments
di lingkungan fungsi panah didefinisikan dalam (yaitu "di luar" fungsi panah):Dalam kasus ekspresi fungsi,
this
merujuk ke objek yang dibuat di dalamcreateObject
. Dalam kasus panah fungsi,this
mengacuthis
daricreateObject
itu sendiri.Ini membuat fungsi panah berguna jika Anda perlu mengakses
this
lingkungan saat ini:Perhatikan bahwa ini juga berarti bahwa tidak mungkin untuk mengatur fungsi panah
this
dengan.bind
atau.call
.Jika Anda tidak terlalu mengenal
this
, pertimbangkan untuk membaca2. Fungsi panah tidak dapat dipanggil dengan
new
ES2015 membedakan antara fungsi yang bisa dipanggil dan fungsi yang bisa dikonstruksikan . Jika suatu fungsi dapat dibangun, itu dapat dipanggil dengan
new
, yaitunew User()
. Jika suatu fungsi dipanggil, itu dapat dipanggil tanpanew
(yaitu panggilan fungsi normal).Fungsi yang dibuat melalui deklarasi / ekspresi fungsi keduanya dapat dibangun dan dapat dipanggil.
Fungsi panah (dan metode) hanya dapat dipanggil.
class
konstruktor hanya dapat dibangun.Jika Anda mencoba memanggil fungsi yang tidak dapat dipanggil atau untuk membangun fungsi yang tidak dapat dibangun, Anda akan mendapatkan kesalahan runtime.
Mengetahui hal ini, kita dapat menyatakan yang berikut.
Tergantikan:
this
atauarguments
..bind(this)
Tidak tergantikan:
this
)arguments
(lihat di bawah))Mari kita lihat lebih dekat ini menggunakan contoh Anda:
Fungsi konstruktor
Ini tidak akan berfungsi karena fungsi panah tidak dapat dipanggil dengan
new
. Tetap menggunakan fungsi deklarasi / ekspresi atau gunakanclass
.Metode prototipe
Kemungkinan besar tidak, karena metode prototipe biasanya digunakan
this
untuk mengakses instance. Jika tidak digunakanthis
, maka Anda dapat menggantinya. Namun, jika Anda terutama memperhatikan sintaksis ringkas, gunakanclass
dengan sintaksis metode ringkasnya:Metode objek
Demikian pula untuk metode dalam objek literal. Jika metode ingin merujuk objek itu sendiri melalui
this
, tetap menggunakan ekspresi fungsi, atau gunakan sintaks metode baru:Telepon balik
Tergantung. Anda harus menggantinya jika Anda menggunakan aliasing luar
this
atau menggunakan.bind(this)
:Tetapi: Jika kode yang memanggil panggilan balik secara eksplisit ditetapkan
this
ke nilai tertentu, seperti yang sering terjadi dengan penangan acara, terutama dengan jQuery, dan panggilan balik menggunakanthis
(atauarguments
), Anda tidak dapat menggunakan fungsi panah!Fungsi variadik
Karena fungsi panah tidak memiliki fungsi panah sendiri
arguments
, Anda tidak dapat dengan mudah menggantinya dengan fungsi panah. Namun, ES2015 memperkenalkan alternatif untuk menggunakanarguments
: parameter sisanya .Pertanyaan terkait:
Sumber lebih lanjut:
sumber
this
juga mempengaruhisuper
dan bahwa mereka tidak punya.prototype
.AssignmentExpression
) tidak bisa hanya dijatuhkan di mana-mana ekspresi fungsi (PrimaryExpression
) dapat dan itu membuat orang naik cukup sering (terutama karena telah diuraikan kesalahan dalam implementasi JS utama).() => {}()
) atau melakukan sesuatu sepertix || () => {}
. Itulah yang saya maksud: kesalahan runtime (parse). (Dan meskipun itu masalahnya, cukup sering orang berpikir kesalahan itu salah.) Apakah Anda hanya mencoba untuk menutupi kesalahan logika yang tidak akan diperhatikan karena mereka tidak selalu kesalahan ketika diuraikan atau dieksekusi?new
Salah satunya adalah kesalahan runtime bukan?Tunggu, Anda tidak dapat menggunakan fungsi panah di mana pun dalam kode Anda, ini tidak akan berfungsi dalam semua kasus seperti di
this
mana fungsi panah tidak dapat digunakan. Tanpa ragu, fungsi panah adalah tambahan yang bagus karena membawa kesederhanaan kode.Tetapi Anda tidak dapat menggunakan fungsi panah ketika konteks dinamis diperlukan: mendefinisikan metode, membuat objek dengan konstruktor, mendapatkan target dari ini saat menangani acara.
Fungsi panah TIDAK boleh digunakan karena:
Mereka tidak memiliki
this
Ini menggunakan "pelingkupan leksikal" untuk mencari tahu apa nilai "
this
" seharusnya. Dengan kata sederhana pelingkupan leksikal menggunakan "this
" dari dalam tubuh fungsi.Mereka tidak memiliki
arguments
Fungsi panah tidak memiliki
arguments
objek. Tetapi fungsi yang sama dapat dicapai dengan menggunakan parameter lainnya.let sum = (...args) => args.reduce((x, y) => x + y, 0)
sum(3, 3, 1) // output - 7
`Mereka tidak dapat digunakan dengan
new
Fungsi panah tidak dapat menjadi konstruktor karena tidak memiliki properti prototipe.
Kapan menggunakan fungsi panah dan kapan tidak:
map
,reduce
, atauforEach
.sumber
arguments
objek khusus yang tidak tersedia dalam fungsi panah di sini: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Untuk menggunakan fungsi panah
function.prototype.call
, saya membuat fungsi pembantu pada prototipe objek:pemakaian
Edit
Anda TIDAK PERLU pembantu. Anda bisa melakukannya:
sumber