作用域链详解

作用域链的概念

作用域链是JavaScript中查找变量的一种机制。当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端始终是当前执行代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。

function outer() {
  var outerVar = 'outer';
  
  function inner() {
    var innerVar = 'inner';
    console.log(outerVar); // 可以访问outerVar
    console.log(innerVar); // 可以访问innerVar
  }
  
  inner();
}

outer();

作用域链的创建过程

作用域链在函数创建时就已经确定，而不是在函数调用时。函数内部属性[[Scope]]保存了函数的作用域链。当函数被调用时，会创建一个执行环境，然后通过复制函数的[[Scope]]属性中的对象来构建执行环境的作用域链。

var globalVar = 'global';

function foo() {
  var fooVar = 'foo';
  
  function bar() {
    var barVar = 'bar';
    console.log(globalVar); // 可以访问globalVar
    console.log(fooVar);    // 可以访问fooVar
    console.log(barVar);    // 可以访问barVar
  }
  
  bar();
}

foo();

变量查找机制

当在某个执行环境中访问一个变量时，会沿着作用域链一级一级地向上查找。如果在当前变量对象中没有找到，就会继续查找外层环境的变量对象，直到全局环境。如果在全局环境中也没有找到，就会抛出ReferenceError。

var a = 1;

function test() {
  var b = 2;
  
  function inner() {
    var c = 3;
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
    console.log(d); // ReferenceError: d is not defined
  }
  
  inner();
}

test();

闭包与作用域链

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。由于作用域链的机制，内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

function createCounter() {
  var count = 0;
  
  return function() {
    count++;
    return count;
  };
}

var counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

块级作用域与作用域链

在ES6之前，JavaScript只有函数作用域和全局作用域。ES6引入了let和const关键字，带来了块级作用域。块级作用域会影响作用域链的构建方式。

function blockScopeExample() {
  if (true) {
    var varVariable = 'var';
    let letVariable = 'let';
    console.log(varVariable); // 'var'
    console.log(letVariable); // 'let'
  }
  
  console.log(varVariable); // 'var'
  console.log(letVariable); // ReferenceError: letVariable is not defined
}

blockScopeExample();

作用域链与this的关系

作用域链和this是两个不同的概念。作用域链用于变量查找，而this的值取决于函数的调用方式。即使在同一个作用域链中，this的值也可能不同。

var obj = {
  value: 'object value',
  getValue: function() {
    console.log(this.value);
    console.log(value); // ReferenceError: value is not defined
  }
};

obj.getValue();

作用域链的性能影响

由于变量查找需要沿着作用域链一级一级向上搜索，因此作用域链的深度会影响性能。通常建议将常用的变量放在局部作用域中，减少查找时间。

function performanceExample() {
  var localVar = 'local';
  
  // 更好的做法
  function inner1() {
    console.log(localVar);
  }
  
  // 较差的性能
  function inner2() {
    var localVar = window.localVar || document.localVar || 'default';
    console.log(localVar);
  }
}

作用域链与垃圾回收

作用域链会影响JavaScript的垃圾回收机制。如果一个变量被闭包引用，即使其所在函数已经执行完毕，该变量也不会被回收。

function createHeavyObject() {
  var largeObject = new Array(1000000).fill('data');
  
  return function() {
    console.log(largeObject[0]);
  };
}

var holdReference = createHeavyObject();
// largeObject不会被回收，因为闭包持有引用

动态修改作用域链

在某些情况下，可以使用with语句或eval动态修改作用域链，但这通常被认为是不好的实践，会导致性能下降和代码难以维护。

var obj = { a: 1, b: 2 };

with (obj) {
  console.log(a); // 1
  console.log(b); // 2
  c = 3; // 在非严格模式下，会在全局创建c变量
}

console.log(obj.c); // undefined
console.log(c);     // 3

作用域链与模块模式

模块模式利用闭包和作用域链来创建私有变量和公共接口，这是JavaScript中实现封装的一种常见方式。

var module = (function() {
  var privateVar = 'private';
  
  function privateMethod() {
    console.log(privateVar);
  }
  
  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

module.publicMethod(); // 'private'
console.log(module.privateVar); // undefined