js性能优化学习笔记4-堆栈操作

理论总结

1. 浏览器在渲染界面的时候会在内存中开辟一小块空间，称为执行环境栈 (ECStack:execution context stack)，用于处理 js 引擎最后得到的字符串形式的机器码。
2. ECStack也会被分为多个执行上下文EC用于管理不同的区域，其中最低层是全局执行上下文EC(G)，会一直存在，在EC(G)中有一片区域用于存放全局变量对象VO(G)。
3. 基础数据类型会存放在栈区，引用数据类型会存放在堆区。
4. js会在VO(G)中准备一个叫window的对象指向全局对象GO的堆内存地址。var、function声明的变量会存到GO中，let、const声明的变量只存在VO(G)中。
5. 伴随着函数的执行，会产生不同的函数执行上下文EC(Fn)，等函数执行完毕则会移除EC(Fn)。EC(Fn)中有一片区域用于存放局部变量对象AO。
6. 闭包
   (以下案例暂时不考虑变量提升的问题)

先来两个问题，我都答错了。。。

var a = b = 10   // 在GO中存放了a,b两个变量，并赋值为10
(function(){
 /**
 在函数执行的时候，生成了一个函数执行上下文，其中AO中声明了一个局部变量a,赋值为20。
 b没有用var进行声明，所以找到了GO中的b,修改赋值为20。
 **/
 var a = b = 20   
})()   // 函数执行完后函数上下文就被销毁了
console.log(a, b)   // 结果为：10 20

var a = {n:1}
var b = a
/**
 第一步:找到a.x！！！重点，已经给对象a添加了x属性
 第二步:{n:2}赋给a
 第一步:{n:2}赋给未改变之前的a的a.x
**/
a.x = a = {n:2}
console.log(a.x, b.x)   // 结果为：undefined {n:2}

画一画

var a = 1
function foo() {
  var b = 2
  return function (c) {
    console.log(c + b++)
  }
}
var f = foo()
f(5)
f(10)

根据上面的代码分3步来画一画执行过程：

学习自拉钩教育前端视频