作用域链详解

作用域链的概念

作用域链是JavaScript中一个核心机制，决定了变量和函数的可访问性。每个执行上下文都有一个关联的作用域链，本质上是一个指向变量对象的指针列表。当代码试图访问某个变量时，JavaScript引擎会沿着这条链依次查找。

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

outer();

作用域链的构成

作用域链由当前执行环境的变量对象和所有父级执行环境的变量对象组成。具体来说：

1. 函数被创建时，会将当前作用域链保存到内部属性[[Scope]]中
2. 函数被调用时，会创建新的执行上下文
3. 创建活动对象(AO)并推入作用域链前端
4. 将保存的[[Scope]]添加到作用域链中

var globalVar = 'global';

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

foo();

词法作用域与作用域链

JavaScript采用词法作用域（静态作用域），函数的作用域在函数定义时就已确定，而不是在调用时。这种机制直接影响作用域链的形成方式。

var x = 10;

function createFunction() {
  var x = 20;
  return function() {
    console.log(x);
  };
}

var fn = createFunction();
fn(); // 输出20，而不是10

闭包与作用域链

闭包是函数和声明该函数的词法环境的组合。即使函数在其词法环境之外执行，闭包也能访问原始作用域链。

function makeCounter() {
  let count = 0;
  
  return function() {
    return count++;
  };
}

const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1

块级作用域的影响

ES6引入的let和const带来了块级作用域，这对传统的作用域链机制产生了重要影响。

function blockScopeExample() {
  if (true) {
    let blockVar = 'block';
    var functionVar = 'function';
  }
  
  console.log(functionVar); // 可以访问
  console.log(blockVar); // 报错：blockVar未定义
}

blockScopeExample();

作用域链的查找过程

当访问一个变量时，JavaScript引擎会按照以下顺序查找：

1. 当前执行上下文的变量对象
2. 外层函数的变量对象
3. 继续向外直到全局对象
4. 如果都找不到则报错

var globalVar = 'global';

function outer() {
  var outerVar = 'outer';
  
  function inner() {
    var innerVar = 'inner';
    console.log(globalVar); // 查找顺序：inner -> outer -> global
  }
  
  inner();
}

outer();

作用域链与this的区别

作用域链和this是两个完全不同的概念。作用域链用于变量查找，而this的值取决于函数的调用方式。

var value = 'global';

const obj = {
  value: 'object',
  method: function() {
    console.log(this.value); // 'object' (this指向obj)
    console.log(value); // 'global' (通过作用域链查找)
  }
};

obj.method();

作用域链的性能考虑

过深的作用域链查找会影响性能。应尽量减少全局变量的使用，将常用变量放在更近的作用域中。

// 不推荐
function slowLookup() {
  for (var i = 0; i < 10000; i++) {
    console.log(document); // 每次都要沿作用域链查找
  }
}

// 推荐
function fastLookup() {
  var doc = document; // 缓存引用
  for (var i = 0; i < 10000; i++) {
    console.log(doc);
  }
}

作用域链与模块模式

模块模式利用闭包和作用域链来创建私有变量和公共接口。

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

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

作用域链的特殊情况

with语句和catch子句会临时修改作用域链，但这种做法通常不推荐使用。

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

with (obj) {
  console.log(a + b); // 3
  a = 10;
}

console.log(obj.a); // 10

try {
  throw new Error('test');
} catch (e) {
  console.log(e.message); // 'test'
}

作用域链与原型链的关系

作用域链用于变量查找，原型链用于属性查找，两者是完全独立的机制。

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

var person = new Person('Alice');

// 原型链查找
person.sayName(); // 'Alice'

// 作用域链查找
var say = person.sayName;
say(); // undefined (this指向改变)

作用域链在异步代码中的表现

异步回调函数仍然遵循词法作用域规则，保持定义时的作用域链。

function asyncExample() {
  var localVar = 'local';
  
  setTimeout(function() {
    console.log(localVar); // 可以访问定义时的作用域
  }, 1000);
}

asyncExample();

作用域链与事件处理

事件处理函数同样保持其定义时的作用域链。

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // 总是输出buttons.length
  });
}

// 使用let修复
for (let j = 0; j < buttons.length; j++) {
  buttons[j].addEventListener('click', function() {
    console.log(j); // 输出对应的索引
  });
}

作用域链与箭头函数

箭头函数没有自己的this、arguments、super或new.target，但它们仍然有作用域链。

var obj = {
  value: 'obj value',
  traditional: function() {
    console.log(this.value); // 'obj value'
  },
  arrow: () => {
    console.log(this.value); // undefined (this继承自外层)
  }
};

obj.traditional();
obj.arrow();

作用域链的调试技巧

在Chrome开发者工具中，可以通过Scope面板查看当前作用域链。

function debugExample() {
  var local = 'local';
  
  function inner() {
    debugger;
    console.log(local);
  }
  
  inner();
}

debugExample();