Oops, saya melakukannya sekali lagi: Menyahpepijat ralat biasa dalam JavaScript

Oops, saya melakukannya sekali lagi: Menyahpepijat ralat biasa dalam JavaScript

Menulis kod JavaScript boleh mencabar dan kadangkala benar-benar menakutkan, seperti yang diketahui oleh ramai pembangun. Dalam proses kerja, kesilapan tidak dapat dielakkan timbul, dan sebahagian daripadanya berulang dengan kerap. Artikel ini, yang bertujuan untuk pembangun pemula, bercakap tentang ralat ini dan cara menyelesaikannya. Untuk kejelasan, nama fungsi, sifat dan objek diambil daripada lagu popular. Semua ini membantu anda mengingati dengan cepat cara membetulkan kesilapan biasa.

Kami mengingatkan: untuk semua pembaca "Habr" - diskaun sebanyak 10 rubel apabila mendaftar dalam mana-mana kursus Skillbox menggunakan kod promosi "Habr".

Skillbox mengesyorkan: Kursus praktikal "Pro Pembangun Mudah Alih".

TypeError: harta tidak ditakrifkan

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

Kod contoh di atas membuang ralat Uncaught TypeError: Tidak boleh membaca harta 'bertuah' undefined. Masalahnya ialah objek gadis itu tidak mempunyai harta bernama, walaupun ia mempunyai sifat nama. Dan kerana harta gadis.bernama itu tidak ditakrifkan, anda tidak boleh mengaksesnya, kerana secara rasmi ia tidak wujud. Tetapi jika anda menggantikan girl.named.lucky dengan girl.name, maka semuanya akan berfungsi dan program akan mengembalikan Lucky.

Anda boleh mengetahui lebih lanjut tentang hartanah baca di sini.

Bagaimana untuk menyelesaikan TypeErrors

TypeError berlaku apabila pengaturcara cuba melakukan tindakan pada data yang tidak sepadan dengan jenis tertentu. Contohnya termasuk menggunakan .bold(), meminta sifat yang tidak ditentukan atau memanggil fungsi yang sebenarnya bukan fungsi.

Jadi, jika anda cuba memanggil girl(), anda akan mendapat ralat Uncaught TypeError: yourVariable.bold bukan fungsi dan girl bukan fungsi, kerana ia sebenarnya objek yang dipanggil, bukan fungsi.

Untuk menghapuskan ralat, anda perlu mengkaji pembolehubah. Jadi, apa itu perempuan? Apa itu girl.named? Anda boleh mengetahuinya dengan menganalisis kod, memaparkan pembolehubah menggunakan console.log, arahan penyahpepijat atau memanggil nama pembolehubah dalam konsol. Anda perlu memastikan bahawa adalah mungkin untuk beroperasi pada jenis data yang terkandung dalam pembolehubah. Jika ia tidak sesuai, ubahnya, contohnya, tambah syarat atau cuba..catch block - dan dapatkan kawalan ke atas pelaksanaan operasi.

Limpahan Tindanan

Jika anda percaya pengarang lirik lagu Baby One More Time (ini Britney Spears, yeah), maka perkataan hit dalam konteks ini bermaksud keinginan penyanyi itu untuk dipanggil semula (di sini adalah penjelasan tentang konteks yang sebenarnya. lagu - nota penterjemah). Mungkin keinginan ini akan membawa kepada peningkatan bilangan panggilan dalam kehidupan sebenar. Tetapi dalam pengaturcaraan, ini adalah rekursi yang boleh menyebabkan ralat jika timbunan panggilan melimpah.

Ralat kelihatan seperti ini:

Ralat: Kehabisan ruang tindanan (Tepi)
Ralat Dalaman: terlalu banyak rekursi (Firefox)
RangeError: Saiz tindanan panggilan maksimum melebihi (Chrome)

Limpahan tindanan berlaku jika pembangun tidak mempertimbangkan kes asas dalam rekursi, atau jika kod tidak menangani kes yang dimaksudkan.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Dalam kes ini, stillBelieve tidak boleh palsu, jadi oneMoreTime akan dipanggil setiap kali, tetapi fungsi itu tidak akan selesai.

Jika anda mula bergantung pada dua rakan, ini akan mengurangkan kesunyian, dan anda tidak perlu menunggu panggilan.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Contohnya ialah kes dengan gelung tak terhingga, apabila sistem tidak menghasilkan mesej ralat, tetapi halaman di mana kod JavaScript dilaksanakan hanya membeku. Ini berlaku jika gelung while tidak mempunyai syarat penamatan.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Anda boleh menyelesaikan masalah seperti berikut:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Menyahpepijat gelung dan rekursi tak terhingga

Jika anda mempunyai masalah gelung tidak terhingga, anda perlu menutup tab dalam Chrome atau Edge dan menutup tetingkap penyemak imbas dalam Firefox. Selepas ini, anda perlu menganalisis kod dengan teliti. Jika anda tidak menemui masalah, ia patut menambah arahan penyahpepijat pada gelung atau fungsi anda dan menyemak nilai pembolehubah. Sekiranya hasilnya tidak sesuai dengan apa yang diharapkan, maka kami menggantikannya, ini boleh dilakukan dengan mudah.

Dalam contoh di atas, penyahpepijat harus ditambah sebagai baris pertama fungsi atau gelung. Kemudian anda perlu membuka tab nyahpepijat dalam Chrome, menganalisis pembolehubah dalam skop. Menggunakan butang seterusnya anda boleh menjejaki perubahan mereka pada setiap lelaran. Semua ini mudah dilakukan, dan dalam kebanyakan kes masalah ditemui.

Anda boleh membaca lebih lanjut mengenai semua ini di sini (untuk krom) dan di sini (untuk Firefox).

Ralat sintaks

Salah satu ralat yang paling biasa dalam JavaScript ialah SyntaxError. Sambungan editor teks akan membantu anda mengelakkannya. Contohnya, Bracket Pair Colorizer menandakan kurungan dalam kod dengan warna yang berbeza, dan Prettier atau alat analisis yang serupa membolehkan anda mencari ralat dengan cepat. Pilihan terbaik untuk mengurangkan kemungkinan SyntaxError ialah sarang yang minimum.

Kongsi dalam ulasan: apakah yang anda lakukan untuk mengelakkan kesilapan atau mengesan dan menghapuskannya dengan cepat?

Skillbox mengesyorkan:

Sumber: www.habr.com

Tambah komen