手把手带你理解Javascript中变量和词法环境
其实，我觉得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中变量和词法环境的具体内容，更多请关注百分百源码网其它相关文章！
