题目 | let和var的区别（一、二）

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

---

来来来~，请拿出纸和笔，画一画算结果，算完后再用浏览器运行哦~

请做题

1. 输出结果是？

console.log(a);
var a = 1;
var b = a;
b = 2;
console.log(a);

1. 输出结果是？

console.log(sum(1, 2));
function sum(n, m) {
    return n + m;
}

1. 输出结果是？

console.log(a);
let a = 1;
a = 2;
console.log(a);

1. 输出结果是？

var a = 1;
var a = 2;
console.log(a);

1. 输出结果是？

let a = 1;
let a = 2;
console.log(a);

浏览器执行代码

当浏览器开辟出供代码执行的栈内存后，在代码自上而下执行之前，做了一些事情：把当前执行上下文中的所有带var/function关键字的进行提前的声明（declare）和定义（defined）即：变量提升（声），其中：

• 带var关键字的只是提前声明（declare）var a;，只声明没有定义，默认值是undefined
• 带function关键字的：声明（declare）+定义（defined）a=1;
• 定义就是赋值，把变量和某个值关联起来

那么，在变量提升阶段，浏览器会开辟一块空间来进行：变量存储+值存储。

注意，值存储：

• 基本数据类型的值——直接存储在栈内存中

• 引用数据类型的值（对象和函数）

  1. 开辟一个堆内存（16进制地址）
  2. 把内容存储在堆内存中（对象：键值对，函数：函数体中的代码字符串）
  3. 把16进制地址存储到栈内存中，让变量与其关联在一起（赋值）

看图理解

这里给出第一题的分步骤图解，请参考再自己画其他题目哦~

△二维码查看原文哦~

△图解 _ let和var的区别（一、二）

预告：记住几个名词

请拿出纸和笔，自己写4遍~~~~：

• ECStack：Execution [ˌeksɪˈkjuːʃn] Context Stack 执行环境栈

• EC：Execution Context 执行环境（执行上下文）

  • VO：Variable[ˈveəriəbl] Object 变量对象
  • AO：Activation [ˌæktɪˈveɪʃ(ə)n] Object 活动对象 （函数的叫做AO，可以理解为VO的一个分支）
• Scope [skəʊp]：作用域，创建的函数的时候就赋予的
• Scope Chain[tʃeɪn] ：作用域链

沟通交流

△文章首发