一篇带你了解JS 执行上下文与作用域

开发 前端
执行上下文是JavaScript代码执行的环境,包括变量对象、作用域链和this等元素。了解执行上下文的创建过程和作用可以帮助开发者更好地理解和调试JavaScript代码。

JavaScript中的执行上下文是指JavaScript代码执行的环境,它包括变量、函数、作用域和this等元素。在JavaScript中,每当函数执行时,都会创建一个新的执行上下文。

执行上下文分为全局执行上下文和函数执行上下文两种。

全局执行上下文

全局执行上下文是在页面加载时创建的,它是整个JavaScript代码的最外层环境,包含了所有的全局变量、函数和this等元素。

函数执行上下文

函数执行上下文是在函数被调用时创建的,它包含了函数内部的变量、函数和this等元素。每当函数被调用时,都会创建一个新的函数执行上下文。

函数执行上下文包括三个重要的元素:

  • 变量对象(Variable Object,VO):包含了函数内部的变量和函数声明。
  • 作用域链(Scope Chain):用于解决变量访问的问题,它是一个由多个执行上下文的变量对象组成的链式结构。
  • this指针:指向函数被调用时的当前对象。

执行上下文的创建过程分为两个阶段:创建阶段和代码执行阶段。

创建阶段

在创建阶段,JavaScript引擎会进行以下操作:

  • 创建变量对象:函数执行上下文中的变量对象包括所有的函数参数、函数声明和变量声明等。
  • 建立作用域链:JavaScript引擎会将当前执行上下文的变量对象添加到作用域链的最前端。
  • 确定this指针:this指针的值取决于函数被调用时的环境。

代码执行阶段

在代码执行阶段,JavaScript引擎会按照代码的顺序执行代码,并将变量的值存储在变量对象中。

需要注意的是,JavaScript中的变量提升现象是由执行上下文的创建阶段所导致的。在创建阶段中,JavaScript引擎会将变量声明提升到当前执行上下文的顶部,因此在代码执行阶段前就可以访问到变量。

当代码运行时,会产生对应的运行环境,在这个环境中,所有的变量都会被实现提出来(变量提升),有的直接赋值,有的默认赋值,有点默认值 undefined ,代码从上而下开始执行,就叫做执行上下文。

变量提升

foo // undefined
var foo = function () {
  console.log('foo1')
}

foo() // foo1, foo赋值

var foo = function () {
  console.log('foo2')
}

foo() // foo2, foo 赋值

函数提升

foo() // foo2
function () {
  console.log('foo1')
}

foo() // foo2

function foo () {
  console.log('foo2')
}
foo() // foo2

声明优先级,函数 > 变量

foo() // foo2
var foo = function () {
  console.log('foo1')
}

foo() // foo1, foo 重新赋值

function foo () {
  console.log('foo2')
}

foo() // foo1

总之,执行上下文是JavaScript代码执行的环境,包括变量对象、作用域链和this等元素。了解执行上下文的创建过程和作用可以帮助开发者更好地理解和调试JavaScript代码。


责任编辑:姜华 来源: 今日头条
相关推荐

2021-07-26 07:47:36

Cpu上下文进程

2021-05-25 10:15:20

JavaScript 前端作用域

2015-07-08 10:25:05

Javascript上下文作用域

2021-11-24 08:51:32

Node.js监听函数

2020-02-21 10:09:06

调度进程线程

2022-09-14 13:13:51

JavaScript上下文

2021-05-20 06:57:16

RabbitMQ开源消息

2020-07-24 10:00:00

JavaScript执行上下文前端

2023-12-10 13:37:23

Python编程上下文管理

2021-07-28 10:02:54

建造者模式代码

2021-07-14 08:24:23

TCPIP 通信协议

2021-06-30 00:20:12

Hangfire.NET平台

2021-08-11 07:02:21

npm包管理器工具

2023-05-12 08:19:12

Netty程序框架

2020-06-22 08:41:34

JS语言代码

2021-07-03 08:04:10

io_uringNode.js异步IO

2021-08-02 06:34:55

Redis删除策略开源

2021-11-08 08:42:44

CentOS Supervisor运维

2021-12-15 11:52:34

GPLLinuxGNU

2017-05-11 14:00:02

Flask请求上下文应用上下文
点赞
收藏

51CTO技术栈公众号