精读JS（一）从变量到认识词法环境

Lazy_K
910 阅读9分钟

前言

决心重新学一次Javascript，一定彻底脱离小白……

Javascript很容易学，但实际上却很难把握要领。按套路学习，也容易反被套路，就如我一般反复忘记反复学迟迟无法更进一步； 最后无奈看了点大佬的文章才有所顿悟，也才明白自己以前对Javascript的认识居然如此浅薄……既然知识来自博客，我觉得就应该还给博客，所以决定把重学历程记录下来。

下面的内容，希望能对有Javascript有基础的人有帮助；没基础的至少要了解一下。有些东西，只有书上有，老师根本不讲的。

变量与数据

什么是变量？

越简单的问题答案往往越是让人感到意外，多数人的答案都与值有关；事实上变量就是程序可操作的存储区（术语内存空间），在Javascript程序运行时，存储区（术语就是内存空间）可以保存我们所需的任何东西，代码、数据……等等。

然后可以将变量保存的数据大致上分割为两类：原始类型（同基本类型）和引用类型；从变量中取出来的数据就是值，把一个值放到变量中时，该值就又变成了数据。

Javascript和其他语言相似，变量也需要被声明才能实际存在，声明后的变量称之为实例化，为变量赋予一个值（默认为undefined）时，称之为变量的初始化，只是实例化而未初始化的变量都处于uninitialized状态。只是这些只是在Javascript背后进行的，我们本身不需要考虑这些，但尽管如此，忽略这些往往会导致意想不到的问题。

不过也可以从一些细节方面看出端倪， 例如：

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， 得到了一个我们完全不想要的结果，它也不会自动转换为0。在如果无法顺利数学计算时,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
  • 引用类型：
    1. 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这个标识符，这是为什么？

重新整理，执行过程是这样的：

  1. hihihi函数执行 ， 然后为 val赋值……
  2. hahaha函数执行
  3. 在hahaha找不到val标识符，便去外部词法环境
  4. hahaha外部词法环境就是hahaha函数声明时代码的外部，即全局代码（下称全局词法环境）
  5. 在全局词法环境没找到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. 为什么用词法环境代替作用域？
    • 个人认为词法环境涵盖作用域，而且更具体。
    • 不过词法作用域链也是保存在[[Scope]]属性上的。。
  2. 环境记录是什么？
    • 记录当前词法环境中标识符与变量绑定。
    • 但是标识符只是“合法标识符”的字符串形式。
    • 变量是是指存储区的内容，但是确切说法是存储区。
  3. 绑定是什么？
    • 很难三言两语说清楚。
    • int a = 100; int& b=a; 我觉得这就很类似于绑定。
    • a相当于b的别名，两者就是同一个变量只是名字不同。
    • 只是绑定前提就是被绑定的变量必须初始化，仅仅是实例化是不够的的，因为这点我才大胆推测……
  4. 需要伪代码吗？
    • 看个人，但我觉得用书面形式能更好些。

最后

我把我的笔记，重新整理后发到博客上后发现——我笔记干净了好多，艹。

这种深入核心的内容很有用，而且在写代码时也变得灵活很多了。我觉得这就是最有用的地方。下一篇我会着重针对EnvironmentRecord说明，例如ObjectEnvironmentRecord啊、DeclarativeEnvironmentRecord例如变量提升、暂存死区什么的，不过Reference Specification Type实在是很难理解，若有大佬，还请一解迷惑。

最后： 个人理解，常有失误；细细查看不知何处，望君做到心中有数。

原笔记地址（也是我写的，是原来的笔记）：

精读Javascript系列（一） 变量 、 初识词法环境; （哎……CSDN Markdown功能很好用啊。。。）

avatar
文章
阅读
粉丝

友情链接：