0

0

如何理解JavaScript中的词法作用域与动态作用域?

幻影之瞳

幻影之瞳

发布时间:2025-10-06 14:32:01

|

402人浏览过

|

来源于php中文网

原创

JavaScript使用词法作用域,函数作用域在定义时确定,基于代码结构决定变量访问权限。例如,内部函数可访问外部函数变量,无论何处调用都沿定义时的作用域链查找。动态作用域则按调用位置决定变量值,而JavaScript不采用此方式。如let x = "global"; function bar() { console.log(x); } function foo() { let x = "local"; bar(); } foo();输出"global",因bar在全局定义,绑定全局x。词法作用域使代码更可预测,支持闭包机制,如createCounter返回的函数始终访问其定义环境中的count变量。关键区别:词法作用域看函数定义位置,动态作用域看调用位置。JavaScript选择词法作用域以确保变量查找机制稳定可靠。

如何理解javascript中的词法作用域与动态作用域?

JavaScript使用的是词法作用域(也叫静态作用域),而不是动态作用域。理解这两者的区别,有助于掌握函数如何查找变量的机制。

词法作用域:定义时决定作用域

词法作用域的意思是,函数的作用域在它被定义的时候就已经确定了,基于代码的结构(即“写在哪里”)来决定变量的访问权限。

举个例子:

<font>function outer() {
    let x = 10;
    function inner() {
        console.log(x); // 能访问到 outer 中的 x
    }
    inner();
}
outer(); // 输出 10</font>
在这里,inner 函数是在 outer 内部定义的,因此它可以访问 outer 的变量。这种关系在代码编写时就固定了,不管 inner 如何被调用,它的作用域链不会变。

再看一个更典型的例子:

<font>let x = "global";

function foo() {
    let x = "local";
    function bar() {
        console.log(x);
    }
    bar();
}

foo(); // 输出 "local"</font>
尽管 bar 是在 foo 内部定义并调用的,但关键点在于它是在 foo 内部定义的,所以它会沿着词法环境向上找,找到的是 foo 中的 x,而不是全局的 x。这体现了词法作用域的核心:看函数在代码中“写在哪里”,而不是“怎么被调用”。

动态作用域:调用时决定作用域

动态作用域则完全不同。它不关心函数定义的位置,而是根据函数“在哪里被调用”来决定变量的查找路径。也就是说,变量的值取决于运行时的调用

JavaScript 并不使用动态作用域,但可以通过对比加深理解。假设 JavaScript 支持动态作用域:

零沫AI工具导航
零沫AI工具导航

零沫AI工具导航-AI导航新标杆,探索全球实用AI工具

下载

立即学习Java免费学习笔记(深入)”;

<font>let x = "global";

function bar() {
    console.log(x);
}

function foo() {
    let x = "local";
    bar();
}

foo(); // 假如是动态作用域,这里会输出 "local"</font>
但在实际中,JavaScript 是词法作用域,bar 定义在全局,只能访问全局的 x,所以输出的是 "global"。动态作用域会在执行 bar 时查看“是谁调用了我”,然后从调用者的环境中找变量,而词法作用域只看“你定义在哪里”。

为什么 JavaScript 选择词法作用域?

词法作用域让代码更可预测、更容易分析。开发者可以在不运行代码的情况下,通过阅读代码结构判断变量的来源。这也是闭包能够稳定工作的基础。

比如:

<font>function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2</font>
内部函数始终能访问 createCounter 中的 count,因为它是词法上封闭的。这种行为是可靠的,不会因为调用方式改变而失效。

小结:关键区别在哪?

简单来说:
  • 词法作用域看“函数定义的位置”
  • 动态作用域看“函数调用的位置”
  • JavaScript 使用词法作用域,这是闭包、模块化等特性的基础
基本上就这些。理解词法作用域,是掌握 JavaScript 变量查找机制的关键一步。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

203

2023.11.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

443

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

605

2023.08.10

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

152

2025.07.29

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

420

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

541

2024.05.29

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

499

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

166

2023.10.07

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

3

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号