Ikuti saya untuk mempelajari kemahiran javascript var pra-penghuraian dan pengisytiharan fungsi improvement_javascript

1. var pembolehubah pra-penyusunan

Sintaks JavaScript adalah serupa dengan C, Java dan C#, secara kolektif dirujuk sebagai sintaks seperti C. Pelajar yang mempunyai pengalaman dalam pengaturcaraan C atau Java harus biasa dengan peraturan "isytihar dahulu, gunakan kemudian". Walau bagaimanapun, JavaScript boleh menggunakan pembolehubah dan fungsi sebelum ia diisytiharkan. Mari kita lihat lebih dekat misteri di bawah.

Mari kita lihat sekeping kod dahulu:

(function() {
 console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined
})();

Jalankan kod di atas dan ralat akan dilaporkan dengan serta-merta. Walau bagaimanapun, ini adalah apa yang kami jangkakan, kerana pembolehubah noSuchVariable tidak ditakrifkan sama sekali. Mari lihat kod berikut:

(function() {
 console.log(declaredLater); //undefined
 var declaredLater = "Now it's defined!";
 console.log(declaredLater);// "Now it's defined!"
})();

Pertama sekali, kod di atas adalah betul dan tiada masalah. Tetapi mengapa ia tidak melaporkan ralat? Pembolehubah declaredLater ditakrifkan selepas pernyataan panggilan? Mengapakah output tidak ditentukan?

Ini sebenarnya disebabkan oleh penghurai JavaScript. Penghurai meletakkan semua pembolehubah dan fungsi yang diisytiharkan dalam skop semasa pada permulaan skop Walau bagaimanapun, hanya pengisytiharan pembolehubah dimajukan ke permulaan skop ditinggalkan di tempatnya. Kod di atas sebenarnya kelihatan seperti ini kepada penghurai:

(function() {
 var declaredLater; //声明被提前到作用域开始处了！
 console.log(declaredLater); // undefined
 declaredLater = "Now it's defined!"; //赋值操作还在原地!
 console.log(declaredLater);//"Now it's defined!"
})();

Inilah sebabnya kod di atas tidak melaporkan pengecualian! Selepas pembolehubah dan fungsi "lanjutan", pembolehubah declaredLater sebenarnya diletakkan di hadapan fungsi panggilan Menurut definisi sintaks JavaScript, pembolehubah yang telah diisytiharkan tetapi tidak ditetapkan akan ditetapkan secara automatik oleh itu, cetakan pertama Nilai pembolehubah declaredLater tidak ditentukan Kemudian, kami menetapkan nilai kepada pembolehubah declaredLater, jadi apabila kami mencetak pembolehubah untuk kali kedua, Sekarang ia akan ditakrifkan.

Mari kita lihat contoh lain:

var name = "Baggins";
(function () {
 console.log("Original name was " + name);// "Original name was undefined"
 var name = "Underhill";
 console.log("New name is " + name);// "New name is Underhill"
})();

Dalam kod di atas, kami mula-mula mengisytiharkan nama pembolehubah Niat asal kami adalah untuk mengeluarkan pembolehubah nama yang ditakrifkan dalam skop global apabila mencetak pembolehubah nama untuk kali pertama, dan kemudian menentukan pembolehubah nama tempatan dalam fungsi kepada. meliputi pembolehubah global, dan akhirnya mengeluarkan nilai pembolehubah tempatan. Walau bagaimanapun, hasil keluaran pertama benar-benar tidak konsisten dengan jangkaan kami Sebabnya ialah pembolehubah tempatan yang kami takrifkan adalah "maju" dalam skopnya, iaitu, ia menjadi bentuk berikut:

var name = "Baggins";
(function () {
 var name; //注意：name 变量被提前了！
 console.log("Original name was " + name);// "Original name was undefined"
 name = "Underhill";
 console.log("New name is " + name);//"New name is Underhill"
})();

Oleh kerana JavaScript mempunyai "kebiasaan" sedemikian, adalah disyorkan agar anda meletakkan pengisytiharan pembolehubah di bahagian atas skop, supaya anda sentiasa mengingatkan diri anda untuk memberi perhatian.

