Bagaimana JavaScript berfungsi di bawah tudung?

Siaran ini benar-benar bertujuan untuk membincangkan dengan cara yang mudah bagaimana JavaScript berfungsi di bawah tudung supaya pengaturcara baharu pun dapat memahami konsep dan menggambarkan perkara yang berlaku apabila mengekod JavaScript.
Sebagai permulaan, terdapat sekurang-kurangnya 3 soalan yang ingin saya fokuskan yang akan memudahkan untuk mengatasi kesukaran dan menghayati logik di sebalik?
Soalan ini juga merupakan soalan yang mungkin akan ditanya semasa temu duga kerja untuk pembangun web yang mana JavaScript membayangkan:

1. Bagaimanakah JavaScript berfungsi?
2. Terangkan perbezaan antara Synchronous vs Asynchronous?
3. Atau terangkan pernyataan ini: JavaScript ialah bahasa berulir tunggal yang tidak boleh disekat?

Sungguh, tidak perlu mengetahui cara JavaScript berfungsi secara dalaman untuk menulis program tetapi penting dan penting untuk dipelajari untuk memahami apa yang berlaku di sebalik dan merasakan apa yang anda tulis justeru beberapa pembangun yang telah bertahun-tahun dalam pembawa tidak peduli untuk mengetahui perkara ini.

Beri tahu dahulu apa itu atur cara? Atur cara hanyalah satu set arahan yang memberitahu komputer apa yang perlu dilakukan dan cara melaksanakan tugas. Program mesti memperuntukkan memori, jika tidak, kami tidak akan mampu untuk mempunyai pembolehubah atau menyimpan fail pada komputer kami. Program ini juga harus menghuraikan (membaca) dan melaksanakan tugas khusus dan semua berlaku dalam ingatan.

Kini, JavaScript mempunyai enjin yang dikenali sebagai enjin JavaScript yang dilaksanakan oleh setiap penyemak imbas. Contohnya dalam Chrome ia dipanggil V8, dalam Mozilla Firefox: Spider Monkey, penyemak imbas Safari: JavaScript Core Webkit.

Imej berikut menunjukkan enjin V8 google chrome

Apakah yang berlaku di dalam Enjin JavaScript?

Enjin JavaScript seperti V8 dalam chrome membaca kod JavaScript yang kami tulis dan menukarnya menjadi arahan boleh laku mesin untuk penyemak imbas. Rajah di atas menunjukkan bahagian enjin JavaScript yang terdiri daripada dua bahagian iaitu Timbunan memori **dan **Timbunan panggilan.

Perlu juga diambil perhatian bahawa peruntukan memori berlaku dalam timbunan memori, manakala penghuraian (membaca) dan pelaksanaan berlaku dalam Timbunan Panggilan. Di samping itu, timbunan memori yang memberitahu anda di mana anda berada dalam program ini.

Mari lihat peruntukan memori dalam timbunan memori dengan kod JS (JavaScript)

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]

Jadi, apakah masalah dengan kod di atas setelah diisytiharkan secara global?

Terdapat sesuatu yang dipanggil Memori Bocor. Seperti yang dinyatakan di atas, pengisytiharan pembolehubah berlaku dalam timbunan memori dan ia mempunyai saiz terhad untuk diperuntukkan. Apabila anda terus mengisytiharkan pembolehubah global yang merupakan tatasusunan yang sangat besar dan bukannya nombor malah tidak digunakan, ini mengisi memori dan menghasilkan Memori Leak. Anda akan mendengar bahawa pembolehubah global adalah buruk kerana apabila kita terlupa untuk membersihkan, kita mengisi timbunan memori ini dan akhirnya penyemak imbas tidak akan dapat berfungsi.

Bagaimana pula dengan Tindanan Panggilan?

Jika kita ingat, Tindanan Panggilan yang membaca dan melaksanakan skrip. Mari gunakan kod untuk menjelaskannya.

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]

Dengan kod di atas, guni panggilan membaca baris pertama console.log(“x”); dan dimasukkan ke dalam tindanan panggilan, enjin JavaScript mengenali bahawa console.log telah ditambahkan, kemudian masukkannya ke dalam tindanan panggilan, jalankannya dan menghasilkan x. Selepas itu, ia mengalih keluar console.log pertama kerana ia telah selesai menjalankannya dan meletakkan ke dalam console.log(“y”) kedua, menambahkannya pada Tindanan Panggilan, laksanakan y dan alih keluar console.log kedua. Akhirnya mendapat console.log(“z”) menggunakan proses yang sama.

Ini adalah demo yang paling mudah, bagaimana jika contoh yang lebih kompleks? Mari kita berikan contoh biasa:

// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z

