JavaScript闭包的解析(附代码)

本篇文章给大家带来的内容是关于JavaScript闭包的解析(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。了解闭包前首先需要了解变量作用域

变量作用域:全局变量和局部变量
1、全局变量
直接定义在全局作用域的变量

var name='Fakin';function getName(){  alert(name)}getName()//'Fakin'

登录后复制

而函数可以直接读取全局变量

2、局部变量
直接定义在函数内部的变量(在ES6之前JS是没有块级作用域的。)

function getName(){  var name='Fakin';}alert(name)//undefined

登录后复制

闭包
搞清楚了这两个东西后咱们在来看下闭包是什么回事!

问题1:闭包是个啥玩意,上面说了一堆,我看不懂啊?
答:闭包个人理解就是能读取其他函数内部变量的函数

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

问题2:闭包怎么用
答:在一个函数的内部在创建一个函数,在这个函数中引用上一函数的变量,最后讲这个函数返回即可,是不是很绕,下面给例子

function f1(){    var n=999;    nAdd=function(){n+=1}    function f2(){      alert(n);    }    return f2;  }  var result=f1();  result(); // 999  nAdd();  result(); // 1000

登录后复制

如上例子中 f2就是闭包函数,在f1中返回函数f2,最后把f1赋值给result,result一共运行了两次,结果也得出了咱们想要的,也就证明了,在闭包中f2引用了f1的变量‘n’而‘n’没有因为f1执行完毕后然后在内存中销毁,大家应该知道,在JS中如果一个变量在函数执行完后没有被其他地方给引用的话,是就自动销毁的。

使用闭包需要注意的地方

1:由于闭包会使得函数中的变量都被保存在内存中,内存使用很大,会造成渲染卡顿等等,浏览器运行慢,在IE浏览器中还会造成内存泄露等问题
2:由于在闭包中子函数引用父函数的变量,子函数会修改父函数变量,请不要随意修改父函数变量的值

思考题

function count() {    var arr = [];    for (var i=1; i

为什么f1 f2 f3都返回的是同一个值,而不是我们想要的呢?那怎么能不能闭包来解决呢?
其实也很简单,咱们闭包多两行代码就行

function count() {    var arr = [];    for (var i=1; i

登录后复制

以上就是JavaScript闭包的解析(附代码)的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 00:48:15
下一篇 2025年3月8日 00:48:24

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

相关推荐

  • JavaScript复杂判断逻辑写法技巧

    本篇文章给大家带来的内容是关于JavaScript复杂判断逻辑写法技巧,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在某些场景中,我们可能会遇到多个判断条件的情况,针对这种情况,我们通常会使使用if/else/switc…

    编程技术 2025年3月8日
    200
  • JavaScript中声明提升的介绍(代码示例)

    本篇文章给大家带来的内容是关于JavaScript中声明提升的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、概述 JS 中,我们会理所当然地认为代码是一句一句地执行的,但并不完全正确。 singer …

    编程技术 2025年3月8日
    200
  • JavaScript中高阶函数的介绍(代码示例)

    本篇文章给大家带来的内容是关于javascript中高阶函数的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一个函数就可以接收另一个函数作为参数,简言之,函数的参数能够接收别的函数,这种函数就称之为高阶函…

    2025年3月8日
    200
  • JavaScript变量的介绍(附代码)

    本篇文章给大家带来的内容是关于JavaScript变量的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 正如代数一样,javascript 变量用于保存值或表达式。 可以给变量起一个简短名称,比如 x,或者更…

    编程技术 2025年3月8日
    200
  • VBScript和JavaScript之间的区别是什么?

    vbscript和javascript都是一种脚本语言,那么它们之间有什么不同?下面本篇文章就来大家了解一下vbscript和javascript之间的区别,希望对大家有所帮助。【视频教程推荐:javascript教程】 什么是VBScri…

    2025年3月8日
    200
  • vue模块拖拽效果的实现代码

    本篇文章给大家带来的内容是关于vue模块拖拽效果的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑。 现在闲来无事,把这个东西实现了一下。…

    编程技术 2025年3月8日
    200
  • Node.js之静态资源服务器实现(附代码)

    本篇文章给大家带来的内容是关于node.js之静态资源服务器实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本文介绍了一个简单的静态资源服务器的实例项目,希望能给Node.js初学者带来帮助。项目涉及到htt…

    2025年3月8日
    200
  • Koa日志中间件封装开发的方法介绍

    本篇文章给大家带来的内容是关于Koa日志中间件封装开发的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 对于一个服务器应用来说,日志的记录是必不可少的,我们需要使用其记录项目程序每天都做了什么,什么时候发生过错误,…

    2025年3月8日
    200
  • Node中模块实现过程的详细介绍(附示例)

    本篇文章给大家带来的内容是关于node中模块实现过程的详细介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CommonJS 定义了 module、exports 和 require 模块规范,Node.js …

    编程技术 2025年3月8日
    200
  • JavaScript冒泡和捕获的知识介绍(附代码)

    本篇文章给大家带来的内容是关于JavaScript冒泡和捕获的知识介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 JS 冒泡和捕获是怎么回事 冒泡和捕获是指在元素上的事件被触发的时候,js 传递事件的两种方向…

    2025年3月8日
    200

发表回复

登录后才能评论