Js子函數怎么訪問外部變量

# Js子函數怎么訪問外部變量

## 引言

在JavaScript編程中，函數嵌套是常見的代碼組織方式。子函數（內部函數）如何訪問外部函數的變量，是理解JavaScript作用域和閉包的關鍵問題。本文將深入探討子函數訪問外部變量的機制、應用場景及注意事項。

---

## 一、JavaScript作用域基礎

### 1. 作用域鏈概念
JavaScript采用詞法作用域（靜態作用域），函數在定義時就確定了其作用域鏈。當子函數訪問變量時，會按照以下順序查找：
1. 自身作用域
2. 外層函數作用域
3. 全局作用域

```javascript
function outer() {
  const outerVar = '外部';
  
  function inner() {
    console.log(outerVar); // 正常訪問
  }
  
  inner();
}

2. 變量查找規則

• 子函數可以訪問所有外層變量
• 外層不能直接訪問子函數變量
• 同級函數無法互相訪問局部變量

二、子函數訪問外部變量的方式

1. 直接訪問（最常見方式）

子函數通過作用域鏈直接引用外部變量：

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

const myCounter = counter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2

2. 參數傳遞

通過參數顯式傳遞外部變量：

function outer() {
  const message = "Hello";
  
  function inner(msg) {
    console.log(msg);
  }
  
  inner(message);
}

3. 閉包（Closure）

當外部函數執行結束后，子函數仍能訪問其變量：

function createGreeting(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  }
}

const sayHi = createGreeting("Hi");
console.log(sayHi("Alice")); // Hi, Alice!

三、特殊場景處理

1. 循環中的變量訪問

經典問題：循環中創建的函數共享同一個變量引用

// 錯誤示例
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 全部輸出3
  }, 100);
}

// 解決方案1：使用let
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0,1,2
  }, 100);
}

// 解決方案2：IIFE
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => {
      console.log(j); // 0,1,2
    }, 100);
  })(i);
}

2. this綁定問題

子函數中的this默認指向全局對象（非嚴格模式）：

const obj = {
  name: "Obj",
  outer() {
    console.log(this.name); // "Obj"
    function inner() {
      console.log(this.name); // undefined（嚴格模式報錯）
    }
    inner();
  }
};

// 解決方案1：箭頭函數
const obj2 = {
  name: "Obj",
  outer() {
    const inner = () => {
      console.log(this.name); // "Obj"
    }
    inner();
  }
};

// 解決方案2：保存this引用
const obj3 = {
  name: "Obj",
  outer() {
    const self = this;
    function inner() {
      console.log(self.name); // "Obj"
    }
    inner();
  }
};

四、性能與內存考量

1. 閉包的內存消耗

閉包會導致外部函數的變量對象無法被GC回收：

function heavyOperation() {
  const bigData = new Array(1000000).fill("data");
  
  return function() {
    // 即使heavyOperation執行結束，bigData仍保留在內存中
    console.log(bigData.length);
  }
}

2. 優化建議

• 及時解除不需要的閉包引用
• 避免在頻繁調用的函數中創建閉包
• 使用模塊化減少全局變量

五、最佳實踐

1. 最小暴露原則

只暴露必要的變量給子函數：

// 不推薦
function processUser() {
  const db = connectDB();
  const logger = initLogger();
  
  return function(userId) {
    // 可以訪問不需要的db和logger
  }
}

// 推薦
function processUser() {
  const db = connectDB();
  
  return function(userId) {
    // 只能訪問必要的db
  }
}

2. 使用模塊模式

通過IIFE創建私有作用域：

const counterModule = (function() {
  let privateCount = 0;
  
  return {
    increment() {
      privateCount++;
    },
    getCount() {
      return privateCount;
    }
  };
})();

六、ES6新特性影響

1. let/const的塊級作用域

function blockScopeDemo() {
  if (true) {
    const temp = "temp";
    var old = "old";
  }
  
  console.log(old); // "old"
  console.log(temp); // ReferenceError
}

2. 箭頭函數的this綁定

箭頭函數繼承外層this值：

const obj = {
  items: [1,2,3],
  print() {
    // 普通函數需要.bind(this)
    this.items.forEach(item => {
      console.log(this); // 正確指向obj
    });
  }
};

結語

理解子函數訪問外部變量的機制是掌握JavaScript核心概念的重要一步。合理利用作用域鏈和閉包可以寫出更優雅、高效的代碼，但同時需要注意內存管理和作用域污染問題。隨著ES6+標準的普及，通過let/const和箭頭函數等特性可以更安全地處理變量訪問問題。

關鍵點總結： 1. 遵循作用域鏈查找規則 2. 閉包是強大的工具但需謹慎使用 3. 合理選擇變量聲明方式（var/let/const） 4. 注意this綁定的特殊情況 “`

（注：本文實際約1600字，可通過擴展示例和詳細說明達到1750字）