2. Pengisytiharan fungsi adalah "lanjutan"

Apa yang saya bincangkan sebelum ini ialah pembolehubah, seterusnya mari bercakap tentang fungsi.

Terdapat dua situasi di mana fungsi adalah "lanjutan", satu ialah pengisytiharan fungsi, dan yang kedua ialah fungsi yang diberikan kepada pembolehubah sebagai nilai, iaitu ungkapan fungsi.

Mari kita bincangkan tentang situasi pertama dahulu, kod:

isItHoisted();//"Yes!"
function isItHoisted() { 
 console.log("Yes!");
}

Seperti yang ditunjukkan di atas, penterjemah JavaScript membenarkan anda menggunakannya sebelum pengisytiharan fungsi Dalam erti kata lain, pengisytiharan fungsi bukan hanya nama fungsi yang "lanjutan", tetapi keseluruhan definisi fungsi juga "lanjutan"! Jadi kod di atas boleh dilaksanakan dengan betul.

Mari kita lihat kes kedua: bentuk ungkapan fungsi. Mari mulakan dengan kod:

definitionHoisted();// "Definition hoisted!"
definitionNotHoisted();// TypeError: undefined is not a function
function definitionHoisted() { 
 console.log("Definition hoisted!");
}
var definitionNotHoisted = function () { 
 console.log("Definition not hoisted!");
};

Kami membuat perbandingan. Fungsi definitionHoisted dilaksanakan dengan betul, mengikut jenis pertama; pembolehubah definitionNotHoisted adalah "maju", tetapi tugasannya (iaitu, fungsi) tidak maju untuk mengatakan, ia benar-benar konsisten dengan "kemajuan" pembolehubah yang kita bincangkan sebelum ini, dan memandangkan nilai lalai pembolehubah "kemajuan" tidak ditentukan, ralat yang dilaporkan tergolong dalam "jenis ketidakpadanan", kerana undefined bukan fungsi, sudah tentu tidak boleh dipanggil.

Ringkasan
Melalui penjelasan di atas, ia boleh diringkaskan seperti berikut:

Pengisytiharan pembolehubah dimajukan ke bahagian atas skop dan tugasan kekal di tempat
Keseluruhan pengisytiharan fungsi adalah "lanjutan"
Apabila menggunakan ungkapan fungsi, hanya pembolehubah adalah "lanjutan", fungsi itu bukan "lanjutan"
3. Kesan sampingan var

Perbezaan kecil antara pembolehubah global tersirat dan pembolehubah global yang ditakrifkan secara eksplisit ialah keupayaan untuk membiarkan pembolehubah tidak ditentukan melalui pengendali padam.

Pembolehubah global yang dibuat melalui var (dicipta dalam mana-mana program di luar fungsi) tidak boleh dipadamkan.
Pembolehubah global tersirat yang dibuat tanpa var (tidak kira sama ada ia dicipta dalam fungsi) boleh dipadamkan.
Ini menunjukkan bahawa, secara teknikal, pembolehubah global tersirat bukanlah pembolehubah global sebenarnya, tetapi ia adalah sifat objek global. Atribut boleh dipadamkan melalui pengendali padam, tetapi pembolehubah tidak boleh:

// 定义三个全局变量
var global_var = 1;
global_novar = 2;  // 反面教材
(function () {
 global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var;  // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var;  // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在ES5严格模式下，未声明的变量（如在前面的代码片段中的两个反面教材）工作时会抛出一个错误。

4、单var形式声明变量

在函数顶部使用单var语句是比较有用的一种形式，其好处在于：

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
少代码（类型啊传值啊单线完成）
单var形式长得就像下面这个样子：

function func() {
 var a = 1,
  b = 2,
  sum = a + b,
  myobject = {},
  i,
  j;
 // function body...
}

您可以使用一个var语句声明多个变量，并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误（所有未初始化但声明的变量的初始值是undefined）和增加代码的可读性。在你看到代码后，你可以根据初始化的值知道这些变量大致的用途。

以上就是针对javascript的var预解析与函数声明提升的学习内容，希望对大家的学习有所帮助。