一篇文章带你了解js作用域

xiguadada 发布于2019-08-21 18:36 / 585人阅读

摘要：函数所能访问的作用域链为，在执行函数时，的值已经被修改成了。在执行一个函数时，如果我们需要查找某个变量值，那么会去这个函数被定义时所在的作用域链中查找，一旦找到需要的变量，就会停止向上查找。参考文章题解作用域

走在前端的大道上

本篇将自己读过的相关 javascript作用域文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。

说说你对JavaScript作用域的理解？

JavaScript是门动态语言，跟Java不一样，JavaScript可以随意定义全局变量和局部变量，变量会在该作用域下提升，而且JavaScript没有块级作用域。全局变量就是定义在全局的变量了，局部变量是定义在函数里的变量，每一个函数都是一个作用域，当函数执行时会优先查找当前作用域，然后逐级向上。定义在 if 和 for 语句里的变量，在大括号外面也能访问到，这就是没有块级作用域。

JavaScript是静态作用域，在对变量进行查询时，变量值由函数定义时的位置决定，和执行时的所处的作用域无关。

知道ES6的童鞋可能还会指出 JavaScript已经有块级作用域了，而且用 let 和 const 定义的变量不会提升。

来感受一下

第一题

var a = 1;
function fn() {
  console.log("1:" + a);

  var a = 2;
  bar()
  console.log("2:" + a)
}

function bar() {
  console.log("3:" + a)
}

fn()

第一个 a 打印的值是 1:undefined 而不是 1。因为我们在 fn() 中定义了变量 a，用 var 定义的变量会在当前作用域提升，但是并不会携带赋给变量的值一起提升。

第二个 a 打印的值是 3:1 而不是 2。因为函数 bar 是定义在全局作用域中的，所以作用域链是 bar -> global，bar 里面没有定义a，所以就会顺着作用域链向上找，然后在 global 中找到了 a。

第三个 a 打印的值是 2:2。这句话所在的作用域链是 fn -> global，执行 console.log("2:" + a) 会首先在 fn 作用域里查找 a，找到有 a，并且值为2，所以结果就是2。
答案：

// 第一题正确答案
1:undefined
3:1
2:2

第二题

var a = 1;
function fn() {
  console.log("1:" + a);
  a = 2
}

a = 3;
function bar() {
  console.log("2:" + a);
}

fn();
bar();

第一个 a 打印的值是 1:3，既不是 undefined 也不是 1。首先， fn 中的 a = 2 是给变量 a 赋值，并没有定义变量。然后，执行函数 fn，在查找变量 a 时，此时查找的变量就是全局变量 a，不过此时 a 的值为3。

第二个 a 打印的值是 2:2。函数 bar 所能访问的作用域链为 bar->global，在执行函数 bar 时，a 的值已经被修改成了 2。
答案：

// 第二题正确答案
1:3
2:2

知识点：

在JavaScript中，通过 let 和 const 定义的变量具有块级作用域的特性。通过 var 定义的变量会在它自身的作用域中进行提升，而 let 和 const 定义的变量不会。
每个JavaScript程序都具有一个全局作用域，每创建一个函数都会创建一个作用域。
在创建函数时，将这些函数进行嵌套，它们的作用域也会嵌套，形成作用域链，子作用域可以访问父作用域，但是父作用域不能访问子作用域。
在执行一个函数时，如果我们需要查找某个变量值，那么会去这个函数被 定义 时所在的作用域链中查找，一旦找到需要的变量，就会停止向上查找。
“变量的值由函数定义时的位置决定”这句话有歧义，准确说是查找变量时，是去定义这个函数时所在的作用域链查找。

参考文章：
1.题解JavaScript作用域

GPU云服务器云服务器这篇文章手把手带你阅读Netty源码【附 js作用域和上下文作用域中作用域

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

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

【进阶1-4期】JavaScript深入之带你走进内存机制

摘要：引擎对堆内存中的对象进行分代管理新生代存活周期较短的对象，如临时变量字符串等。内存泄漏对于持续运行的服务进程，必须及时释放不再用到的内存。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第4天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划...

不知名网友 2019-08-23 13:47 评论0 收藏0
一文带你了解什么是JavaScript 函数式编程？

摘要：前言函数式编程在前端已经成为了一个非常热门的话题。整个过程就是体现了函数式编程的核心思想通过函数对数据进行转换。高阶函数函数式编程倾向于复用一组通用的函数功能来处理数据，它通过使用高阶函数来实现。前言函数式编程在前端已经成为了一个非常热门的话题。在最近几年里，我们看到非常多的应用程序代码库里大量使用着函数式编程思想。本文将略去那些晦涩难懂的概念介绍，重点展示在 JavaScrip...

acrazing 2019-08-26 10:40 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
【进阶2-1期】深入浅出图解作用域链和闭包

摘要：本期推荐文章从作用域链谈闭包，由于微信不能访问外链，点击阅读原文就可以啦。推荐理由这是一篇译文，深入浅出图解作用域链，一步步深入介绍闭包。作用域链的顶端是全局对象，在全局环境中定义的变量就会绑定到全局对象中。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周开始前端进阶的第二期，本周的主题是作用域闭包，今天是第6天。本...

levius 2019-08-23 13:47 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0