Enam perkara yang anda mungkin tidak tahu tentang JavaScript

Ditulis oleh Lewis Cianci✏️

Jadi, anda seorang pembangun JavaScript? Senang mendengar — pada pendapat anda apakah kod ini dikembalikan? Dan ya, ini soalan muslihat:

function returnSomething()
{
  return
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Dalam hampir mana-mana bahasa lain — C#, Java, senarai diteruskan — kami akan mendapatkan kembali objek dengan Pakar JavaScript. Dan anda akan dimaafkan kerana berfikir bahawa dalam JavaScript, kami akan mendapatkan kembali hasil yang sama.

Walau bagaimanapun, lawakkan saya, dan masukkan ini ke dalam konsol pembangunan anda, dan kemudian laksanakan fungsi tersebut. Hampir sukar dipercayai, ia kembali tidak ditentukan.

Apabila perkara tidak sesuai dengan rancangan

Bekerja sebagai pembangun perisian bermakna anda bertanggungjawab ke atas cara apl anda berfungsi, sama ada ia berfungsi dengan baik atau teruk. Kekangan utama dalam hal itu ialah alat yang anda putuskan untuk digunakan. Jika anda memahami perkara yang anda gunakan, diharapkan anda akan membuat pilihan yang baik dalam cara anda mereka bentuk perisian anda.

JavaScript adalah unik kerana ia merupakan bahasa pilihan ramai pembangun perisian baharu. Ingin menulis aplikasi mudah alih? Hanya gunakan React Native dan JavaScript. Apl desktop? React Native dan JavaScript. Fungsi awan untuk dijalankan di suatu tempat? Node.js, dan, anda rasa, JavaScript.

Walau bagaimanapun, disebabkan tempoh JavaScript telah wujud, ia mempunyai bahagian yang saksama dalam senapang kaki dan gotcha. Sebahagian daripada ini berkisar daripada yang agak menggelikan kepada yang tiada kod-saya-berfungsi-dan-saya-tidak-tahu-mengapa keterukan.

Dan, walaupun kita hidup pada zaman ketika Internet Explorer 6 berada di zaman kegemilangannya, sudah terlambat untuk pergi dan cuba membetulkan beberapa keputusan reka bentuk ini, kerana kita akan memecahkan terlalu banyak web. Jika itu berlaku pada masa itu, bayangkan jika kita mencuba hari ini! ??

Jadi, bagaimanakah JavaScript tidak berfungsi dengan cara yang kita jangkakan? Mari lihat.

Suntikan Titik Bertitik Automatik (ASI)

Contoh yang disenaraikan di awal diterima oleh jurubahasa JavaScript tetapi tidak memberikan hasil yang diharapkan. Sebabnya adalah kerana Automatic Semicolon Injection.

Sesetengah bahasa, seperti C#, bersifat dogmatik tentang menamatkan setiap baris dengan koma bertitik. JavaScript juga menggunakan koma bertitik untuk menunjukkan penghujung baris, tetapi koma bertitik sebenarnya adalah pilihan. Secara pilihan, ini bermakna JavaScript akan menggunakan satu set peraturan yang kompleks untuk menentukan sama ada koma bertitik sepatutnya pergi ke sana atau tidak.

Dalam contoh di awal, kerana kurungan pembukaan tidak berlaku pada baris yang sama dengan pemulangan, ASI muncul satu di sana untuk kita. Jadi, setakat JavaScript berkenaan, kod kami sebenarnya kelihatan seperti ini:

function returnSomething()
{
  return ; // <-- semicolon inserted by ASI, remainder of function not evaluated.
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Cara untuk mengelakkan perkara ini adalah dengan meletakkan kurungan pembukaan pada baris yang sama sebagai pemulangan. Dan, walaupun koma bertitik secara teknikalnya adalah pilihan dalam JavaScript, ia akan merugikan anda dalam jangka panjang untuk bekerja dengan konsep itu.

Jika anda mempunyai temu duga, dan anda perlu menulis JS, dan anda menulisnya tanpa koma bertitik berdasarkan rasional "tetapi ia adalah pilihan", akan ada banyak kertas yang dikocok dan ketawa. Cuma jangan buat.

Tatasusunan dengan kunci bukan urutan

Mari bayangkan kita mempunyai tatasusunan mudah:

function returnSomething()
{
  return
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Kami tahu kami boleh pop, tolak, tambah dan melakukan apa sahaja yang kami suka dengan tatasusunan. Tetapi kami juga tahu bahawa JavaScript, seperti bahasa lain, membolehkan kami mengakses elemen tatasusunan mengikut indeks.

Walau bagaimanapun, perkara yang luar biasa tentang JavaScript ialah anda juga boleh menetapkan elemen mengikut indeks tatasusunan apabila tatasusunan masih belum mencapai indeks itu:

function returnSomething()
{
  return ; // <-- semicolon inserted by ASI, remainder of function not evaluated.
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Saya ada soalan yang bagus untuk anda — Apakah panjang tatasusunan apabila anda hanya menetapkan tiga elemen? Mungkin secara tidak intuitif, ia adalah 101. Di satu pihak, adalah munasabah bahawa item tatasusunan 2 hingga 99 tidak ditentukan, tetapi di sisi lain, kami hanya menetapkan tiga objek, bukan 100.

Kenapa ia penting?
Mungkin mata anda keluar dari kepala anda dan anda berkata "Baiklah Lewis, anda secara manual menetapkan item ke dalam tatasusunan dan melihat roda tercabut; itu membuatkan anda pelik, bukan JavaScript”.

Saya akan faham kedudukan itu. Tetapi bayangkan seketika anda melakukan sesuatu dalam gelung bersarang untuk, dan anda memilih lelaran yang salah atau membuat pengiraan dua tingkat.

Pada satu ketika, proses pemikiran "Mengapa saya mendapat hasil yang diharapkan, hasil yang dijangka, hasil yang tidak ditentukan, yang dijangkakan" akan bertukar kepada kegilaan, dan tidak lama lagi akan menangis! Sedikit yang anda tahu tatasusunan anda berkembang secara ajaib untuk menampung perkara yang anda cuba lakukan.

Satu-satunya masalah ialah, anda cuba melakukan perkara yang salah.

Untuk membandingkan dengan bahasa lain seperti C# (tanpa sebab tertentu), tatasusunan mempunyai panjang tetap. Apabila anda membuat tatasusunan, anda perlu menentukan panjang. Walaupun untuk objek koleksi dinamik lain, seperti Senarai, anda tidak boleh menetapkan ke dalam indeks yang tidak ditentukan. Jadi, jika gelung bersarang anda cuba menulis ke indeks yang tidak ditetapkan sebelum ini, program anda akan membuang.

Pengecualian tidak bagus, tetapi ini mungkin perkara yang betul untuk dilakukan. Maksud saya, adakah anda bermaksud untuk mencipta susunan keju Swiss? Adakah sesiapa yang bermaksud berbuat demikian? Semoga tidak.  

Ia hanya susunan keju Swiss jika pembangunnya dari Switzerland. Jika tidak, ia hanyalah pengaturcaraan buruk yang berkilauan.

Menambah sifat pada primatif diabaikan

Kami tahu bahawa dalam JavaScript kami boleh menetapkan fungsi baharu kepada prototaip. Jadi, kita boleh memberikan rentetan atau tatasusunan ✨kuasa istimewa✨. Sudah tentu, berbuat demikian adalah amalan yang buruk kerana ini bermakna prototaip rentetan kami akan berkelakuan berbeza kepada orang lain, yang sudah menyebabkan sakit hati yang tidak terperi bagi kebanyakan pembangun.

Jadi, kita boleh lakukan ini sebagai contoh:

function returnSomething()
{
  return
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Dan kemudian kita boleh mencipta objek rentetan:

function returnSomething()
{
  return ; // <-- semicolon inserted by ASI, remainder of function not evaluated.
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Dan ia akan kembali palsu.

Memang comel kita sentiasa boleh menyekat fungsi kita secara rawak ke dalam pelaksanaan yang ditentukan kilang tentang cara rentetan boleh bertindak.

Pasti, semua orang yang baik itu patah tulang belakang dan menghabiskan berpuluh-puluh ribu jam mentakrifkan JavaScript dalam spesifikasi TC39, tetapi jangan biarkan perkara itu menghalang anda daripada melakukan fungsi rawak seperti yang anda fikirkan patut.

Jika kami tidak berpuas hati dengan jenama kesakitan itu, kami juga boleh menetapkan fungsi baharu secara rawak kepada objek kompleks seperti yang kami mahu, memastikan kod kami akan menjadi bentuk karut yang sangat khusus, hanya difahami oleh diri sendiri dan Tuhan :

Mengarang objek kami seperti ini sememangnya idea yang mengerikan, tetapi kerana kami komited terhadap pengkhianatan ini, JavaScript mewajibkan kami dalam permintaan kami. TestObject kami mengambil fungsi baharu yang telah kami masukkan ke dalamnya.

Walau bagaimanapun, kemahuan baik habis dengan objek primatif, dengan cara yang mengejutkan:

Jurubahasa mengakui percubaan kami untuk menetapkan fungsi ke dalam rentetan primatif. Ia juga menggemakan fungsi itu kembali kepada kami. Tetapi kemudian, apabila kita cuba memanggilnya, kita mendapat TypeError: testString.onlyFalse bukan fungsi. Jika tidak mungkin untuk melakukan ini, biasanya anda menjangkakan ini akan dilakukan pada penugasan, bukan pada panggilan fungsi.

Kenapa ia penting?
Baik atau buruk, JavaScript ialah bahasa yang sangat fleksibel dan dinamik. Fleksibiliti ini membolehkan kami mengarang fungsi yang tidak boleh dilakukan dalam bahasa lain. Jika sesuatu tidak berfungsi, maka kita harus mengharapkan pengecualian. JavaScript mengambil arahan yang janggal ini dan bersikap seperti "eh, okey" dan kemudian melupakannya mengubah jangkaan asas ini.

Jenis Paksaan

Dalam bahasa lain yang ditaip kuat, kami perlu menentukan jenis data yang kami simpan sebelum kami dapat menyimpannya. JavaScript tidak mempunyai jenis pengehadan yang sama ini, dan ia dengan senang hati akan menolak objek daripada jenis yang ditentukan untuk cuba membuatkan mereka bermain bagus bersama-sama.

Di satu pihak, ia menjauhkan kita daripada menghantar pembolehubah ke sana ke mari kepada jenis masing-masing. Jadi ia mudah:
Ia juga sama untuk boolean:

Pendekatan ini benar-benar waras dan sah sehingga kita ingin melibatkan diri kita dalam ritual tabu yang dikenali sebagai "penambahan." Apabila kita cuba menambah "1" dan 1 bersama-sama, apa yang berlaku? Apakah cara paksaan jenis itu pergi?

Kegembiraan kegilaan berganda apabila kita membawa bool ke parti:

Oh — adakah kerana bool entah bagaimana nombor di bawah tudung?
Tidak. Ia adalah boolean. JavaScript sedang mencukur tepi petak yang menjengkelkan untuk memasukkannya ke dalam lubang bulat itu kerana alasan.

Kenapa ia penting?
Apabila anda melakukan sesuatu yang asas seperti menambah nombor bersama-sama, keputusan yang berbeza-beza boleh mewujudkan beberapa pepijat pelik. Ini adalah peringatan yang baik untuk berpegang kepada triple equals (===) semasa membuat perbandingan, kerana zapping antara jenis mungkin tidak memberikan anda hasil yang diharapkan.

Fungsi mengangkat

Dengan bahasa yang kita gunakan hari ini, aspek penting ialah sesuatu yang dipanggil "fungsi angkat". Pada asasnya, ini bermakna anda boleh menulis fungsi anda dalam fail anda di mana-mana yang anda suka dan anda akan dapat memanggilnya sebelum fungsi diisytiharkan:

function returnSomething()
{
  return
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Ia berguna kerana kami tidak perlu menyusun semula kod kami secara manual untuk menjadikannya berfungsi.

Tetapi, terdapat lebih daripada satu cara untuk menerangkan fungsi. Dalam contoh ini, kami menggunakan pengisytiharan fungsi untuk berbuat demikian. Kita juga boleh menggunakan ungkapan fungsi:

function returnSomething()
{
  return ; // <-- semicolon inserted by ASI, remainder of function not evaluated.
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Kenapa ia penting?
Tiada perbezaan besar antara mengisytiharkan fungsi dalam mana-mana kes, tetapi jika anda salah memilih, anda tidak akan dapat memanggil fungsi anda melainkan anda memanggilnya selepas anda mengisytiharkannya.

Null ialah objek

Dalam bahasa lain, sifat objek boleh ditetapkan atau ia boleh menjadi batal. null menunjukkan bahawa harta itu tidak diberikan. Ia mudah untuk menyamakan dalam kepala kita — sama ada terdapat objek di sana, atau ia adalah batal. Kami juga boleh menetapkan sifat kembali kepada null jika kami mahu.

JavaScript merumitkan landskap ini dengan mempunyai null dan juga undefined. Tetapi semuanya sama, bukan? Anda sama ada mempunyai bola di tangan anda, atau anda tidak.

Tidak menghairankan, semuanya tidak sama. Dalam JavaScript, null menunjukkan kekurangan nilai yang disengajakan, manakala undefined menunjukkan kekurangan nilai yang tersirat. Jadi, sama ada ia disengajakan, eksplisit atau ditulis di langit, hakikatnya tiada nilai = tiada nilai, bukan?

Sekali lagi, malangnya, itu bukan cara persamaan itu berfungsi.

Nah, apakah jenis yang tidak ditentukan?

Baiklah, dan apakah jenis null?

? ia adalah objek. Jadi dalam JavaScript, jenis objek kompleks dan null adalah sama — kedua-duanya adalah objek:

Kenapa ia penting?
JavaScript tidak mempunyai sistem semakan jenis yang mantap terbina dalam dan hanya terdapat segelintir jenis primatif untuk dipilih. Jadi, menggunakan typeof untuk memahami apa yang ada dalam pembolehubah kami boleh menjadi rumit. Jika pembolehubah kami memegang objek yang sah, maka kami akan mendapat objek. Tetapi jika ia batal, kami masih akan mendapat objek. Adalah berlawanan intuitif untuk berfikir bahawa rujukan nol ialah objek.

Kesimpulan

Tiada dipersoalkan populariti besar JavaScript hari ini sebagai bahasa. Apabila masa berlalu dan ekosistem lain seperti npm terus menjadi tuan rumah sejumlah besar pakej, JavaScript hanya akan terus meningkat dalam populariti.

Tetapi apa yang dilakukan sudah selesai. Tidak kira betapa peliknya null ialah objek, atau JavaScript akan memunculkan koma bertitik di tempat yang sesuai, sistem ini mungkin tidak akan ditamatkan, diubah atau dialih keluar. Secara anekdot, saya akan mengatakan bahawa jika Suntikan Titik Bertitik Automatik dimatikan semalaman, ia mungkin akan menyebabkan gangguan global yang lebih besar daripada kemas kini CrowdStrike.

Sudah tentu, menukar salah satu daripada ini akan mendatangkan malapetaka di web. Ia sebenarnya lebih selamat, dan mungkin lebih praktikal, untuk menyedarkan pembangun tentang kebiasaan bahasa tertentu ini daripada benar-benar kembali dan menyelesaikan masalah asal.

Jadi, pergi dan buat pilihan yang baik, dan jangan lupa gunakan koma bertitik!

LogRocket: Nyahpepijat ralat JavaScript dengan lebih mudah dengan memahami konteks

Kod nyahpepijat sentiasa menjadi tugas yang membosankan. Tetapi semakin anda memahami kesilapan anda, semakin mudah untuk membetulkannya.

LogRocket membolehkan anda memahami ralat ini dengan cara baharu dan unik. Penyelesaian pemantauan bahagian hadapan kami menjejaki penglibatan pengguna dengan bahagian hadapan JavaScript anda untuk memberi anda keupayaan untuk melihat dengan tepat perkara yang dilakukan pengguna yang membawa kepada ralat.

LogRocket merekodkan log konsol, masa muat halaman, surih tindanan, permintaan/tindak balas rangkaian perlahan dengan badan pengepala, metadata penyemak imbas dan log tersuai. Memahami kesan kod JavaScript anda tidak akan menjadi lebih mudah!

Cuba secara percuma.

Atas ialah kandungan terperinci Enam perkara yang anda mungkin tidak tahu tentang JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!