js中栈内存与堆内存

栈内存与堆内存

内存分类

• 栈内存 stack
• 堆内存 heap

栈内存与堆内存区别

1. 栈内存是储存基本数据类型值和为执行上下文提供的环境
2. 堆内存是存储引用数据类型的，他会在内存中开辟一条新的内存来储存值，并生成一个16进制的地址

浏览器渲染机制

• 当当浏览器中打开页面，浏览器引擎会渲染相关的代码（包含js代码），换句话说就是把代码从上往下执行

• 浏览器想要执行代码，会提供一个代码执行环境，(ECStack 全称 Execution Context Stack =>栈内存 Stack)

• 在全局的执行上下文中有一个VO(GLOBAL)全局变量对象，可以把代码中的变量和对应的值存储到这里面

  创建变量的顺序

  • 先将值存到真内存中（值是基本类型的值）

  • 创建一个变量 ,把变量存到VO(GLOBAL)中

  • 让创建的变量和值进行关联在一起
    代码

	//练习
    let a=12;
    let b=a;
        b=13;
    console.log(a)

解析：

• 首先浏览器创建一个会提供一个代码运行环境栈内存

• 在栈内存中有一个VO全局变量，来储存变量和基本数据类型的值

• 开始运运行代码，let a=12

  1. 现在VO中创建值12
  2. 然后在创建一个变量a
  3. 最后将a和12关联在一起

• 继续执行代码，let b=a;

  1. 首先创建值a（a是一个变量，已经创建过了所以直接跳过）
  2. 创建变量b
  3. 最后将b和a关联在一起，（现在a的值是12，所以b的值也是12）

• 继续执行代码, b=13;

  1. 将b的值重新赋值为13
  2. 因一个变量只能指向同一个变量所以切断了和a的关联（也就是12）

• 最后代码输出 ， console.log(a)

  • 此时可以得出a还是那个值12，而b的值已经变为了13
    

//练习
let n={
	name:'teal'
};
let m=n;
m.name='red';
console.log(a.name);

解析：

• 首先浏览器提供一个代码执行环境栈内存

• 在栈内存中有一个VO全局变量存储

• 代码执行 ，let n={name:‘teal’}

  1. 首先创建值，因创建的值不是基本数据类型，所以在内存中开辟一个堆内存，堆内存的地址为AAAFFF111
  2. 在VO中存储堆内存的地址
  3. 创建一个变量n
  4. 让变量n指向这个堆内存的地址

• 代码继续执行，let m=n;

  1. 创建值n,因n是一个变量已经被创建，所以跳过
  2. 创建变量b
  3. 让变量b和变量a关联(也是执行堆内存的地址)

• 代码继续执行， m.name=‘red’

  1. 让变量m中的name属性重新赋值为:‘red’
  2. 此时m和n是执行的是同一个堆内存地址，所以堆内存中的nama属性值变为了：‘red’

• 最后输出代码值，console.log(n,name);

  1. 此时n.name的值不再是 ‘teal’,而是新值 ’red‘