垦荒学园 - 以垦荒之心，赴成长之约

切换主题

JavaScript 作用域 ​

作用域是 JavaScript 中一个核心概念，它决定了变量和函数的可访问范围。理解作用域对于编写可维护、无错误的 JavaScript 代码至关重要。在本章节中，我们将深入学习 JavaScript 中的作用域机制。

什么是作用域 ​

作用域是指程序中变量、函数和对象的可访问范围。它定义了代码中哪些部分可以访问特定的变量或函数。JavaScript 的作用域机制决定了变量的生命周期、可见性和访问权限。

作用域的类型 ​

JavaScript 中有几种不同类型的作用域：

1. 全局作用域（Global Scope） ​

全局作用域是代码中最外层的作用域，在任何函数外部定义的变量和函数都属于全局作用域。

javascript
// 全局变量
var globalVar = "全局变量";
let globalLet = "全局 let 变量";
const GLOBAL_CONST = "全局常量";

// 全局函数
function globalFunction() {
    return "全局函数";
}

console.log(globalVar); // 可以访问
console.log(globalFunction()); // 可以调用

2. 函数作用域（Function Scope） ​

函数作用域是指在函数内部定义的变量，这些变量只能在该函数内部访问。

javascript
function outerFunction() {
    var functionVar = "函数作用域变量";
    let functionLet = "函数作用域 let 变量";
    
    function innerFunction() {
        console.log(functionVar); // 可以访问外部函数的变量
        console.log(functionLet); // 可以访问外部函数的变量
    }
    
    innerFunction();
    
    console.log(functionVar); // 可以访问
    console.log(functionLet); // 可以访问
}

outerFunction();

// console.log(functionVar); // 错误：无法访问函数作用域变量
// console.log(functionLet); // 错误：无法访问函数作用域变量

3. 块级作用域（Block Scope）- ES6 ​

块级作用域是指在代码块（用花括号 {} 包裹的代码）内部定义的变量，这些变量只能在该代码块内部访问。

javascript
{
    var blockVar = "块级 var 变量"; // var 不受块级作用域限制
    let blockLet = "块级 let 变量"; // let 受块级作用域限制
    const BLOCK_CONST = "块级常量"; // const 受块级作用域限制
    
    console.log(blockVar);    // 可以访问
    console.log(blockLet);    // 可以访问
    console.log(BLOCK_CONST); // 可以访问
}

console.log(blockVar);    // 可以访问（var 不受块级作用域限制）
// console.log(blockLet);    // 错误：无法访问
// console.log(BLOCK_CONST); // 错误：无法访问

作用域链（Scope Chain） ​

当代码试图访问一个变量时，JavaScript 引擎会按照作用域链的顺序查找变量：

  1. 首先在当前作用域中查找
  2. 如果找不到，向上一级作用域查找
  3. 依此类推，直到全局作用域
  4. 如果在全局作用域中也找不到，则报错
javascript
const globalVar = "全局变量";

function outerFunction() {
    const outerVar = "外部函数变量";
    
    function innerFunction() {
        const innerVar = "内部函数变量";
        
        console.log(innerVar);  // 当前作用域
        console.log(outerVar);  // 上一级作用域
        console.log(globalVar); // 全局作用域
    }
    
    innerFunction();
}

outerFunction();

变量声明与作用域 ​

var 声明的作用域 ​

