JS之作用域浅谈

roland_reed 发布于2019-08-22 15:39 / 449人阅读

摘要：作用域链保证对环境中定义的变量和函数的有序访问。通俗来说，执行环境和作用域就是变量或函数有效执行所在的一个环境。总结要想搞清作用域，首先要搞清预解析，然后判断作用域范围，先判断本层环境有无声明及赋值，如果有声明，则判断调用前是否赋值。

这几天看了一下JS高级程序设计里的介绍作用域的章节，也参考了网上的资料，现在结合着自己的理解，给大家分享一下我自己对JS作用域的理解。

作用域及执行环境

这里有三个重要的概念：执行环境、作用域、变量对象

（JS高级程序设计解释）
执行环境 ：定义变量或函数可访问的其他数据，来决定它们的行为。
变量对象 ：保存执行环境中定义的变量和函数。
作用域链 ：保证对环境中定义的变量和函数的有序访问。

通俗来说，执行环境和作用域就是变量或函数有效执行所在的一个环境。
总结一下这三者的关系：每个执行环境执行时都会产生一个作用域，作用域前端都有一个变量对象来保存环境中的变量和函数。

知道这3个重要概念后，要想搞清作用域，就要先清楚JS程序的预解析过程：
JS程序开始执行时会先解析语法（检查错误等等）、解析内存，然后把function、var解析到变量对象里。
这里注意解析var变量时只是会把变量名称解析，而等到程序运行到变量赋值时才会向变量赋值。

var a="A";
function test(){
    console.log(a);//undefined
    var a="B";
}
test();

这段代码的第一个console.log之所以会是undefined，原因是函数内部的a变量在预解析时已经被解析到变量对象里，但没被赋值。所以函数执行时找到函数里未被赋值的a变量，输出undefined。

搞清楚预解析后，在判断作用域范围：
因为作用域的查找顺序是由局部作用域一步步地往上找，直到找到声明的变量和函数或已经到了全局作用域。所以局部的作用域可以访问到外部作用域的变量，而外部作用域访问不到内部作用域的变量。

相关场景

var a="A";
function test(){
    console.log(a);//“A”
    a="B";
}
test();
console.log(a);//"B"

function test(){  
      b();//函数b会被预解析，因此可以调用，执行了输出1；
      var a=1;
      function b(){
          console.log(1);
          console.log(a);//undefined
          var a=2;
      }
}
test();

以上例子参考网上资料。

总结

要想搞清作用域，首先要搞清预解析，然后判断作用域范围，先判断本层环境有无声明及赋值，如果有声明，则判断调用前是否赋值。如果找不到声明，则一层层往外部的作用域找，直到全局环境也找不到时，通常就会报错。

如果有解释的不对或不清晰的，欢迎留言讨论。

云服务器 GPU云服务器设计浅谈浅谈javascript js数据类型作用 js文件没有作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93638.html

浅谈前端存储

摘要：浅谈前端存储前言应用允许使用浏览器提供的实现将数据存储到用户的电脑上，这种客户端存储相当于赋予了浏览器记忆功能。键被更改之前的值限制对于和的存储限制因浏览器而异。最初是在客户端用于存储会话信息的。浅谈前端存储前言 web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上，这种客户端存储相当于赋予了Web浏览器记忆功能。客户端存储遵循同源策略，因此不同站点的页面是无法相互读...

whidy 2019-08-19 18:24 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0
浅谈http协议（一）：与缓存相关的头信息Etag、Last-Modified、Cache-Cont

摘要：协商缓存用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源。如果想主动清除缓存，也可以在请求头信息中加入来禁止缓存。主要取值如下缓存的时效由决定。是的字段，而是的字段，当与同时存在时，的优先级要高于。在讲这几个属性之前，先复习下浏览器的缓存机制，再结合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-...

FuisonDesign 2019-08-26 13:58 评论0 收藏0