手把手带你了解Javascript中变量和词法环境_WEB前端开发

手把手带你了解Javascript中变量和词法环境_WEB前端开发,第1张

学习JavaScript之手机振动API_WEB前端开发

现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如JavaScript地理位置信息API,本人介绍API的使用情况。


手把手带你了解Javascript中变量和词法环境_WEB前端开发,第2张

其实,我觉得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还有要补充的一点是,它对于nullfunction结果:

function sayHello(){
     console.log('hello the world');
 }
 console.log(typeof sayHello);  // function
 console.log(typeof null);      // object

……对于一个函数,它真的返回的是一个“函数”,某种意义上用处很大,不过对null值返回一个object,这只能说有得就有缺吧。


我觉得对变量加深了解的办法就是明白它的底层运作方式。


其实也没有什么了不起的,原始值是直接放在内存栈区, 引用类型值则是放在内存堆区(这是它的实际存储区位置);(如果是常量,那么就会放在中,好像也是栈区的一部分)。


正常情况下,变量取值都是直接都是从内存栈区中获取的,但是引用类型的值是放在内存堆中,那么怎么办?

引用类型值的访问:

1、一个引用类型的变量,会在内存栈中保存一个指针

2、这个指针是用于引用内存堆中的存储区的内存地址

3、在访问一个类型值时

javascript 从定义到执行,需要知道的事_WEB前端开发

javascript从定义到执行,JS引擎在实现层做了很多初始化工作,我们需要引入几个相关的概念,这篇文章的目的不是孤立的为你讲解每一个概念, 而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节。


4、会通过指针找到内存堆中的存储区,然后从中获取值。


例如:

  var first  = {
      name:'hahei...'
  }
  var gggiii=111222;

映射图如下:

手把手带你了解Javascript中变量和词法环境_WEB前端开发,第3张

注意:此处我用 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、为什么用词法环境代替作用域

–词法环境涵盖了作用域,但反之则不能。



–但注意,词法作用域和词法作用域链与作用域以及作用域链都可通用。


2、环境记录是什么?

–当前环境下的标识符-变量的映射

–但是标识符只是“合法标识符”的字符串形式。



–变量是是指存储区的内容,但是确切说法是存储区


最后

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


这种只深入核心的内容很有用,而且在写代码时也变得灵活很多了。


我觉得这就是最有用的地方



最后:

个人理解,常有失误;细细查看不知何处,望君做到心中有数。


本文转载自:https://blog.csdn.net/krfwill/article/details/106155266

相关教程推荐:JavaScript视频教程

以上就是手把手带你了解Javascript中变量和词法环境的详细内容,更多请关注ki4网其它相关文章!

JavaScript和CSS交互的5种方法的学习_WEB前端开发

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊,本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/561695.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020-07-07
下一篇 2020-07-07

发表评论

登录后才能评论

评论列表(0条)

保存