Tafsiran mendalam mekanisme Hoisting dalam pengetahuan JavaScript_Basic

mekanisme angkat

Pengisytiharan pembolehubah Javascript mempunyai mekanisme pengangkatan Apabila enjin JavaScript dilaksanakan, ia akan menaikkan semua pengisytiharan pembolehubah ke hadapan skop semasa.

Lihat sekeping kod dahulu

var v = "hello";
(function(){
 console.log(v);
 var v = "world";
})();

Apakah hasil menjalankan kod ini?
Jawapannya ialah: undefined
Kod ini menggambarkan dua masalah,
Pertama, pembolehubah v dalam skop fungsi meliputi pembolehubah skop atas v. Kurangkan perubahan pada kod

var v = "hello";
if(true){
 console.log(v);
 var v = "world";
}  

Hasil output ialah "hello", menunjukkan bahawa JavaScript tidak mempunyai skop peringkat blok. Fungsi adalah satu-satunya struktur dalam JavaScript yang mempunyai skopnya sendiri.

Kedua, dalam skop fungsi, pengisytiharan pembolehubah v dipromosikan. Jadi kod awal adalah bersamaan dengan:

var v = "hello";
(function(){
 var v; //declaration hoisting
 console.log(v);
 v = "world";
})();  

Pengisytiharan, takrifan dan permulaan

Pengisytiharan mengisytiharkan kewujudan nama, definisi memperuntukkan ruang storan untuk nama itu dan permulaan memberikan nilai awal kepada ruang storan yang diperuntukkan oleh nama tersebut.
Gunakan C untuk menyatakan tiga konsep ini

extern int i;//Ini adalah pernyataan yang menunjukkan bahawa nama i sudah wujud di suatu tempat
int i;//Ini adalah untuk mengisytiharkan dan mentakrifkan nama i, dan memperuntukkan ruang storan untuk i
i = 0;//Ini ialah nama permulaan i, memberikan nilai awal 0
Ini adalah kes dalam javascript

var v;//Isytiharkan pembolehubah v
v = "hello";//(takrifkan dan) mulakan pembolehubah v
Oleh kerana JavaScript ialah bahasa dinamik, pembolehubahnya tidak mempunyai jenis tetap, dan saiz ruang storannya berubah dengan pemulaan dan penetapan Oleh itu, "takrifan" pembolehubahnya tidak sama dengan bahasa statik tradisional, dan takrifannya tidak relevan.

Pengisytiharan kenaikan pangkat

Pengisytiharan dalam skop semasa akan dinaikkan pangkat ke hadapan skop, termasuk pengisytiharan pembolehubah dan fungsi

(function(){
 var a = "1";
 var f = function(){};
 var b = "2";
 var c = "3";
})();  

Pengisytiharan pembolehubah a, f, b, c akan dinaikkan pangkat ke hadapan skop fungsi, serupa dengan yang berikut:

(function(){
 var a,f,b,c;
 a = "1";
 f = function(){};
 b = "2";
 c = "3";
})();

Sila ambil perhatian bahawa ungkapan fungsi tidak digalakkan, yang juga merupakan perbezaan antara ungkapan fungsi dan pengisytiharan fungsi. Mari kita lihat dengan lebih dekat perbezaan antara keduanya:

(function(){
 //var f1,function f2(){}; //hoisting,被隐式提升的声明

 f1(); //ReferenceError: f1 is not defined
 f2();

 var f1 = function(){};
 function f2(){}
})();  

Pengisytiharan fungsi f2 dalam kod di atas dipromosikan, jadi tiada masalah untuk memanggil f2 lebih awal. Walaupun pembolehubah f1 juga dipromosikan, nilai f1 selepas promosi tidak ditentukan, dan nilai awal sebenarnya ditetapkan apabila ungkapan fungsi dilaksanakan. Jadi hanya kenyataan yang dipromosikan.

Arahan peleraian nama

