JavaScript复习记录(5)—作用域

作用域(scope)是一个变量、函数或对象的可访问范围。以下是JavaScript中作用域的几种类型和相关概念:

1. 全局作用域(Global Scope)

任何在全局作用域中声明的变量或函数都可以在代码的任何地方访问。全局变量在浏览器环境中会成为window对象的属性。

javascript 复制代码
var global = "global variable";

function globalFunction() {
    console.log(global); // global varable
}

2. 函数作用域(Function Scope)

在函数内部声明的变量只能在该函数内部访问。使用var声明的变量具有函数作用域。

javascript 复制代码
function functionScope() {
    var localVar = "local variable";
    console.log(localVar);
}

console.log(localVar); // Error: localVar is not defined

3. 块级作用域(Block Scope)

块级作用域由花括号{}包围的代码块定义。在letconst引入之前,JavaScript没有块级作用域。letconst允许我们在块级作用域内声明变量。

javascript 复制代码
{
    let blockVar = "I'm a block-scoped variable";
    console.log(blockVar);
}

console.log(blockVar); // Error: blockVar is not defined

4. 词法作用域(Lexical Scope)

JavaScript采用词法作用域,也称为静态作用域。这意味着函数的作用域在定义时就已经确定,而不是在调用时确定。

javascript 复制代码
function outerFunction() {
    var outerVar = "I'm outside!";

    function innerFunction() {
        console.log(outerVar); // 可以访问outerFunction中的变量
    }

    innerFunction();
}

outerFunction();

5. 闭包(Closure)

闭包是指有权访问另一个函数作用域中的变量的函数。即使外部函数已经执行完毕,内部函数仍然可以访问外部函数的变量。

javascript 复制代码
function outerFunction() {
    var outerVar = "I'm outside!";

    return function innerFunction() {
        console.log(outerVar);
    };
}

var closureFunction = outerFunction();
closureFunction(); // "I'm outside!"

6. 模块作用域(Module Scope)

在ES6中,引入了模块,模块中的变量默认具有模块作用域。一个模块的变量在其他模块中是不可见的,除非明确导出并导入。

javascript 复制代码
// module1.js
export const moduleVar = "I'm a module-scoped variable";

// module2.js
import { moduleVar } from './module1.js';
console.log(moduleVar);

作用域链(Scope Chain)

作用域链是指在当前作用域中无法找到某个变量时,JavaScript会沿着作用域链向上查找,直到找到该变量或到达全局作用域。

javascript 复制代码
var globalVar = "Global";

function outerFunction() {
    var outerVar = "Outer";

    function innerFunction() {
        var innerVar = "Inner";
        console.log(innerVar); // Inner
        console.log(outerVar); // Outer
        console.log(globalVar); // Global
    }

    innerFunction();
}

outerFunction();
相关推荐
csbysj20209 分钟前
Java 条件语句
开发语言
We་ct21 分钟前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器
Ulyanov1 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》 开发环境搭建与工具链极简主义 —— 拒绝臃肿,构建工业级基座
开发语言·python·qt·ui·架构·系统仿真
逻辑驱动的ken1 小时前
Java高频面试场景题19
java·开发语言·面试·职场和发展·求职招聘
初心未改HD1 小时前
Go语言net/http与Web开发:构建高性能HTTP服务
开发语言·golang
渣渣盟1 小时前
Spark 性能调优实战:从开发到生产落地
javascript·ajax·spark
叼烟扛炮1 小时前
C++第一讲:C++ 入门基础
开发语言·c++·函数重载·引用·内联函数·nullptr
Ulyanov2 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》:QML 声明式语法与霓虹按钮 —— 当 Python 遇见现代美学
开发语言·python·ui·qml·系统仿真·雷达电子对抗仿真
弹不出的5h3ll2 小时前
Ghost Bits:高位截断如何让 Java WAF 形同虚设
java·开发语言
码界筑梦坊2 小时前
113-基于Python的国际超市电商销售数据可视化分析系统
开发语言·python·信息可视化·毕业设计·fastapi