其实，我觉得javascript核心中重要的东西并非是从旧版本扩展来的高大上的语法，例如解构赋值啊、展开语法和剩余参数（嘛……虽然的确是很666），但是用好这些，其实都建立在你对变量的认识上（常有人不知道什么是左值或右值的区别）正因如此，我觉得了解一个javascript还是从最基本做起，就是了解一下何为变量吧。
本文其实也并非完全基础，还是建立在对javascript有一定了解之上的，至少对对象要有一定的认知。开始吧。
变量与数据
什么是变量？
越简单的问题答案往往越是让人感到意外，多数人的答案都与值有关；事实上变量就是程序可操作的存储区（术语内存空间），在javascript程序运行时，存储区（术语就是内存空间）可以保存我们所需的任何东西，代码、数据……等等。然后可以将变量保存的数据大致上分割为两类：原始类型（同基本类型）和引用类型；从变量中取出来的数据就是值，把一个值放到变量中时，该值就又变成了数据。
javascript和其他语言相似，变量也需要被声明才能实际存在，声明后的变量称之为实例化，为变量赋予一个值（默认为undefined）时，称之为变量的初始化，只是实例化而未初始化的变量都处于uninitialized状态。
例如：
let a = a ; // (*)console.log(a);// referenceerror: can't access lexical declaration `a' before initialization
很完美的报错了(在(*)标志的位置)，提示我们没有初始化这个变量时就无法使用。这是不同于c++这类底层的变量的地方。其实这种现象在javascript有一个极为高大上的名字：暂存死区，等过几章节我就说明产生的原因。
（忘了说了，在变量声明也需要一个名字，术语称作标识符，我觉得不补充也不影响什么……）
不过javascript另外特殊的地方在于，它对var声明的变量是可以自动初始化的，javascript会自动会为var声明的变量赋予一个undefined值。
例如：
var a = a;console.log(a); // undefined.
看吧，明明都差不多，结果却全然不同。
但是实际上却没什么卵用，见下面的代码：
var a = a;console.log(a+2); // nan
结果是nan， 得到了一个我们完全不想要的结果。在如果无法顺利数学计算时,javascript便会给出一个非数字的结果，用nan表示。但是比较有趣的是，如果你用typeof去验证nan类型：
typeof nan ; // number
却告诉我们，这tmd是一个数值 number。
javascript莫名其妙的地方还有许多许多，不过我们还是不要继续调戏javascript了，开始认真学习了。
类型与存储
javascript一共有 7 种原始类型 和 1 种 引用类型，如下：
原始类型1、number
2、string
3、boolean
4、symbol
5、bigint
6、undefined
7、null
引用类型：object
（这里面我就用小写了，因为typeof返回的是小写的）
我就是介绍一下这些必须要了解的东西，具体用法其他资料都有我就不赘述了。不过关于typeof还有要补充的一点是，它对于null和function结果：
function sayhello(){ console.log('hello the world'); } console.log(typeof sayhello); // function console.log(typeof null); // object
……对于一个函数，它真的返回的是一个“函数”，某种意义上用处很大，不过对null值返回一个object，这只能说有得就有缺吧。
我觉得对变量加深了解的办法就是明白它的底层运作方式。其实也没有什么了不起的，原始值是直接放在内存栈区， 引用类型值则是放在内存堆区（这是它的实际存储区位置）；（如果是常量，那么就会放在池中，好像也是栈区的一部分）。正常情况下，变量取值都是直接都是从内存栈区中获取的，但是引用类型的值是放在内存堆中，那么怎么办？
引用类型值的访问：
1、一个引用类型的变量，会在内存栈中保存一个指针
2、这个指针是用于引用内存堆中的存储区的内存地址
3、在访问一个类型值时
4、会通过指针找到内存堆中的存储区，然后从中获取值。
例如：
var first = { name:'hahei...' } var gggiii=111222;
映射图如下：
注意：此处我用 ref. first表示 存储区的引用 ， 因为虽然保存的尽管是指针，但是在访问这个值时，会进行二次解析（即通过这个指针找到存储区）， 而不是直接返回这个指针的具体数据。详细可以参考 c++引用。
初识词法环境
想必各位都已经对什么是作用域了若指掌，但是我还是必须重新提一下。作用域是标识符的可访问范围，在javascript中的任何操作，几乎都有作用域的参与。javascript中使用词法环境决定作用域，在下面我会简单介绍一下。（请注意，这里我没有用变量这个术语，因为解析标识符范围时，应该还没有真正生成代码，感兴趣的可以去了解一下ast语法树）
看，以下代码：
var val=111; function hahaha(){ console.log(val); } function hihihi(){ hahaha(); } hihihi(); /// 111
的确是正确输出了，111。
但是我更喜欢把 val放在一个函数中，如：
function hahaha(){ console.log(val); /// (**) } function hihihi(){ var val=111; /// (*) hahaha(); } hihihi();
结果就是uncaught referenceerror: val is not defined， 根本没找到val这个标识符，这是为什么？
因为执行过程是这样的：
hihihi函数执行 ， 然后为 val赋值……hahaha函数执行在hahaha找不到val标识符，便去外部词法环境hahaha外部词法环境就是** hahaha函数声明时代码的外部**，即全局代码（下称全局词法环境）在全局词法环境没找到val，终了。
（请注意3-5步， 找val找的是函数声明代码的外部，而不是函数调用时的位置。）现在应该提一下概念了，词法环境（lexical environment）就是根据代码结构时决定的作用域，也可以称作词法作用域（lexical scoping）它是静态作用域。可以这么说，在源代码写好时，所有标识符的作用域就已经被决定。当然也有动态作用域，你可以去试试bash脚本，它就是动态的。嘿嘿。详细也可以参考静态作用域、词法作用域。
此处只要发现了个中区别就极好掌握，所以我就略了。
词法环境的抽象
在javascript常用三种词法环境： 一、块级作用域 二、全局作用域 三、函数作用域。
有时，我们会将一个词法环境（即作用域，下面我会正式使用词法环境替代作用域这个术语）抽象成伪代码，如下：
lexicalenvironment = { outerenv: < ... > , this : < ... > , environmentrecord:{ // ... identifiername:variable } }
很简单：
outerenv：当前词法环境的外部词法环境this： 当前词法环境的 this的值，但它是运行时决定的。environmentrecord(环境记录)： 标识符-变量的映射，注意，这里的标识符只是单纯的字符串，变量指的是存储区的数据。而且标识符必须是当前词法环境，而不是当前代码的。例如：
function first(){ var a =100; let d = 220; { // block, var b = a+100; let c = b*10; console.log(a,b,c,d); } } first(); // 100 200 2000 220
一定不要忽略first函数中的块级作用域，这很重要。
然后写成抽象就是：
函数内部的块级作用域：
blockenv = { outerenv: < funcfirstenv > , this : < window > , environmentrecord:{ c:< 2000 > // 这里没有b } }
函数作用域：
funcenv = { outerenv: < globalenv > , this : < window > , envrec:{ a:< 100 >, d:< 220 >, b:< 200 > } }
okay，先到这里吧。
一些问题：
1、为什么用词法环境代替作用域？
–词法环境涵盖了作用域，但反之则不能。
–但注意，词法作用域和词法作用域链与作用域以及作用域链都可通用。
2、环境记录是什么？
–当前环境下的标识符-变量的映射
–但是标识符只是“合法标识符”的字符串形式。
–变量是是指存储区的内容，但是确切说法是存储区。
最后
我把我的笔记，重新整理后发到博客上后发现——我笔记干净了好多，艹。
这种只深入核心的内容很有用，而且在写代码时也变得灵活很多了。我觉得这就是最有用的地方。
最后：
个人理解，常有失误；细细查看不知何处，望君做到心中有数。
本文转载自：https://blog.csdn.net/krfwill/article/details/106155266
相关教程推荐：javascript视频教程
以上就是手把手带你了解javascript中变量和词法环境的详细内容。