Sekarang, apakah yang berlaku dalam kod di atas mengikut timbunan panggilan? Mari lihat bagaimana ia akan menjalankan blok kod di atas :

//TUMPUAN PANGGILAN

Fungsi example1() akan dijalankan dahulu, kemudian fungsi example2() datang di atas timbunan panggilan dan dijalankan yang mencetak nombor 7 sebagai output selepas menyemak sama ada terdapat kod lain untuk dijalankan. Selepas ini, ia akan mula mengalih keluar daripada tindanan panggilan mengikut tertib bermula dengan console.log(‘7’), example2(), example1() dan tindanan panggilan kini kosong.

> Adakah kita ingat kenyataan ini? JavaScript ialah bahasa berulir tunggal yang tidak boleh disekat.

Berbenang tunggal bermakna ia mempunyai hanya satu tindanan panggilan. Ia boleh melaksanakan hanya satu perkara pada satu-satu masa dan adalah penting untuk menekankan bahawa Timbunan Panggilan adalah Mula-mula Masuk Terakhir seperti Tindanan.

Bahasa lain boleh mempunyai banyak tindanan panggilan yang dipanggil berbilang benang yang mungkin lebih berfaedah untuk mempunyai berbilang tindanan panggilan supaya kita tidak terus menunggu untuk tugasan.

> Tetapi, mengapakah JavaScript direka bentuk untuk berbenang tunggal?

Untuk menjawab soalan ini, biasanya menjalankan kod pada satu utas boleh menjadi agak mudah kerana tiada senario rumit yang timbul dalam persekitaran berbilang benang. Anda sebenarnya mempunyai satu perkara yang perlu diambil berat. Dalam berbilang benang mungkin terdapat masalah seperti Kebuntuan. Dengan teori ini, kita boleh dengan mudah mengetahui maksud pengaturcaraan segerak.

Pengaturcaraan segerak bermaksud: baris pertama kod dilaksanakan, yang kedua mengikuti dan yang ketiga dilaksanakan dll ...

Untuk menjadi lebih jelas ini bermakna console.log(“y”) tidak boleh dijalankan sehingga console.log(“x”) tamat dan console.log (“z”) tidak bermula sehingga kedua-dua dua yang pertama tamat kerana ia adalah Panggilan Tumpukan.

Pengaturcara berkemungkinan menggunakan tapak stackoverflow.com. apa maksud nama itu? Nah. jom tengok:

Cara limpahan tindanan berlaku

Imej di atas menunjukkan cara kebocoran memori boleh berlaku dan cara timbunan memori enjin JavaScript boleh melimpah. Di sini timbunan panggilan menerima banyak input yang lebih besar daripada saiz dan limpahan.

Adalah mungkin untuk menunjukkan limpahan tindanan dengan bantuan kod:

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]

Ingat bahawa JavaScript ialah satu urutan hanya satu pernyataan dilaksanakan pada satu masa . Berikut ialah masalah sekarang: bagaimana jika console.log(“y”) dalam blok kod berikut mempunyai tugas besar yang akan mengambil masa yang lebih lama untuk dilaksanakan sebagai contoh menggelung melalui tatasusunan yang mempunyai beribu-ribu atau berjuta-juta item? apa yang akan berlaku di sana?

// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z

Barisan pertama akan dilaksanakan, dan andaikan baris kedua mempunyai tugas yang besar untuk dilaksanakan, oleh itu baris ketiga akan menunggu tempoh yang lama untuk dilaksanakan. Dalam contoh di atas ini tidak bermakna tetapi mari kita fikirkan tapak web besar yang menjalankan operasi berat, pengguna tidak akan dapat melakukan apa-apa. Laman web akan membekukan sehingga tugas selesai dan pengguna menunggu di sana. Ini adalah pengalaman buruk apabila datang ke persembahan.

Nah, dengan tugasan segerak, jika kita mempunyai satu fungsi yang mengambil banyak masa, ia akan menahan talian. Jadi, nampaknya kita memerlukan sesuatu yang tidak menyekat. Ingat pernyataan yang saya nyatakan di atas: JavaScript ialah bahasa berulir tunggal yang tidak boleh disekat.

Sebaik-baiknya, dalam JavaScript kami tidak menunggu untuk perkara yang mengambil masa. Jadi, bagaimana kita hendak mengatasi masalah ini?

Sebagai penyelamat, terdapat pengaturcaraan tak segerak. Jadi, apakah ini?

Fikirkan asynchronous seperti tingkah laku. Pelaksanaan segerak sangat bagus kerana ia boleh diramal. Secara serentak kita tahu apa yang berlaku dahulu, apa yang berlaku seterusnya dll, tetapi ia boleh menjadi perlahan.

