JavaScript Perde Arkasında Nasıl Çalışır?

Daha derine inelim ve tarayıcı motorunun içindeki JavaScript'in yürütülmesini anlayalım:

Hepimizin bildiği gibi JavaScript, birinci sınıf işlevlere ve engellemeyen bir olay döngüsü eşzamanlılık modeline sahip, üst düzey, prototip tabanlı, nesne yönelimli, yorumlanmış veya tam zamanında derlenmiş, tek iş parçacıklı bir programlama dilidir.

Ve gün geçtikçe daha popüler hale geliyor. Bu makale, JavaScript'i ve gerçekten nasıl çalıştığını daha derine inmeyi amaçlıyor.

genel bakış

Bu blog gönderisi yeni başlayanlar için uygundur ve deneyimli JS geliştiricileri için de yararlıdır.
Tüm bu kavramları ayrıntılı olarak inceleyeceğiz ve JavaScript'in gerçekte nasıl çalıştığını açıklayacağız.

Bu gönderide Yürütme bağlamını (bellek oluşturma aşaması ve kod yürütme aşaması), CallStack yürütmeyi ve JavaScript motorunu ve Çalışma Zamanı ortamını tartışacağız. Ayrıca Event döngüsü ve Stack Flow kavramlarını anlayın.

Bu, komut dosyasının yürütülmesinde yer alan tüm temel bileşenlere genel bir bakış olacaktır.
Burada aşağıdaki bileşenleri tartışacağız:

1. JavaScript Motoru.
2. JavaScript Çalışma Zamanı Ortamı.
3. Yürütme Bağlamı.
4. Yığın Yürütme ve Yığın Akışını arayın.
5. Olay Döngüsü.

Daha önce duymuş olabileceğiniz gibi, JavaScript yorumlanmış bir programlama dilidir . Bu, kaynak kodun yürütülmeden önce ikili kod halinde derlenmediği anlamına gelir.
Bu, satır satır yürütüldüğü anlamına gelir, ancak bu %100 doğru değildir.
JS tam zamanında (JIT) derlenmiş bir dildir, bu modern davranış onu web uygulamalarında hızlı yapar, aksi takdirde yorumlanan türe göre uygulamanın işlenmesini yavaşlatır. Bu nedenle , JS'nin Tam Zamanında (JIT) bir derleme dili olduğunu düşünüyoruz.

JavaScript motoru, JavaScript kodunu çalıştıran basit bir bilgisayar programıdır. JavaScript motorları, günümüzün tüm modern tarayıcılarında yerleşiktir.

Beğen : (Birkaç motor vardır)
# V8, Chrome için JavaScript Motorudur.
# Mozilla Firefox için örümcek maymun.
# Microsoft Edge için Çakra.
# Safari vb. için JavaScript çekirdeği.

Bildiğimiz gibi Chrome tarayıcı motoru “V8” JavaScript için çok popülerdir,
İki ana bileşenden oluşur:
1: Yığını Çağır ( ayrıntılı olarak sonra tartışın, sabırlı olun .. ) saklanmış.

Bu JavaScript Çalışma Zamanı Ortamı (JRE):

JS motoru hakkında tartıştığımız gibi, ancak JS motoru, diğer bazı bileşenlerle birlikte JRE'nin içinde çalışır. bazı eşzamansız istekler ve aramalar gibi.
Bileşenler şu şekilde listelenir:

1. JS Motoru
2. Web API'leri
3. Geri Arama Kuyruğu veya mesaj kuyruğu
4. Olay döngüsü

JS kodu çalıştırıldığında, bir genel yürütme bağlamı (GEC) oluşturulur.
Bu yürütme 2 aşamada oluşturulur:
1: Bellek oluşturma aşaması ve
2: Kod yürütme aşaması.

Bir örnek verelim;

Bu yukarıdaki kod parçacığı için,
Önce, GEC oluşturulur ve burada bellek aşaması oluşturulur ve tüm değişkenler için tanımsız bir değer atayın ve {} işlev bloğunun tamamını bellek alanına fnxn değeri olarak koyun.

