Analisis skop penuh pembolehubah JavaScript_Pengetahuan asas

Skop pembolehubah ialah kawasan dalam program di mana pembolehubah ditakrifkan.
Mari lihat contoh dahulu:

/* Kod 1 */

var scope = "global ";
function checkScope() {
 var scope = "local ";
 function childCheck() {
  var scope = "childLocal ";
  document.write(scope);
 }
 function childUndefined() {
  document.write(scope);
  var scope;
 }
 function childOverride() {
  scope = "childOverride ";
  document.write(scope);
 }
 document.write(scope); //输出"local"
 childCheck();   //输出"childLocal"
 childUndefined();  //输出"undefined"
 childOverride();  //输出"childOverride"
 document.write(scope); //输出"childOverride"
}
checkScope();    //输出"local childLocal undefinedchildOverride childOverride"
document.write(scope);  //输出"global "

Skop global dan skop tempatan
Pembolehubah global mempunyai skop global dan ditakrifkan di mana-mana dalam Javascript pembolehubah yang diisytiharkan di dalam fungsi adalah pembolehubah tempatan, dan skopnya adalah setempat dan hanya ditakrifkan di dalam badan fungsi. Output berikut seharusnya tidak mengejutkan pembaca.
/* Kod 2 */

var scope = "global";
function checkScope() {
 var scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"global"

Anda boleh menggunakan pembolehubah dalam skop pembolehubah global tanpa pernyataan var, tetapi anda mesti menggunakan penyataan var apabila mengisytiharkan pembolehubah tempatan, jika tidak, ia akan dianggap sebagai rujukan kepada pembolehubah global. Lihat kod di bawah:
/* Kod 3 */

var scope = "global";
function checkScope() {
 scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"local"

Tiada skop blok
Javascript tidak mempunyai skop peringkat blok dan pembolehubah yang diisytiharkan dalam fungsi ditentukan di seluruh fungsi. Kod berikut mungkin mengejutkan pembaca yang tidak dikenali:
/* Kod 4 */

var scope = "global";
function checkScope() {
 document.write(scope); //语句4.1
 var scope = "local"; //语句4.2
 document.write(scope);
}
checkScope();   //输出"undefinedlocal"

Memandangkan pembolehubah yang diisytiharkan dalam pernyataan 4.1 (var skop = "tempatan";) adalah sah dalam keseluruhan skop fungsi checkScope, apabila pernyataan 4.2 (document.write(skop);) dilaksanakan, skop merujuk kepada pembolehubah tempatan. Pada masa ini, skop pembolehubah tempatan belum ditentukan, jadi "tidak ditentukan" ialah output. Oleh itu amalan pengaturcaraan yang baik adalah mengumpulkan semua pengisytiharan pembolehubah pada permulaan fungsi.

Setelah memahami kandungan di atas, pembaca tidak boleh keliru jika melihat Kod 1.
Pembolehubah atribut objek
Pembolehubah atribut objek agak mudah difahami Pembaca yang melihat kod berikut tidak boleh keliru.
/* Kod 5 */

var scope = "global ";
var obj = new Object();
obj.scope = "object ";
obj.checkScope = function () {
 var scope = "loacl ";
 document.write(scope);   //输出"loacl"
 document.write(this.scope);  //输出"object"
 document.write(window.scope); //输出"global"
}
obj.checkScope(); //输出"loacl object global"

Skop yang dipanggil merujuk kepada julat sah pembolehubah ini dalam blok kod. Jika anda tidak memahami skop JavaScript, mungkin sukar untuk menyahpepijat kod anda.

Dalam fungsi, jika anda menggunakan var untuk mengisytiharkan pembolehubah, skop pembolehubah adalah terhad kepada bahagian dalam fungsi dan kod di luar fungsi tidak boleh mengakses pembolehubah. Jika anda mengisytiharkan fungsi dalam fungsi ini, fungsi dalaman juga boleh mengakses pembolehubah ini.

Sebaliknya, jika var tidak digunakan semasa mengisytiharkan pembolehubah, maka skop pembolehubah ini tidak terhad kepada fungsi ini. Enjin JavaScript akan menyemak sama ada pembolehubah telah ditakrifkan dalam skop global. Jika pembolehubah belum ditakrifkan, ia akan ditakrifkan sebagai pembolehubah global.

Fungsi boleh mengakses pembolehubah dalam skop yang sama:

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

Kod di luar skop pembolehubah tidak boleh mengakses pembolehubah:

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

Jangan gunakan pembolehubah dengan nama yang sama dalam skop, tetapi mempunyai nilai yang berbeza:

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

Selepas fungsi ditakrifkan, anda boleh melihat perubahan dalam nilai pembolehubah ​​​​dalam fungsi:

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

Skop juga merentasi — penutupan

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用

Komprehensif

Skop yang dipanggil merujuk kepada julat sah pembolehubah ini dalam blok kod. Jika anda tidak memahami skop JavaScript, mungkin sukar untuk menyahpepijat kod anda.

Dalam fungsi, jika anda menggunakan var untuk mengisytiharkan pembolehubah, skop pembolehubah adalah terhad kepada bahagian dalam fungsi dan kod di luar fungsi tidak boleh mengakses pembolehubah. Jika anda mengisytiharkan fungsi dalam fungsi ini, fungsi dalaman juga boleh mengakses pembolehubah ini.

Sebaliknya, jika var tidak digunakan semasa mengisytiharkan pembolehubah, maka skop pembolehubah ini tidak terhad kepada fungsi ini. Enjin JavaScript akan menyemak sama ada pembolehubah telah ditakrifkan dalam skop global. Jika pembolehubah belum ditakrifkan, ia akan ditakrifkan sebagai pembolehubah global.

Fungsi boleh mengakses pembolehubah dalam skop yang sama:

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

Kod di luar skop pembolehubah tidak boleh mengakses pembolehubah:

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

Jangan gunakan pembolehubah dengan nama yang sama dalam skop, tetapi mempunyai nilai yang berbeza:

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

Selepas fungsi ditakrifkan, anda boleh melihat perubahan dalam nilai pembolehubah ​​​​dalam fungsi:

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

Skop juga merentasi — penutupan

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用