Pemahaman mendalam tentang bagaimana mesin JavaScript mengeksekusi kode JS

Cara cepat memulai VUE3.0: Masuk ke pembelajaran

Rekomendasi terkait: Tutorial JavaScript

Kita mungkin sering mendengar "lingkungan eksekusi", "cakupan", "prototipe (rantai)", "konteks eksekusi", dll. Apa yang dijelaskannya?

Menjalankan kode JS

Kita tahu bahwa js adalah bahasa yang diketik dengan lemah, dan tipe variabel hanya ditentukan saat runtime. Ketika mesin js mengeksekusi kode js, ia juga akan melakukan analisis leksikal , analisis sintaksis , analisis semantik , dan pemrosesan lainnya dari atas ke bawah, dan menghasilkan AST (pohon sintaksis abstrak) setelah analisis kode selesai, dan akhirnya menghasilkan kode mesin bahwa CPU dapat mengeksekusi berdasarkan AST dan mengeksekusi.

Selain itu, mesin JS juga akan melakukan pemrosesan lain saat mengeksekusi kode. Misalnya, ada dua tahapan di V8:

• Tahap kompilasi: Tahap ini akan membuat konteks eksekusi, termasuk pembuatan objek variabel (VO) (ini akan menjadi Diinisialisasi ke tidak terdefinisi), membuat rantai cakupan, menentukan penunjuk ini, dll. Setiap kali Anda memasuki lingkungan pengoperasian yang berbeda. V8 akan selalu membuat konteks eksekusi baru.
• Fase eksekusi: Konteks eksekusi yang dibuat dalam fase kompilasi didorong ke tumpukan panggilan dan menjadi konteks eksekusi yang berjalan. Setelah kode dijalankan, keluarkan dari tumpukan panggilan. (Ada proses VO - AO di sini: variabel digunakan ketika JavaScript memberikan nilai ke variabel. Pada saat ini, objek variabel akan diubah menjadi objek aktif, dan objek aktif yang dikonversi dapat diakses)

Hal ini mengarah ke dua konsep: "Konteks eksekusi" dan "rantai cakupan".

Konteks eksekusi JavaScript

Dari penjelasan di atas kita dapat mengetahui: ketika kode js mengeksekusi sepotong kode yang dapat dieksekusi, konteks eksekusi yang sesuai akan dibuat.
Pertama-tama, ada konsep yang sesuai dengan kode yang dapat dieksekusi di js: "lingkungan eksekusi" - lingkungan global, lingkungan fungsi, dan eval .
Kedua, untuk setiap konteks eksekusi, ada tiga atribut penting:

• objek variabel (yaitu "VO")
• rantai lingkup
• ini.

Mari kita lihat dua bagian kode:

var scope="global scope";
	var scope="lingkup lokal";
	fungsi f(){
		cakupan pengembalian;
	}
	return f();}checkscope()

;
	var scope="lingkup lokal";
	fungsi f(){
		cakupan pengembalian;
	}
	return f;}checkscope()();

Apa yang akan mereka cetak?

Mengapa? Jawabannya adalah tumpukan konteks eksekusinya berbeda!

Apa yang dimaksud dengan "tumpukan konteks eksekusi"?
Saat mengeksekusi kode yang dapat dieksekusi, persiapan akan dilakukan terlebih dahulu. "Persiapan" di sini secara profesional disebut "konteks eksekusi". Namun dengan bertambahnya kode yang dapat dieksekusi seperti fungsi, bagaimana cara mengelola begitu banyak konteks eksekusi? Jadi mesin JS menciptakan konsep tumpukan konteks eksekusi.

untuk

mensimulasikan perilakunya (selalu ada konteks eksekusi global globalContext di bagian bawah tumpukan).

Kita mendefinisikan EStack, pertama

EStack=[globalContext]

;

push(<checkscope> functionContext); EStack.push(<f> functionContext);EStack.pop();EStack.pop();

Dan potongan kode kedua seperti ini:

EStack.push(<checkscope> functionContext); EStack.pop();EStack.push (<f> functionContext);EStack.pop();

Alasannya adalah Anda mungkin perlu mempelajari konsep "penutupan" terlebih dahulu!

Ngomong-ngomong, bagaimana cara mencapai "penghematan data jangka panjang" dalam "modulasi front-end"?
cache? TIDAK. Penutup!

Cakupan JavaScript dan Rantai Cakupan

Pertama-tama, cakupan mengacu pada area dalam program di mana variabel didefinisikan. Cakupannya menentukan cara menemukan variabel, yang menentukan hak akses kode yang sedang dijalankan ke variabel tersebut.
Ada dua jenis cakupan: cakupan statis dan cakupan dinamis .
Lingkup statis yang digunakan oleh JS juga disebut "lingkup leksikal". Ruang lingkup suatu fungsi ditentukan ketika fungsi tersebut didefinisikan.