Nama dalam JavaScript memasuki skop dalam empat cara dan susunan keutamaannya adalah seperti berikut:
1. Bahasa terbina dalam: semua skop mempunyai kata kunci ini dan argumen
2. Parameter formal: Parameter fungsi adalah sah dalam skop fungsi
3. Pengisytiharan fungsi: dalam bentuk fungsi foo() {}
4. Pengisytiharan berubah: dalam bentuk bar var;

Keutamaan pengisytiharan nama adalah seperti yang ditunjukkan di atas, iaitu, jika nama pembolehubah adalah sama dengan nama fungsi, maka nama fungsi akan mengatasi nama pembolehubah, tanpa mengira susunannya dalam kod. Walau bagaimanapun, nama-nama itu dimulakan dalam susunan di mana ia ditulis dalam kod, dan tidak terjejas oleh keutamaan di atas. Lihat kod:

(function(){
  var foo;
  console.log(typeof foo); //function

  function foo(){}

  foo = "foo";
  console.log(typeof foo); //string
})();  

Jika terdapat berbilang pembolehubah dengan nama yang sama dalam parameter formal, parameter terakhir dengan nama yang sama akan menimpa parameter lain dengan nama yang sama, walaupun parameter terakhir dengan nama yang sama tidak ditentukan.

Terdapat pengecualian kepada keutamaan resolusi nama di atas, seperti keupayaan untuk mengatasi argumen nama terbina dalam bahasa.

Ungkapan fungsi bernama

Ungkapan fungsi boleh diberi nama sama seperti pengisytiharan fungsi, tetapi ini tidak menjadikan ungkapan fungsi sebagai pengisytiharan fungsi. Nama ungkapan fungsi bernama tidak memasuki ruang nama dan tidak dipromosikan.

f();//TypeError: f bukan fungsi
foo();//ReferenceError: foo tidak ditakrifkan
var f = function foo(){console.log(typeof foo);};
f();//fungsi
foo();//ReferenceError: foo tidak ditakrifkan
Nama ungkapan fungsi bernama hanya sah dalam skop fungsi.

Mari kita lihat contoh berikut:

var myval = "my global var";
(function() {
 console.log(myval); // log "my global var"
})();

Kod di atas jelas akan mengeluarkan "var global saya", tetapi jika kita mengubah suai sedikit kod di atas seperti berikut:

var myval = "my global var";
(function() {
 console.log(myval); // log "undefined"
 var myval = "my local var";
})();

Hasil pelaksanaan ialah output yang tidak ditentukan Sebab untuk keputusan ini ialah pengisytiharan pembolehubah dipromosikan Kod di atas adalah bersamaan dengan yang berikut:

var myval = "my global var";
(function() {
 var myval;
 console.log(myval); // log "undefined"
 myval = "my local var";
})();

Hanya bahagian pengisytiharan pembolehubah dipromosikan dan tidak dimulakan serta-merta, jadi undefined akan menjadi output.

Walau bagaimanapun, mekanisme promosi ini bukan sahaja dicerminkan dalam pembolehubah biasa, tetapi juga dalam fungsi. Contohnya, kod berikut tidak boleh dilaksanakan dengan betul:

(function() {
 fun(); // Uncaught TypeError: undefined is not a function
 var fun = function() {
 console.log("Hello!");
 }
})();

Kerana ia bersamaan dengan:

(function() {
 var fun;
 fun(); // Uncaught TypeError: undefined is not a function
 fun = function() {
 console.log("Hello!");
 }
})();

Oleh kerana pengisytiharan fungsi juga dinaikkan dan tidak dimulakan serta-merta, ralat berlaku.

Sudah tentu, cara mentakrifkan fungsi ini dipanggil "ungkapan fungsi" dan akan ada mekanisme promosi Jika kaedah "pengisytiharan fungsi" berikut, tidak akan ada masalah dengan mekanisme promosi sama sekali.

(function() {
 fun();
 function fun() {
 console.log("Hello!"); // log "Hello!"
 }
})();

Ini juga merupakan perbezaan utama antara pengisytiharan fungsi dan ungkapan fungsi.