关于前端:JavaScript基础深入了解作用域与作用域链

万丈高楼平地起，学习根底很重要。

执行环境（execution context）是 JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权拜访的其余数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保留在这个对象中。尽管咱们编写的代码无法访问这个对象，但解析器在解决数据时会在后盾应用它。

每个执行环境都有一个执行环境对象。

全局执行环境是最外围的一个执行环境。在 Web 浏览器中，全局执行环境被认为是 window 对象。

全局执行环境直到应用程序退出，例如敞开网页或浏览器时才会被销毁。

每个函数都有本人的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。

在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。ECMAScript 程序中的执行流正是由这个不便的机制管制着。

作用域能够分为：

全局作用域
部分作用域
块级作用域（es6）

全局变量领有全局作用域。变量和函数会挂载到 window 对象上。

var scope = 'global'; // 申明一个全局变量
function checkScope () {
  var scope = 'local'; // 申明一个同名局部变量
  myscope = 'local';
  return scope;        // 返回局部变量的值，而不是全局变量的值
}

window.myscope // undefined => checkScope() 还未执行，该变量未声明
checkScope();  // local
window.myscope // local

局部变量是部分作用域，仅在函数体内有用。

var scope = 'global';
function checkScope () {
  var scope = 'local';
  function nested() {
    var scope = 'nested';
    return scope;
  }
  return nested();}

checkScope() // nested => 返回的是 nested() 的 scope 
window.scope  // global => 全局变量 scope 并未被笼罩

函数体内局部变量优先级高于同名全局变量。同名全局变量会被笼罩。

scope = 'global';    // 申明一个全局变量，能够不必 var 申明
function checkScope2 () {
  scope = 'local';   // 批改了全局变量 scope
  myscope = 'local'; // 显式申明了一个新的全局变量
  return [scope, myscope];
}

checkScope2(); // [local, local] 
window.scope; // local => 全局变量批改了
window.myscope; // local => 全局命名空间搞乱了

var 申明变量会晋升，外部变量可能会笼罩外层变量

var tmp = '哈哈';

function f() {console.log(tmp);
  if (false) {var tmp = 'hello world';}
}
f(); // undefined => 现实状况应该输入值“哈哈”

起因在于，预编译后，if 语句内的 temp 申明晋升了

var tmp = '哈哈';

function f() {
  var tmp 
  console.log(tmp); // 打印的是 if 外面晋升 temp
  if (false) {tmp = 'hello world';}
}
f();

ES5 没有块级作用域。使用不当会造成变量泄露。

for (var k = 0; k < 5; k++) {setTimeout(function () {console.log('inside', k);
  }, 1000);
}
   
console.log('outside', k); // outside 5  => 现实状况下，k 仅在 for 循环中无效，这里不应该输入 5，应该提醒 k is not defined
// 距离 1s，别离输入 5 个 inside 5 => 现实状况下，应该输入 0 1 2 3 4

window.k; // 5 => 可看出 k 是全局变量，所以当执行 for 外面的语句时，k 曾经循环完了 5 次，此时 k = 5

再来一题

var test = function() {var arr = [];
  for (var i = 0; i < 3; i++) {console.log('开始循环了', i)
    arr[i] = function() {return i * i;};
  }
  return arr;
};
 
var a = test(); // 输入“开始循环了 0 1 2”=> 此时 arr[i]是还未执行的，i 曾经等于 3 了
a[1](); // 9
a[2](); // 9

通过后面的介绍，能够晓得，ES5 是没有块级作用域的。变量使用不当，容易造成变量泄露，呈现很多不合理场景。为了防止这种状况呈现，咱们能够应用以下办法：

以下都是针对 ES5 没有块级作用域。使用不当会造成不合理场景 列举的例子进行批改。

for (var k = 0; k < 5; k++) {(function(k){
    // 这里是块级作用域
    setTimeout(function (){console.log('inside', k);
     },1000);
  })(k);
}

console.log('outside', k);
// 输入 outside 5
// 再顺次输入 inside 0 1 2 3 4

var _loop = function _loop(k) {
  // 这里是块级作用域
  setTimeout(function () {console.log(k);
  }, 1000);
};

for (var k = 0; k < 5; k++) {_loop(k);
}
// 顺次输入 0 1 2 3 4

1、2 写法都是利用了 JS 中调用函数传递参数都是值传递的特点

for (let k = 0; k < 5; k++) {setTimeout(function () {console.log(k);
  }, 1000, k);
}
// 顺次输入 0 1 2 3 4

for (let k = 0; k < 5; k++) {setTimeout(function () {console.log(k);
  }, 1000);
}
   
console.log(k); // k is not defined
// 距离 1s，别离输入 inside 0 1 2 3 4

关注执行程序

当代码在一个环境中执行时，会创立变量对象的一个作用域链（scope chain）。

作用域链的用处，是保障对执行环境有权拜访的所有变量和函数的有序拜访。
作用域链的前端，始终都是以后执行的代码所在环境的变量对象。如果这个环境是函数，则将其流动对象（activation object）作为变量对象。流动对象在最开始时只蕴含一个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。
作用域链中的下一个变量对象来自蕴含（内部）环境，而再下一个变量对象则来自下一个蕴含环境。这样，始终连续到全局执行环境。
全局执行环境的变量对象始终都是作用域链中的最初一个对象。

下面的阐明是从《JavaScript 权威指南》指南中摘抄进去的。

简略点总结就是：

当你应用一个变量时，会先从以后作用域找，如果找不到就往上找，一层一层往直到找到全局作用域都还没找到，就抛出谬误，阐明没有这个变量。这种一层一层的关系，就是作用域链。

var a = 100
function F1() {
    var b = 200
    function F2() {
        var c = 300
        console.log(a) // 100 顺作用域链向父作用域找
        console.log(b) // 200 顺作用域链向父作用域找
        console.log(c) // 300 本作用域的变量
        console.log(d) // ReferenceError:d is not defined 找到 window 都找不到，变量不存在，报错
    }
    F2()}
F1()

关于前端:JavaScript基础深入了解作用域与作用域链

前言

前置常识

执行环境

全局执行环境

函数执行环境

作用域

1. 全局作用域

2. 部分作用域

3. 作用域优先级

4. 同名变量

5.ES5 模仿块级作用域

块级作用域

1. 借助立刻执行函数

2. 定义函数并传值

3. 应用 setTimeout 的第三个参数

4. 应用 let、const 申明变量

作用域链