JS作用域深度解析

更新時間：2016年12月29日 11:15:06 作者：光明大神棍

這篇文章主要為大家詳細介紹了JS作用域，剖析JS的作用域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家深度剖析JS的作用域，代碼注釋詳細，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>作用域問題</title>
</head>
<body>
<script>
 /*
 * 1.全局變量與局部變量
 * 外層變量可以在內層調用（全局），內層變量不能在外層調用（局部）
 * */

 var a = 1;
 (function () {
  // 外部變量可以在內部調用
  alert(a);
 })();

 /*function test() {
  // 內部變量不能在外部調用
  var a = 2;
 }
 alert(a); // 報錯*/

 /*
 * 下面舉個例子：
 * 函數(shù)調用只是回到函數(shù)定義的地方，調用一下函數(shù)
 * 這里在bbb函數(shù)中，調用aaa函數(shù)，
 * 這時的aaa函數(shù)并不是被放入bbb函數(shù)中，而是在原定義的地方
 * 這是的aaa中沒有變量a，所以去訪問全局變量中的a
 * */

 /*var a = 10;
 function aaa() {
  alert(a);
 }
 function bbb() {
  var a = 20;
  aaa();
 }
 bbb(); // 10*/

 /*
 * 2.當var不加的時候，會自動變成全局變量
 * 在全局環(huán)境中，不加var和加var效果一樣，都是全局變量
 * 在局域環(huán)境中，加var會被定義為局部變量，不加var會被定義為全局變量
 * */

 /*function test() {
  var a = 10; // 外部訪問不到
  b = 10;  // 相當于全局變量
  // 上面相當于：var a = b = 10;
 }
 test();
 alert(b); // 10
 alert(a); // 報錯*/

 /*
 * 3.變量查找按照就近原則去查找
 * var定義的變量，當就近查找沒有找到就去外層查找
 * */

 /*var a = 10;
 (function() {
  var a = 20;
  // a在匿名函數(shù)中var定義了，所以找到為20
  alert(a); // 20
 })();*/

 /*var a = 10;
 (function() {
  a = 20; // 相當于全局變量，將外部的var a = 20;
  // 在匿名函數(shù)中沒有找到var定義的a，然后去外層去查找
  // 外部查找到了，var a = 10 = 20;
  alert(a); // 20
 })();*/

 /*var a = 10;
 (function() {
  // 在匿名函數(shù)中沒有找到var定義的a，然后去外層去查找
  // 外部查找到了，var a = 10
  alert(a); // 10
  a = 20;
 })();*/

 /*var a = 10;
 (function() {
  // 在匿名函數(shù)中找到var定義的a，
  // 這里的var a = 20,存在變量提升,
  // 在執(zhí)行alert(a)之前，變量提示有var a;
  // 但是a沒有值，所有返回undefined
  alert(a); // undefined
  var a = 20;

  // 在變量提升的情況下，相當于下面：
  // var a;
  // alert(a);
  // a = 20;
 })(;*/

 /*var a = 10;
 (function() {
  // 執(zhí)行bbb,bbb中的a=20,但是與匿名函數(shù)和全局變量a無關
  bbb();
  // 在匿名函數(shù)中查找var定義的a,發(fā)現(xiàn)沒有
  // 繼續(xù)在外層中查找，發(fā)現(xiàn)了 var a = 10;
  alert(a); // 10
  function bbb() {
   var a = 20;
  }
 })();*/

 /* var a = 10;
 (function() {
  bbb();
  // 在匿名函數(shù)中查找var定義的a,發(fā)現(xiàn)沒有
  // 繼續(xù)在外層中查找，發(fā)現(xiàn)了 var a = 10 = 20;
  alert(a); // 20
  function bbb() {
   // 沒有var定義，所有為全局變量，外面的全局變量 var a = 10 = 20;
   a = 20;
  }
 })();*/


 /*
 * 當參數(shù)與局部變量重名時，優(yōu)先級等同
 * */

 /*var a = 10;
 (function (a) {
  // 這里的參數(shù)a是基本類型，按值傳參的
  // 相當于在匿名函數(shù)內部重新定義了一個a，
  // 且與外層的a不相關
  a += 3;
 })(a);
 alert(a); // 10*/

 /*var a = [1,2,3];
 (function (a) {
  // 這里的參數(shù)a是特殊類型，按引用傳參的
  // 相當于在匿名函數(shù)內部重新定義了一個a，
  // 但是這個a是外層a的一個別名，它們引用了同一個地址
  // 所以內部a添加值，外部a可以訪問到
  a.push(4);
 })(a);
 alert(a); // [1,2,3,4]*/


 /*var a = [1,2,3];
 (function (a) {
  // 這里的參數(shù)a是特殊類型，按引用傳參的
  // 相當于在匿名函數(shù)內部重新定義了一個a，
  // 但是這個a是外層a的一個別名，它們引用了同一個地址
  // 所以內部a添加值，外部a可以訪問到

  // 但是，這里的a又重新賦值了新的數(shù)組，斷開了與外層的關系
  a = [1,2,3,4];
 })(a);
 alert(a); // [1,2,3]*/



</script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: