首页 > 其他分享 >浅谈JS词法环境

浅谈JS词法环境

时间:2023-02-09 13:46:41浏览次数:44  
标签:function f1 浅谈 环境 JS 词法 easy var

JavaScript 词法环境

本文主要讲解JS词法环境,我们将看到什么是词法环境,词法范围如何工作,函数内部的名称如何解析,内部属性,弄清楚词法环境利于我们理解闭包。让我们开始吧...

什么是词法环境?

在理解闭包时,最大的混淆来源是术语“词汇环境”,或者只是“词汇”这个词。在计算机科学中术语“词汇”仅表示“源代码”,或者换句话说,“与写的代码有关”。
大家请考虑以下代码:

var a = 'static';

function f1() {
   console.log(a);
}

function f2() {
   var a = 'dynamic';
   f1();
}

f2();

仔细考虑,大家觉得会输出什么?正确答案是:static。
首先 JavaScript 编译器读取程序的源代码,并在编译时根据给定函数的定义确定其可访问的环境。所以在 f1 被定义的时候它的词法范围就已经确定了,即它是全局定义的所以它的词法范围也为全局。无论在哪里调用,a 都是‘static’。
下一个例子:

var a = 'easy';

(function() {
   var b = 'easy';

   function f1() {
      console.log(a, b);
   }

   function f2() {
      var a = 'difficult';
      var b = 'difficult';
      f1();
   }

   f2();
})();

这段代码大家觉得结果会是什么?正确答案:easy easy
image

说明:f1 的本地环境并没有定义 a,b 因此搜索将移至词汇环境。在词汇环境中,搜索的第一个封闭环境,即 IIFE(立即执行函数) 的局部环境,存在 b;继续访问外部范围获取到全局的 a,故 f1 的输出结果为 easy easy。
最后:请始终记住函数定义的时候词法范围就决定了。与其在哪里调用无关。将在下一篇文章讲解JS中的闭包。

标签:function,f1,浅谈,环境,JS,词法,easy,var
From: https://www.cnblogs.com/pglin/p/17033612.html

相关文章

  • 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块
    第14章、内建组件和模块14.1KeepAlive组件的实现原理KeepAlive一词借鉴了HTTP协议。KeepAlive组件可以避免组件被频繁的销毁/重建。本质是缓存管理,再加上特殊的挂......
  • 原生JS实现涟漪按钮特效
    给大家分享一个用原生JS实现的涟漪按钮特效,效果如下:以下是代码实现,欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......
  • Darkmode.js实现黑暗模式
    运用CSS3.0的过滤属性可以实现黑暗模式,当我们用这个属性实现黑暗模式时,我们会发现图片的颜色会受影响,并不是很美观,是无法完美切换黑暗模式的,而最近出了一个JavaScript辅助......
  • 原生JS实现一个好看计数器
    今天给大家分享一个用原生JS实现的好看计数器,效果如下:以下是代码实现,欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta......
  • P11:JSX代码注释、HTML添加class、JSX中解析html、JSX中label激活文本框
    React16基础​​阐述​​​​JSX代码注释​​​​JSX中的class陷阱​​​​JSX中的html解析问题​​​​JSX中``标签的坑​​阐述通过之前的教程作完“大宝剑”菜单后,如......
  • 浅谈mybatis返回单一对象或对象列表的问题
    目录mybatis返回单一对象或对象列表一、说明二、代码测试UserMap.xml映射文件dao文件UserMap.java测试代码和结果文件mybatis返回的对象包含集合 mybatis......
  • JSON-概念 JSON-语法定义 JSON-语法-值的获取
    JSON-概念 概念:JavaScript ObjectNotation  JavaScript对象表示法Person p = new Person();p.setName("张三");、p.setAge(23);p.se......
  • js请求后端9
    用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也......
  • threejs 第四十六用 ImageBitmapLoader
    threejs交流群511163089这东西。。今天研究worker读url那。发现这个可以用这种bitmap可以读来传给主线程然后创建CanvasTextureloader.load(url,function(res){self.post......
  • js 判断对象里面有没有值
    转载自:https://blog.csdn.net/renfeideboke/article/details/128256858方法一:varobj={}if(Object.values(obj).length>0){//有值}else{//无}方法二:l......