介绍JavaScript作用域和闭包

介绍JavaScript作用域和闭包

免费学习推荐:javascript视频教程

JavaScript作用域闭包

在javascript中,如果对作用域和闭包弄不清楚,写代码就会出很多问题,今天对作用域和闭包做一个总结。

作用域

立即学习“Java免费学习笔记(深入)”;

作用域主要分为全局作用域和局部作用域,其中局部作用域分为函数作用域和块级作用域。

全局作用域

如果你在大括号({})或者函数的外面定义了一个变量,那么它就是一个全局的变量,它的作用域就是全局作用域。

let a = 1function fun1 () {console.log(a) // 结果:1function fun2 () {console.log(a) // 结果:1}fun2()}fun1()console.log(a) // 结果:1

登录后复制

变量a就是定义在最外层,它就能在全局任意地方被使用。
值得注意的是,在同一级作用域中,使用let或const声明变量的时候第二个同名会报错,而使用var声明变量的时候,会覆盖前面的变量;

局部作用域

如果你在函数或者大括号({})内定义的变量,就是局部作用域的变量,它能够在该级作用域级任意下级作用域中使用。

function fun1() {    let a = 100    console.log(a) // 结果: 100    function fun2 () {console.log(a) // 结果:100}fun2()}fun1()console.log(a) // 结果: a is not defined

登录后复制

a只能在fun1函数内部包括内部函数中使用,一旦出了fun1的范围就无法使用该变量了。

自由变量的查找

一个变量在当前作用域没有定义却被使用了,就是自由变量。它的执行规则是怎样的呢?
自由变量的查找是向上级作用域,一层一层以此寻找,直至找到为止。如果全局作用域都没有找到,则报错xx is not defined。

let a = 100function fun1 () {    let a1 = 2    function fun2 () {        let a2 = 3        let a = 0        function fun3 () {            let a3 = 4            a++            console.log(a + a1 + a2 + a3) // 结果: 10        }        fun3()    }    fun2()}fun1()console.log(a) // 结果: 100

登录后复制

正如上述代码所示,在fun3函数内,a和a1、 a2都没有定义,但被使用了,在执行的时候,它会往上级作用域中查找,从而找到它们的值。值得注意的一点的是,在全局作用域和fun2的函数中我们都定义了a,但是在fun3中使用的fun2中定义的值,外面的使用的全局作用域的值,也就是说,它往上级查找的时候,只要查找到就会停止查找,会就近使用。作用域间也不会互相干扰。(它们里面存在的变量提升和函数提升可以查看我的另一篇博客有专门的总结)

闭包

闭包是作用域应用的特殊情况,主要有两种表现:(1)函数作为参数被传递。(2)函数作为返回值被返回。

/** * 函数作为返回值 */function create () {    const a1 = 100    return function () {        console.log(a1)    }}const fn = create()const a1 = 200fn() // 结果: 100/** * 函数作为参数 */function print (fn) {    const a2 = 300    fn()}const a2 = 400function fn1 () {    console.log(a2)}print(fn1) // 结果: 400

登录后复制

上面代码演示了函数的两种表现,值得注意的是:在闭包中,自由变量的查找,是在函数定义的地方,向上级作用域查找,不是在执行的地方!

闭包的实际应用场景

(1)隐藏数据, 如做一个简单的cache工具
(2)函数防抖与节流

相关免费学习推荐:javascript(视频)

以上就是介绍JavaScript作用域和闭包的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2718249.html

(0)
上一篇 2025年3月7日 22:13:21
下一篇 2025年3月5日 04:22:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 原来ES6 module还可以这样用!(备忘单)

    这是一份备忘单,展示了不同的导出方式和相应的导入方式。 它实际上可分为3种类型:名称,默认值和列表 。 // 命名导入/导出 export const name = ‘value’import { name } from ‘…’// 默…

    2025年3月7日
    200
  • 影响页面加载时间的5个常见错误

    如果您的网站在用户访问时的加载时间需要很久,那么,这篇文章兴许能为您的优化工作带来一些启发。不过即便没能帮您解决你的问题,您也能了解到影响了网站加载时间的几种常见错误是什么。 为什么页面加载时间这个指标很重要? 页面的加载时间直接影响到了用…

    2025年3月7日
    200
  • 快速学习JavaScript中的Promise和Async/Await

      一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应。因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能。 在JavaScript中处理异步操作时,通常我们经常会听到…

    2025年3月7日
    200
  • 十款面向前端开发人员的chrome扩展(分享)

    本篇文章给大家分享十款面向前端开发人员的chrome扩展。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 1. CSSViewer   这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在…

    2025年3月7日 编程技术
    200
  • 浅谈JavaScript中的Map、WeakMap、Set和WeakSet

    我猜想,超过70%的JavaScript开发人员仅使用对象来收集和维护其项目中的数据。好吧,确实如此,新的集合对象(例如Map和Set)即使在2015年问世也没有得到充分利用。 因此,今天,我将讨论2015年以来的神奇新功能——Map,Se…

    2025年3月7日
    200
  • 怎样用 Node.js 高效地从 Web 爬取数据?

    相关推荐:《nodejs 教程》 由于Javascript有了巨大的改进,并且引入了称为NodeJS的运行时,因此它已成为最流行和使用最广泛的语言之一。 无论是Web应用程序还是移动应用程序,Javascript现在都具有正确的工具。 本文…

    2025年3月7日
    200
  • 详解JS中的window.location对象(备忘单)

    如果你想获取站点的URL信息,那么window.location对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新 window.location.origin    → ‘”https://seg…

    2025年3月7日
    200
  • 学习使用JavaScript实现UTF-8编解码

    首先简单介绍一下UTF-8。UTF-8以字节为单位对Unicode进行编码。UTF-8的特点是对不同范围的字符使用不同长度的编码。对于0x00-0x7F之间的字符,UTF-8编码与ASCII编码完全相同。UTF-8编码的最大长度是6个字节。…

    2025年3月7日
    200
  • 深入浅析JS中的事件委托

    为什么要进行事件委托? 首先实现一个小功能:在单击 HTML 的按钮后,把消息输出到控制台。 为了实现这个小功能,你需要选择按钮,然后再用 addEventListener() 方法来附加事件监听器: Click me document.g…

    2025年3月7日
    200
  • javascript alert是什么意思

    alert在英语中的意思是“警告”,javascript中,alert()指的是弹出警告框;alert()方法可以显示带有一条指定消息和一个“确定”按钮的警告框;用户阅读完所显示的信息后,只需单击“确定”按钮就可以关闭对话框。 本教程操作环…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论