JS堆栈和作用域链

1.堆栈和作用域链思维导图

2.举例讲解堆栈和作用域链

1.

var a={
    n:12;
}
var b=a;
b['n']=13;
console.log(a.n);

{n:12}是一个对象，在堆内存中创建一个空间，把对象的键值对n:12存储到堆空间中，把堆空间地址放到栈中（0x000）供变量a引用。在把a的地址赋值给b（0x000）存储。b['n']=13;成员访问，先基于地址0x000找到堆空间，把n的值修改为13。最后，访问0x000，键为n的值，输出13。

2.

var a={
   n:1
}
var b=a;
a.x=a={
   n:2
}
console.log(a.x);
console.log(b);

a是一个对象，在堆中创建空间，在栈中存放空间地址0x000。把a的地址赋值给b。由于a.x的优先级大于a，所以先执行a.x={n:2},再执行a={n:2}。{n:2}是一个对象，在堆中创建一个空间，空间中存储键值n:2，对把空间地址0x001放入栈中供a.x引用，再供a引用。a.x=0x001;a=0x001;此时a.x的地址又一次改变（不是0x001了）。输出a.x，在0x001地址中没有键为x的属性值，输出undefined。输出b，0x000对象。

3.

var x=[12,23];
function fn(y){
   y[0]=100;
   y=[100];
   y[1]=200;
   console.log(y);
}
fn(x);
console.log(x);

[12,23]是一个对象，在堆中开辟空间，创建数组堆，把对象中的键值对存储到空间中，0:12 1:23 length:2。把堆空间中的地址供变量x引用。同样的，创建函数，也是在堆空间中创建一个堆0x000。函数执行的过程：创建全局上下文EC(G)，进栈执行，初始化作用域scopeChain<EC(fn),函数EC(G)>，形参赋值：将x作为实参传入给形参y(形参变量是私有的)。y是一个对象，地址为0x000（就是传入实参x的堆地址）。

• y[0]=100; 0x000地址中的键值对 0:100 1:23 length:2
• y=[100];y引用的堆地址为0x001
• y[1]=200;0x001地址中的键值对 0:100 1:200 length:2

执行fn(x);输出y(y的堆地址为0x001)即输出[100,200]；x是全局的，输出x（堆地址为0x000），即输出[100,23]。

4.

let x=5;
function fn(x){
   return function(y){
     console.log(y+(++x));
   }
}
let f=fn(6);
f(7);
fn(8)(9);
f(10);
console.log(x);

全局上下文中，进栈执行，全局变量对象为x（值为5）,fn（堆地址为0x000）,f（堆地址为0x100）。

• 创建函数fn：

开辟一个堆内存，在堆内存地址为16进制地址。堆内存存储内容为：1.将函数体代码作为字符串2.存放一些键值对 name函数名 length形参个数 prototype原型属性 proto函数堆fn：堆地址0x000 作用域EC(G)

• 创建变量：

用let声明的变量x,f f:堆地址0x100 作用域链：scopeChain<EC(fn1),EC(G)>形参赋的值是6。在执行fn(6)时，AO（FN1）私有变量：x 为 6，把返回值的地址作为堆地址供变量引用。我们再看fn1的返回值，是一个匿名函数,把匿名函数的堆内存地址当作返回值返回。匿名函数：创建匿名函数：函数堆地址0x100，作用域[[scope]]:EC(FN1)

• 执行fn(6)

执行函数：作用域链scopeChain<EC(FN1),EC(G)> 形参赋值x=6

• 执行f(7);//14

因为f=fn(6)所以f(7)为fn(6)(7)。x为6作为形参赋值，y为7作为形参赋值，++x为7，输出14（此时，在FN1作用域下，x的值为7）执行匿名函数：作用域链scopeChain<EC(f1),EC(FN1)> 形参赋值y=7 代码执行：console.log(y+(++x));输出14，在EC(FN1)下的x变量为7。

• 执行fn(8)(9);//18

x为8，y为9作为形参赋值，作用链：scopeChain<EC(FN2),EC(G)>形参赋的值是x=8 作用域链：scopeChain<EC(f1),EC(FN2)>代码执行：console.log(y+(++x));输出18

• 执行f(10);//18

x为7，执行匿名函数 作用域链：scopeChain<EC(f2),EC(FN1)>形参赋的值是y=10输出18，在EC(FN1)下的x变量为8。

• 最后输出x，x是全局变量5.//5