[var](file:///C:/Workspace/Coding/WebProjects/tutorials-web/node_modules/typescript/lib/lib.es5.d.ts#L1204-L1204) 声明的变量具有函数作用域，不受块级作用域限制：

javascript
function example() {
    if (true) {
        var x = 1;
    }
    
    console.log(x); // 1（可以访问）
}

example();

// let 和 const 的对比
function example2() {
    if (true) {
        let y = 2;
        const z = 3;
    }
    
    // console.log(y); // 错误：无法访问
    // console.log(z); // 错误：无法访问
}

example2();

let 和 const 声明的作用域 ​

[let](file:///C:/Workspace/Coding/WebProjects/tutorials-web/node_modules/typescript/lib/lib.es5.d.ts#L1205-L1205) 和 [const](file:///C:/Workspace/Coding/WebProjects/tutorials-web/node_modules/typedoc/node_modules/typescript/lib/lib.es5.d.ts#L170-L174) 声明的变量具有块级作用域：

javascript
function example() {
    {
        let blockLet = "块级变量";
        const BLOCK_CONST = "块级常量";
    }
    
    // console.log(blockLet);    // 错误：无法访问
    // console.log(BLOCK_CONST); // 错误：无法访问
}

example();

词法作用域（静态作用域） ​

JavaScript 使用词法作用域，这意味着变量的作用域在代码编写时就确定了，而不是在运行时确定。

javascript
const globalVar = "全局变量";

function outer() {
    const outerVar = "外部变量";
    
    function inner() {
        const innerVar = "内部变量";
        console.log(globalVar); // 可以访问
        console.log(outerVar);  // 可以访问
        console.log(innerVar);  // 可以访问
    }
    
    return inner;
}

const innerFunction = outer();
innerFunction(); // 即使在不同的作用域中调用，仍然可以访问 outer 的变量

作用域与闭包 ​

闭包是指函数可以访问其外部作用域中的变量，即使外部函数已经执行完毕。

javascript
function createCounter() {
    let count = 0; // 外部函数的变量
    
    return function() { // 内部函数形成闭包
        count++; // 访问外部函数的变量
        return count;
    };
}

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

// 每个闭包都有独立的作用域
const counter2 = createCounter();
console.log(counter2()); // 1
console.log(counter());  // 4

立即执行函数表达式（IIFE）与作用域 ​

IIFE 可以创建私有作用域，避免全局变量污染：

javascript
// 不使用 IIFE - 全局变量污染
var counter = 0;
function increment() {
    counter++;
    return counter;
}

// 使用 IIFE - 创建私有作用域
const counterModule = (function() {
    let privateCounter = 0;
    
    return {
        increment: function() {
            privateCounter++;
            return privateCounter;
        },
        
        decrement: function() {
            privateCounter--;
            return privateCounter;
        },
        
        getCount: function() {
            return privateCounter;
        }
    };
})();

console.log(counterModule.increment()); // 1
console.log(counterModule.increment()); // 2
console.log(counterModule.getCount());  // 2
// console.log(privateCounter); // 错误：无法访问

作用域提升（Hoisting） ​

JavaScript 中的变量和函数声明会被提升到其作用域的顶部。

变量提升 ​

javascript
function example() {
    console.log(x); // undefined（不是报错）
    var x = 5;
    console.log(x); // 5
    
    // 上面的代码实际上等同于：
    // var x;
    // console.log(x); // undefined
    // x = 5;
    // console.log(x); // 5
}

example();

// let 和 const 的暂时性死区
function example2() {
    console.log(y); // ReferenceError
    let y = 10;
}

// example2(); // 会报错

函数提升 ​

javascript
function example() {
    console.log(greet()); // "你好！"（函数声明被提升）
    
    function greet() {
        return "你好！";
    }
    
    // 函数表达式不会被提升
    // console.log(sayHello()); // TypeError
    var sayHello = function() {
        return "Hello!";
    };
}

example();

作用域的最佳实践 ​

1. 避免全局变量 ​

javascript
// 不好的做法
var globalCounter = 0;
function increment() {
    globalCounter++;
}

// 好的做法
const counterModule = (function() {
    let counter = 0;
    
    return {
        increment: function() {
            counter++;
            return counter;
        },
        getCount: function() {
            return counter;
        }
    };
})();

2. 使用块级作用域 ​

javascript
// 使用 let 和 const 而不是 var
for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // 输出 0, 1, 2
    }, 100);
}

// 使用 var 的问题
for (var j = 0; j < 3; j++) {
    setTimeout(() => {
        console.log(j); // 输出 3, 3, 3
    }, 100);
}

3. 合理使用闭包 ​

javascript
// 工厂函数
function createUser(name, age) {
    // 私有变量
    let _name = name;
    let _age = age;
    
    // 返回公共接口
    return {
        getName: function() {
            return _name;
        },
        
        getAge: function() {
            return _age;
        },
        
        setAge: function(newAge) {
            if (newAge > 0) {
                _age = newAge;
            }
        },
        
        greet: function() {
            return "你好，我是" + _name + "，今年" + _age + "岁";
        }
    };
}

const user = createUser("张三", 25);
console.log(user.greet()); // "你好，我是张三，今年25岁"
console.log(user.getName()); // "张三"
user.setAge(26);
console.log(user.getAge()); // 26

4. 模块模式 ​

javascript
// 配置管理模块
const configManager = (function() {
    // 私有配置
    const defaultConfig = {
        theme: "light",
        language: "zh-CN",
        fontSize: 14
    };
    
    let currentConfig = { ...defaultConfig };
    
    // 公共接口
    return {
        getConfig: function() {
            return { ...currentConfig };
        },
        
        setConfig: function(key, value) {
            if (key in defaultConfig) {
                currentConfig[key] = value;
            }
        },
        
        resetConfig: function() {
            currentConfig = { ...defaultConfig };
        },
        
        getConfigValue: function(key) {
            return currentConfig[key];
        }
    };
})();

