javascript变量作用域

JavaScript变量作用域

JavaScript的变量作用域是指变量在代码中的可访问性，理解变量作用域对于编写可维护和高效的代码至关重要，在JavaScript中，变量作用域主要分为全局作用域和局部作用域两种类型。

全局作用域

全局作用域是在整个JavaScript代码中都可访问的作用域，在HTML文档中，全局作用域实际上是window对象。

特点

1、声明位置：在函数外部声明的变量或在HTML中直接赋值的变量属于全局作用域。

2、生命周期：全局变量自声明开始存在，直至页面关闭才会销毁。

3、访问范围：任何函数或脚本都可以访问全局变量。

4、自动全局：未使用var、let、const声明而直接赋值的变量会自动成为全局变量。

5、绑定window对象：所有全局变量都是window对象的属性，可通过window.variableName访问。

6、覆盖风险：全局变量或函数可能覆盖window对象的原生属性或函数。

7、严格模式限制：在严格模式下，未声明的变量不会自动成为全局变量。

示例

// 全局变量声明
var globalVar = "I'm a global variable";
function canAccessGlobal() {
    console.log(globalVar); // 输出： I'm a global variable
}
canAccessGlobal();

局部作用域

局部作用域是在函数内部定义的作用域，每个函数都创建了一个新的作用域，该作用域仅在函数内部有效。

特点

1、声明位置：在函数内部通过var、let、const声明的变量属于局部作用域。

2、生命周期：局部变量在函数执行时创建，执行完毕后销毁。

3、访问范围：只能在当前函数内部访问局部变量。

4、函数参数：函数的参数实际上也是局部变量，仅在函数内部起作用。

5、闭包例外：闭包可以使得外部作用域访问到函数内部的局部变量。

6、覆盖全局变量：如果局部变量与全局变量同名，局部变量会覆盖全局变量，但仅限于当前作用域。

7、块级作用域支持：ES6引入的let和const支持块级作用域（如for循环和if语句块），而var不支持。

示例

function hasLocalScope() {
    var localVar = "I'm a local variable";
    console.log(localVar); // 输出： I'm a local variable
}
hasLocalScope();
console.log(localVar); // 报错： localVar is not defined

作用域链和提升

JavaScript通过作用域链来查找变量，当访问一个变量时，JavaScript从当前作用域开始查找，如果找不到，则逐级向上查找，直到全局作用域。

1、变量提升：函数作用域内的变量声明会被提升到函数顶部，但变量初始化不会被提升。

2、函数内外重名：如果内外部作用域有同名变量，内部作用域的变量会屏蔽外部作用域的变量。

示例

function testScopeChainAndHoisting() {
    console.log(x); // 输出： undefined，因为变量声明被提升了，但初始化没有
    var x = 10;
    function innerFunc() {
        var x = 20;
        console.log(x); // 输出： 20，局部变量覆盖了外部作用域的变量
    }
    innerFunc();
}
testScopeChainAndHoisting();

涵盖了JavaScript变量作用域的基本概念、应用及注意事项，希望能帮助开发者更好地理解和运用这一重要特性。