Dari penjelasan di atas, variabel dalam lingkup leksikal akan memiliki cakupan tertentu selama proses kompilasi. Cakupan ini adalah "konteks eksekusi saat ini". Setelah ES5 kami menggunakan "lingkungan leksikal" alih-alih cakupan untuk menggambarkan konteks eksekusi. Lingkungan leksikal terdiri dari dua anggota:

• Catatan lingkungan leksikal mandiri: digunakan untuk mencatat objek variabel dalam lingkungan leksikalnya sendiri
• Referensi lingkungan leksikal eksternal: digunakan untuk mencatat referensi yang ada di lingkungan leksikal luar

Mari kita lihat contohnya:

var value=1 ;fungsi foo(){
	console.log(nilai);}bilah fungsi(){
	nilai var=2;
	foo();}bar();

Melihat kembali definisi di atas, apa yang harus dicetak?

Mari kita analisa proses eksekusinya:
Jalankan fungsi foo(), cari dulu di dalam fungsi foo untuk melihat apakah ada nilai variabel lokal. Jika tidak, cari kode pada layer paling atas berdasarkan posisi saat ditentukan yaitu nilai=1 sehingga hasilnya akan tercetak 1.

Tentu saja, ini tidak sesederhana itu dan dapat diringkas. Anda dapat menganalisisnya dari perspektif konteks eksekusi.

Membangun Rantai Lingkup

Di atas kita berbicara tentang dua komponen lingkungan leksikal (ruang lingkup). Dikombinasikan dengan konteks eksekusi, tidak sulit untuk menemukan bahwa melalui referensi lingkungan leksikal eksternal, cakupannya dapat diperluas sepanjang tumpukan lapis demi lapis, membentuk struktur rantai yang memanjang keluar dari lingkungan saat ini.

Mari kita lihat contoh lain:

function foo(){
	konsol.dir(bar);
	var a=1;
	bilah fungsi(){
		sebuah=2;
	}}console.dir(foo);foo();

]

[[scope]] objeknya sendiri

foo[[scope]]=[globalContext];

( ), itu juga akan memasukkan periode definisi dan periode eksekusi fungsi foo secara berturut-turut.

akan

[[scope]] cakupan bawaan global dan cakupan bawaan foo

bar[[scope]]=[fooContext,globalContext];

poin ini: "JS akan meneruskan referensi lingkungan leksikal eksternal yang digunakan untuk membuat rantai cakupan objek variabel, sehingga memastikan akses terurut ke variabel dan fungsi yang dapat diakses oleh lingkungan eksekusi."

Mari kita kembali ke pertanyaan dalam konteks eksekusi, kita katakan sebelumnya. Apa perbedaan di antara keduanya? Mari kita bahas mengapa mereka mencetak “lingkup lokal” dengan cara yang sama: Kalimatnya masih sama “JS menggunakan cakupan leksikal, dan cakupan fungsi bergantung pada lokasi di mana fungsi tersebut dibuat. ” - Eksekusi fungsi JS Rantai cakupan digunakan, yang dibuat saat fungsi didefinisikan. Fungsi bersarang f() didefinisikan dalam rantai cakupan ini, dan cakupan variabel di dalamnya harus merujuk ke variabel lokal, kapan pun dan di mana pun f() dijalankan, pengikatan ini tetap valid ketika f() dijalankan.

Kueri variabel berdasarkan rantai cakupan

Ketika suatu variabel tidak dapat ditemukan dalam catatan lingkungan leksikalnya sendiri, variabel tersebut dapat dicari ke lapisan terluar berdasarkan referensi lingkungan leksikal eksternal hingga referensi lingkungan leksikal eksternal di lingkungan leksikal terluar adalah null .
Mirip dengan ini adalah "pencarian berdasarkan rantai prototipe dalam objek":

• Prototipe: Setiap objek JS (kecuali null) dikaitkan dengan objek lain saat objek ini dibuat. Setiap objek "mewarisi" properti dari prototipe.
• Saat membaca atribut suatu instance, jika tidak dapat ditemukan maka akan mencari atribut pada prototype yang berhubungan dengan objek tersebut. Jika tidak dapat ditemukan maka akan mencari prototype dari prototype tersebut, sampai ke atas level ( __proto__ is null)

. Perbedaannya juga jelas: rantai prototipe adalah tautan yang menetapkan pewarisan objek melalui atribut prototipe; sedangkan rantai cakupan mengacu pada penutupan yang memungkinkan fungsi internal mengakses fungsi eksternal. Baik secara langsung atau tidak langsung, semua rantai lingkup fungsi pada akhirnya terhubung dengan konteks global.

Rekomendasi terkait: Tutorial pembelajaran JavaScript.

Di atas adalah pemahaman mendalam tentang bagaimana mesin JavaScript mengeksekusi kode JS. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Cina!