JavaScript执行上下文是什么?影响代码运行方式
时间:2025-12-30 16:42:31 375浏览 收藏
来到golang学习网的大家,相信都是编程学习爱好者,希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript执行上下文是什么?如何影响代码运行》,介绍一下,希望对大家的知识积累有所帮助,助力实战开发!
JavaScript执行上下文是代码运行时的环境,决定变量、函数和this的值如何被访问;分为全局、函数和eval三种类型,经历创建与执行两阶段,由执行栈管理上下文切换。

JavaScript执行上下文是代码运行时的环境,它决定了变量、函数和this的值在当前作用域中如何被访问和解析。理解执行上下文,是搞懂变量提升、作用域链、闭包和this绑定的关键。
执行上下文的类型
JavaScript中有三种执行上下文:
- 全局执行上下文:脚本启动时自动创建,只有一个。它确定了全局对象(浏览器中是window)、this指向以及最外层的变量和函数声明。
- 函数执行上下文:每次调用函数时创建,每个调用都有独立的上下文。它包含该函数的参数、局部变量、词法环境和this绑定。
- Eval执行上下文(已不推荐使用):eval内部代码运行时创建,行为类似函数上下文但更危险,现代开发中基本不用。
执行上下文的生命周期
每个执行上下文经历两个阶段:
- 创建阶段:JS引擎先扫描变量声明(var)、函数声明、形参,初始化变量对象(VO),给var变量赋值undefined,函数声明则直接赋值函数体;同时确定作用域链和this值。
- 执行阶段:真正运行代码,为变量赋实际值,执行函数调用,处理表达式和语句。
注意:let/const也会被“提升”,但不会初始化(即存在暂时性死区TDZ),直到声明语句执行才可访问。
执行栈与上下文切换
JS是单线程的,靠执行栈(Execution Stack)管理上下文。代码从全局开始,每进入一个函数就压入一个新上下文;函数返回就弹出。例如:
function a() { b(); }
function b() { console.log('hi'); }
a();
执行顺序是:全局上下文 → a的上下文 → b的上下文 → b弹出 → a弹出 → 全局继续。
它如何影响代码行为
很多看似奇怪的现象,其实都源于执行上下文的机制:
- 函数内未声明就赋值的变量会挂到全局对象上(非严格模式下),因为查找变量时沿着作用域链一直找到全局,而赋值操作会在当前作用域链顶端创建它。
- 嵌套函数能访问外层变量,是因为内层上下文的作用域链包含外层的词法环境。
- this值不是由函数定义位置决定,而是由调用方式决定——因为this是在执行上下文创建阶段根据调用者(如obj.method()中的obj)确定的。
不复杂但容易忽略。
到这里,我们也就讲完了《JavaScript执行上下文是什么?影响代码运行方式》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
419 收藏
-
351 收藏
-
479 收藏
-
237 收藏
-
158 收藏
-
497 收藏
-
252 收藏
-
436 收藏
-
469 收藏
-
394 收藏
-
337 收藏
-
302 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习