Apabila kami perlu melakukan perkara seperti pemprosesan imej atau membuat permintaan melalui rangkaian seperti panggilan API, kami menggunakan sesuatu yang lebih daripada tugas segerak iaitu Asynchronous.

Mari lihat bagaimana kita boleh melakukan pengaturcaraan tak segerak dengan kod:

const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]

Sekarang, berdasarkan kod di atas, nampaknya kita melangkau baris kedua dan melaksanakan baris ketiga dan menunggu 3 saat untuk mengeluarkan hasilnya. itu berlaku tak segerak.

Untuk memahami perkara ini dan apa yang berlaku mari gunakan angka berikut.

Persekitaran Masa Jalan JavaScript

Untuk JavaScript berjalan, kami memerlukan lebih daripada Memory Heap dan Call Stack. kita memerlukan apa yang dipanggil JavaScript Run-Time yang merupakan sebahagian daripada penyemak imbas. ia termasuk dalam pelayar. Di bahagian atas enjin, terdapat sesuatu yang dipanggil API web, Gilir Panggilan Balik dan Gelung peristiwa seperti yang ditunjukkan pada rajah.

mari kita bincangkan tentang kod sekarang di mana kita menggunakan fungsi setTimeout.

// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z

Fungsi setTimeout ialah sebahagian daripada API web dan bukan sebahagian daripada JavaScript, sebaliknya ia adalah yang diberikan oleh penyemak imbas kepada kami untuk membolehkan kami melakukan pengaturcaraan tak segerak. jadi, mari berikan butiran lanjut untuk penjelasan.

TINDUAN PANGGILAN: Console.log(“x”) masuk ke dalam tindanan panggilan , berjalan dan kami console.log ke penyemak imbas. Selepas itu, setTimeout(() =>{console.log(“y”);},3000); masuk ke timbunan panggilan kerana tugasan pertama selesai kemudian pergi ke tugasan kedua.

Sekarang, di sini ada satu perkara, semasa membaca kod, timbunan panggilan akan mengesan bahawa terdapat fungsi setTimeout yang telah ditetapkan dan ia bukan sebahagian daripada JavaScript tetapi sebahagian daripada API web ( Lihat angka JavaScript Run-Time Environment ) dan mempunyai ciri khas. Apa yang berlaku ialah setTimeout mencetuskan API WEB dan kerana API web dimaklumkan, fungsi itu akan muncul daripada timbunan panggilan.

Kini, API web memulakan pemasa selama tiga saat mengetahui bahawa dalam 3 saat ia perlu melakukan tugas itu. Ingat di sini, kerana timbunan panggilan kosong, enjin JavaScript terus ke baris 3 iaitu console.log(“z”); dan melaksanakannya. Itulah sebabnya kami mendapat hasil x,z tetapi kami telah menetapkanTimeout tiga saat dalam API web. kemudian, selepas tiga saat apabila had masa tamat, setTimeout berjalan dan melihat apa yang ada di dalamnya dan ia selesai. Sebaik sahaja ia selesai, API web akan mengenali bahawa ia mempunyai fungsi panggilan balik() setTimeout dan menambahkannya pada BARIS PANGGILAN sedang bersedia untuk menjalankannya.

Kita sampai ke bahagian terakhir iaitu** EVENT LOOP*. Yang ini terus menyemak sepanjang masa jika tindanan panggilan kosong. Apabila ia kosong dan tiada apa yang sedang berjalan dalam enjin JavaScript, ia akan menyemak baris gilir panggil balik dan mencari fungsi **panggilan balik()* kami dengan console.log(“z”) kemudian letakkannya dalam TINDAKAN PANGGILAN dan akan dijalankan. Setelah selesai, keluarkannya daripada Timbunan panggilan. Sekarang semuanya kosong dan dapatkan hasil x z y.

Kesimpulan: Dalam siaran ini, kami telah melihat banyak maklumat tentang perkara yang berlaku di bawah hud untuk memahami sepenuhnya logik JavaScript kedua-dua tugas yang dilakukan secara serentak dan Asynchronous.

Semoga ini akan membantu pengaturcara JavaScript baharu dan lanjutan untuk menikmati pengekodan dalam rangka kerja berkaitan JavaScript seperti ReactJS atau AngularJS kerana ini adalah asas untuk dimulakan apabila memahami logik lanjutan.

> Selamat Mengekod

Rujukan

https://www.freecodecamp.org/news/how-javascript-works-behind-the-scenes.
https://www.simplilearn.com/tutorials/javascript-tutorial/callback-function-in-javascript#

Atas ialah kandungan terperinci Bagaimana JavaScript berfungsi di bawah tudung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!