// 使用示例
console.log(configManager.getConfig());
configManager.setConfig("theme", "dark");
console.log(configManager.getConfigValue("theme")); // "dark"
configManager.resetConfig();
console.log(configManager.getConfigValue("theme")); // "light"

作用域调试技巧 ​

1. 使用开发者工具 ​

javascript
function debugScope() {
    const localVar = "局部变量";
    
    debugger; // 在浏览器开发者工具中暂停执行
    
    console.log(localVar);
}

debugScope();

2. 作用域检查函数 ​

javascript
// 检查变量是否存在
function isVariableDefined(varName) {
    try {
        eval(varName);
        return true;
    } catch (e) {
        return false;
    }
}

// 检查全局变量
function hasGlobalVariable(varName) {
    return varName in window; // 浏览器环境
}

console.log(isVariableDefined("undefined")); // true
console.log(hasGlobalVariable("document")); // true

实际应用示例 ​

1. 计数器模块 ​

javascript
// 多个独立计数器
const CounterFactory = (function() {
    let counterId = 0;
    
    return function(initialValue = 0) {
        counterId++;
        let value = initialValue;
        const id = counterId;
        
        return {
            getId: function() {
                return id;
            },
            
            getValue: function() {
                return value;
            },
            
            increment: function() {
                value++;
                return value;
            },
            
            decrement: function() {
                value--;
                return value;
            },
            
            reset: function() {
                value = initialValue;
                return value;
            }
        };
    };
})();

const counter1 = CounterFactory(10);
const counter2 = CounterFactory(100);

console.log(counter1.increment()); // 11
console.log(counter2.increment()); // 101
console.log(counter1.getId());     // 1
console.log(counter2.getId());     // 2

2. 配置管理器 ​

javascript
// 高级配置管理器
const AdvancedConfigManager = (function() {
    // 私有数据
    const configs = new Map();
    const observers = new Map();
    
    // 私有方法
    function notifyObservers(key, newValue, oldValue) {
        const callbacks = observers.get(key) || [];
        callbacks.forEach(callback => {
            try {
                callback(newValue, oldValue, key);
            } catch (error) {
                console.error("观察者回调错误：", error);
            }
        });
    }
    
    // 公共接口
    return {
        // 设置配置
        set: function(namespace, key, value) {
            if (!configs.has(namespace)) {
                configs.set(namespace, new Map());
            }
            
            const namespaceConfig = configs.get(namespace);
            const oldValue = namespaceConfig.get(key);
            
            namespaceConfig.set(key, value);
            
            // 通知观察者
            notifyObservers(`${namespace}.${key}`, value, oldValue);
        },
        
        // 获取配置
        get: function(namespace, key, defaultValue = null) {
            if (!configs.has(namespace)) {
                return defaultValue;
            }
            
            const namespaceConfig = configs.get(namespace);
            return namespaceConfig.has(key) ? namespaceConfig.get(key) : defaultValue;
        },
        
        // 添加观察者
        observe: function(namespace, key, callback) {
            const fullKey = `${namespace}.${key}`;
            
            if (!observers.has(fullKey)) {
                observers.set(fullKey, []);
            }
            
            observers.get(fullKey).push(callback);
        },
        
        // 获取所有配置
        getAll: function() {
            const result = {};
            for (let [namespace, config] of configs) {
                result[namespace] = {};
                for (let [key, value] of config) {
                    result[namespace][key] = value;
                }
            }
            return result;
        }
    };
})();

// 使用示例
AdvancedConfigManager.set("user", "name", "张三");
AdvancedConfigManager.set("user", "age", 25);

AdvancedConfigManager.observe("user", "name", function(newValue, oldValue, key) {
    console.log(`用户姓名从 "${oldValue}" 变更为 "${newValue}"`);
});

AdvancedConfigManager.set("user", "name", "李四"); // 触发观察者

console.log(AdvancedConfigManager.get("user", "name")); // "李四"
console.log(AdvancedConfigManager.get("user", "age"));  // 25

总结 ​

JavaScript 作用域的核心要点：

  1. 作用域类型：全局作用域、函数作用域、块级作用域
  2. 作用域链：变量查找机制
  3. 词法作用域：作用域在编写时确定
  4. 变量声明：var（函数作用域）、let/const（块级作用域）
  5. 作用域提升：声明被提升到作用域顶部
  6. 闭包：函数访问外部作用域变量
  7. 最佳实践：避免全局变量、使用块级作用域、合理使用闭包

理解作用域是掌握 JavaScript 的关键，它直接影响代码的组织、变量的生命周期和程序的行为。在下一章节中，我们将学习 JavaScript 的事件。

本站内容仅供学习和研究使用。

Copyright 2025 垦荒教程 kenhuang.com All Rights Reserved. 备案号：粤ICP备17084064号-3 | 免责声明