İkincisi, şimdi 2. aşamada, yani kod yürütme aşamasında, tüm kodu satır satır incelemeye başlar.
Ve var a = 3'ü buldu, bu yüzden tanımsız olan bir değişkene 3 atadı ve bir sonraki satıra geçerek tanımsız olan b değişkenine 4 atadı. Şimdi add() işlevi için bir sonraki satıra geçin, yürütülecek hiçbir şey yoktur, dolayısıyla aynı kalır ve var c için bir sonraki satıra geçin.

Bu satırda, yeni bir yürütme bağlamı oluşturulur, ad add(3,4) işlevi için yerel yürütme bağlamı olarak adlandırılır, şimdi yeniden 2 faz oluşturulur, Bellek oluşturma aşaması
için , num1, num2 ve sonuç değişkenlerine tanımsız atar . Daha sonra kod yürütme aşamasında , add()'ın { } işlev bloğunda satır satır başlar. Num1 için 3 ve num2 için 4, Ve sonra var için sonuç = num1+num2 olarak atadı ve sonuç değişkeninde olduğu gibi 7 atadı. Bundan sonra sonuç döndürülür ve yürütme kontrolü var c = 7'de 9. satıra geri döner .

Return anahtar sözcüğü ile karşılaşıldığında, kontrolü çağrılan satıra döndürür ve ayrıca işlev yürütme bağlamı silinir.
Bir sonraki satır olan 10. satıra geçer: c'nin değerini konsolide eder.

Yürütme bağlamı perde arkasında gerçekten böyle çalışır.

Javascript, Call Stack'in yardımıyla kod yürütme bağlamı oluşturma ve silme işlemlerini yönetir ( daha sonra call stack'te tartışacağız )

Çağrı yığını :

Call Stack, yürütme bağlamlarının yürütme sırasını korur . Program Yığını, Kontrol Yığını, Çalışma Zamanı Yığını, Makine Yığını, Yürütme bağlamı yığını olarak da bilinir.
Ve JS'nin tek iş parçacıklı bir programlama dili olduğunu biliyoruz , bu da tek bir yığına sahip olduğu ve her seferinde bir satır çalıştırdığı anlamına gelir.

Sadece yukarıdaki kod referansını alıp Çağrı yığınının aynı kod parçacığı için nasıl çalıştığını açıklamak.

Burada, GEC oluşturuldu ve yığına düştü, ardından bir sonraki yerel yürütme bağlamı yığına açılır ve yürütmeden sonra dışarı çıkar ve GEC'e geri döner.
Ardından console.log(c) açılır ve yürütüldükten sonra açılır, ardından GEC'e geri pinterlenir.
Bu yürütme tamamlandıktan sonra GEC de yığından açılır ve yığın bir IDLE koşulu olarak boş hale gelir.

Olay Döngüsü :

JavaScript dili ayrıca iki şekilde görülebilir - eşzamanlı ve eşzamansız.

Eşzamanlı JS'de kod satır satır yürütülür, yani sıralı bir şekilde &
Eşzamansız JS'de hiçbir şey sıralı değildir, bu da bir kod satırının yok sayılacağı ve çoğunlukla web API'leri olarak bilinen davranışa göre daha sonra yürütüleceği anlamına gelir.

Bu nedenle, olay döngüsü, geri arama kuyruğu ile zaman uyumsuz kısmı işlemek için kullanılır ve yığının boşalmasını bekleyin, ardından yürütme için yığına gönderir.

Event Loop, JS'de ana yığının boş olup olmadığını sürekli kontrol eden bir özelliktir. Boş kaldığında da Geri Arama Kuyruğunu kontrol eder. Kuyrukta yürütülecek kodlar varsa bunlar teker teker çağrı yığınına aktarılır. Kod yürütüldükten sonra yığından ayrılır ve sıra boşalana kadar sıradaki sıradaki kod gelir.

Arkadaşlar konuyu toparlayalım ve bir sonraki gönderilerde görüşmek üzere……….