// 最簡單的閉包示例
function outer() {
  const message = "Hello from outer!"; // 外部變量
  function inner() {
    console.log(message); // inner函數(shù)"記住"了message
  }
  
  return inner; // 返回inner函數(shù)
}

const myClosure = outer(); 
myClosure(); // "Hello from outer!"

// 偽代碼：執(zhí)行上下文的內(nèi)部結構
ExecutionContext = {
  // 1. 詞法環(huán)境 (用于let/const和函數(shù)聲明)
  LexicalEnvironment: {
    EnvironmentRecord: {}, // 環(huán)境記錄
    outer: null            // 外部環(huán)境引用
  },
  
  // 2. 變量環(huán)境 (用于var聲明)
  VariableEnvironment: {
    EnvironmentRecord: {},
    outer: null
  },
  
  // 3. this綁定
  ThisBinding: undefined
}

function createLexicalEnvironment() {
  // 示例：詞法環(huán)境的創(chuàng)建
  function outer(x) {
    let a = 10;
    const b = 20;
    
    function inner(y) {
      let c = 30;
      console.log(a + b + c + x + y); // 訪問多個作用域的變量
    }
    
    return inner;
  }
  
  return outer;
}

// 執(zhí)行過程中的詞法環(huán)境變化
/*
1. 全局詞法環(huán)境:
{
  EnvironmentRecord: {
    createLexicalEnvironment: <function>,
    outer: <function>
  },
  outer: null
}

2. outer函數(shù)的詞法環(huán)境:
{
  EnvironmentRecord: {
    x: 參數(shù)值,
    a: 10,
    b: 20,
    inner: <function>
  },
  outer: <全局詞法環(huán)境的引用>
}

3. inner函數(shù)的詞法環(huán)境:
{
  EnvironmentRecord: {
    y: 參數(shù)值,
    c: 30
  },
  outer: <outer函數(shù)詞法環(huán)境的引用>
}
*/

// 作用域鏈查找示例
function demonstrateScopeChain() {
  const globalVar = "全局變量";
  function level1() {
    const level1Var = "第一層變量";
    function level2() {
      const level2Var = "第二層變量";
      function level3() {
        const level3Var = "第三層變量";
        // 變量查找順序演示
        console.log(level3Var); // 1. 在當前環(huán)境找到
        console.log(level2Var); // 2. 向上一層查找
        console.log(level1Var); // 3. 繼續(xù)向上查找
        console.log(globalVar);  // 4. 查找到全局環(huán)境
        // console.log(nonExistent); // 5. 找不到則報錯
      }
      return level3;
    }
    return level2;
  }
  return level1;
}

// 調(diào)用過程中的作用域鏈
const fn = demonstrateScopeChain()()();
fn(); // 執(zhí)行時會沿著作用域鏈查找變量

function makeCounter() {
  let count = 0; // 外部函數(shù)的局部變量
  
  return function() { // 返回的內(nèi)部函數(shù)形成閉包
    count++; // 訪問外部函數(shù)的變量
    return count;
  };
}

const counter = makeCounter(); // 調(diào)用外部函數(shù)
console.log(counter()); // 1 - 調(diào)用閉包函數(shù)
console.log(counter()); // 2 - count 變量被保持
console.log(counter()); // 3

// 步驟 1-2: 全局執(zhí)行上下文創(chuàng)建，調(diào)用makeCounter
function makeCounter() {
  // 步驟 3: 在makeCounter的詞法環(huán)境中創(chuàng)建count變量
  let count = 0;
  
  // 步驟 4: 創(chuàng)建匿名函數(shù)，該函數(shù)的[[Environment]]屬性
  // 指向makeCounter的詞法環(huán)境，形成閉包
  return function() {
    // 步驟 9: 通過作用域鏈找到外部的count變量
    count++;
    return count;
  };
  // 步驟 5-6: makeCounter執(zhí)行完畢，執(zhí)行上下文出棧
  // 但count變量因為被閉包引用而不會被垃圾回收
}

// 步驟 7: counter變量保存了閉包函數(shù)的引用
const counter = makeCounter();

// 步驟 8-10: 每次調(diào)用counter()都會訪問保存的count變量
console.log(counter()); // 1

function optimizationExample() {
  let used = "被閉包使用的變量";
  let unused = "未被使用的變量"; // V8會優(yōu)化掉這個變量
  let alsoUnused = "同樣未被使用";
  
  return function() {
    console.log(used); // 只有這個變量會被保留在閉包中
  };
}

const Calculator = (function() {
  let result = 0; // 私有變量
  
  return {
    add: function(x) {
      result += x;
      return this;
    },
    multiply: function(x) {
      result *= x;
      return this;
    },
    getResult: function() {
      return result;
    },
    reset: function() {
      result = 0;
      return this;
    }
  };
})();

// 使用
Calculator.add(5).multiply(2).getResult(); // 10

function createButtonHandler(name) {
  return function(event) {
    console.log(`按鈕 ${name} 被點擊了`);
    // name變量被閉包保存
  };
}

document.getElementById('btn1').onclick = createButtonHandler('按鈕1');
document.getElementById('btn2').onclick = createButtonHandler('按鈕2');

// 防抖函數(shù)
function debounce(func, delay) {
  let timeoutId; // 被閉包保存的變量
  
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 節(jié)流函數(shù)
function throttle(func, delay) {
  let lastCall = 0;
  
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// 經(jīng)典錯誤示例
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 輸出三次 3
  }, 100);
}

// 方案1：使用IIFE創(chuàng)建新的作用域
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 輸出 0, 1, 2
    }, 100);
  })(i);
}

// 方案2：使用let塊級作用域
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 輸出 0, 1, 2
  }, 100);
}

// 方案3：使用bind
for (var i = 0; i < 3; i++) {
  setTimeout(function(j) {
    console.log(j); // 輸出 0, 1, 2
  }.bind(null, i), 100);
}

// 可能導致內(nèi)存泄漏的代碼
function createHandler() {
  const largeData = new Array(1000000).fill('data'); // 大量數(shù)據(jù)
  
  return function() {
    // 即使不使用largeData，它也會被閉包保留
    console.log('handler called');
  };
}

// 解決方案：顯式釋放不需要的引用
function createHandler() {
  const largeData = new Array(1000000).fill('data');
  const needed = largeData.slice(0, 10); // 只保留需要的部分
  
  return function() {
    console.log(needed.length);
    // largeData會被垃圾回收
  };
}