深入理解JavaScript作用域与作用域链

var globalVariable = "I am a global variable";
function exampleFunction() {
  console.log(globalVariable); // 可以访问全局变量
}

function exampleFunction() {
  var localVariable = "I am a local variable";
  console.log(localVariable); // 可以访问局部变量
}

function outerFunction() {
  var outerVariable = "I am in the outer function";
  function innerFunction() {
    var innerVariable = "I am in the inner function";
    console.log(outerVariable); // 可以访问外部函数的变量
  }
  innerFunction();
}

function outerFunction() {
  var outerVariable = "I am in the outer function";
  function innerFunction() {
    var innerVariable = "I am in the inner function";
    console.log(outerVariable); // 在作用域链中查找outerVariable
  }
  innerFunction();
}

function createCounter() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  };
}
var counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

if (true) {
  let blockScopedVariable = "I am a block-scoped variable";
}
console.log(blockScopedVariable); // 报错，blockScopedVariable不在作用域内

(function() {
  var privateVariable = "I am private";
})();
console.log(privateVariable); // 报错，privateVariable不在作用域内

var person = {
  name: "John",
  age: 30
};
with (person) {
  console.log(name); // 可以直接访问name
  console.log(age);  // 可以直接访问age
}
### 第四部分：作用域的实际应用
#### 11. 模块模式
作用域链可以用于实现模块模式，帮助你封装变量以避免全局污染。
```javascript
var myModule = (function() {
  var privateVariable = "I am private";
  return {
    publicFunction: function() {
      console.log(privateVariable);
    }
  };
})();
myModule.publicFunction(); // 可以访问模块中的变量

var button = document.getElementById("myButton");
var message = "Hello, world!";
button.addEventListener("click", function() {
  console.log(message); // 可以访问message变量
});

function createCounter() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  };
}
var counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2