JS栈内存、堆内存、执行栈

目录

一、JS数据类型

二、栈内存和堆内存

1.栈 Stack

2.堆 Heap

三、执行栈(JS stack)

1.执行栈

2.执行上下文

 3.执行栈的调用过程


前言:因为经常有同学会将栈内存、堆内存、执行栈混淆起来,所以写了这篇文章加以区分,在了解相关概念之前,我们先要了解JS的数据类型

一、JS数据类型

JS 数据类型分为两大类: 原始类型 引用类型

原始类型包括:

原始类型

typeof返回类型

null

object

undefined

undefined

boolean

boolean

number

number

bigint

bigint

string

string

symbol

symbol

我们会发现 null 类型执行 typeof 后返回的是 object 类型,这是由于在 JS 中二进制前三位都为0会被判断为 object 类型 ,而 null 的二进制表示全为0,自然前三位也是0,所以执行 typeof 时会返回 object

引用类型只有一种 Object 类型

二、栈内存和堆内存

1.栈 Stack

栈是一种先进后出,出口和入口为同一个的数据结构,自动分配内存空间,用于存放原始数据类型引用数据类型的地址

2.堆 Heap

堆是一种无序且以key-value键值对存储的数据结构,动态分配内存,用于存放引用数据类型的值

三、执行栈(JS stack)

1.执行栈

定义:即执行上下文的调用栈

2.执行上下文

定义:即变量对象中的一段代码,每个上下文都关联了一个变量对象,上下文中定义的所有变量和函数都存在于这个对象上。

执行上下文分为全局执行上下文函数执行上下文eval() 函数执行上下文

全局执行上下文:只有一个,程序首次运行时创建,它会在浏览器中创建一个全局对象(window对象),使this指向这个全局对象

函数执行上下文(可以有多个):在函数被调用时,才会被创建;每次调用函数时,都会创建一个新的执行上下文

eval() 函数执行上下文:JavaScript 的 eval() 函数,执行其内部的代码时,会创建属于自己的执行上下文,(很少用而且不建议使用)

// 1.进入全局上下文执行环境
 
function a() {  
  console.log('a函数执行环境'); 
  b(); // 3.进入b函数上下文执行环境
  console.log('a函数执行环境');  // 4.b函数执行完成后,返回a函数上下文执行环境
}
 
function b() {  
  console.log('b函数执行环境');  
}
 
a(); // 2.进入 a 函数上下文执行环境
console.log('全局上下文'); // 5.a 函数执行完成后,返回 全局上下文执行环境;如果没有其他代码需要执行,则执行栈会把 全局执行上下文 从执行栈中弹出
 
// 最终打印结果:
// a函数执行环境
// b函数执行环境
// a函数执行环境
// 全局上下文执行环境

a函数执行环境

console.log('a函数执行环境'); 
b();
console.log('a函数执行环境'); 

b函数执行环境

console.log('b函数执行环境');

全局上下文执行环境

function a() {
  console.log('a函数执行环境');
  b();
  console.log('a函数执行环境');
}

function b() {
  console.log('b函数执行环境');
}

a();
console.log('全局上下文');

 3.执行栈的调用过程

猜你喜欢

转载自blog.csdn.net/weixin_42214717/article/details/129821199