广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript闭包的示例分析
  • 293
分享到

JavaScript闭包的示例分析

2024-04-02 19:04:59 293人浏览 安东尼
摘要

小编给大家分享一下javascript闭包的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!闭包是JavaScript中的

小编给大家分享一下javascript闭包的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

闭包是JavaScript中的一个难点,同时也是它的特色,JavaScript的很多高级应用都要依靠闭包来实现。以下是我学习闭包的记录,希望对你有些帮助。

变量作用域

在学习闭包之前,我们首先要理解JavaScript不同与其他语言独特的变量作用域。在JavaScript中,不存在局部作用域的概念,但是有全局作用域以及函数作用域。全局作用域与其他语言的相同,没有需要注意的地方,而函数作用域是指函数内部声明的变量在函数外部无法直接访问。

var a = 99;
function f1() {
  console.log(a);
}
f1();

上面的代码中,f1可以读取到全局变量a,而下面的代码中a无法被访问。

function f1() {
  var a = 99;
}
console.log(a);

如何从外部读取函数内部声明的变量?

在某些情况下,我们可能需要得到函数内部的变量,正常情况下是无法做到的,因此需要用特殊的办法。

function f1() {
  var a = 99;
  function f2() {
    console.log(a);
  }
}

上面代码中,我们在函数f1中定义另一个函数f2,这样f1中的所有变量对于f2来说就是可见的,既然f2可以读取到f1中的变量,那么我们只要把f2作为f1的返回值,我们就可以在f1的外部读取到它内部的变量了。

function f1() {
  var a = 99;
  function f2() {
    console.log(a);
  }
  return f2;
}
var result = f1();
result();

此时,就形成了一个简单的闭包。因此,闭包就可以简单的理解为函数中的函数,而本质上,闭包就是一个连接函数内部和外部的桥梁。

闭包的特性

闭包会使得函数中的变量都被保存到内存中。首先我们先看一下以下两个例子

function A() {
  var count = 0;
  function B() {
    count++;
    console.log(count);
  }
  return B;
}
var C = A();
C(); // 1
C(); // 2
C(); // 3

count是函数A中的一个变量,它的值在函数B中被改变,函数B每执行一次,count的值就在原来的基础上累加1,因此,函数A中的count变量会一直保存在内存中。

function A(x) {
  function B(y) {
    console.log(x+y);
  }
return B;
}
var C = A(3);
C(5); //8

当3传入A函数后,B函数就会记住这个值,所以在后面传入5的时候只会对B函数中的y赋值,所以最后会输出8。

使用闭包的注意点

由于上述闭包的特性,每次使用闭包都会大量增加内存的消耗,所以不能滥用闭包,否则会影响网页的性能。我们也可以在函数退出前,使函数内变量指向null来手动删除变量。我们可以来看下一道经典的面试题来理解。

function outer(){
  var num = 0; //内部变量
  return function add() { //通过return返回add函数,就可以在outer函数外访问了
    num++; //内部函数有引用,作为add函数的一部分了
    console.log(num);
  };
}
var func1 = outer();
func1(); //实际上是调用add函数, 输出1
func1(); //输出2 因为outer函数内部的私有作用域会一直被占用
var func2 = outer();
func2(); // 输出1 每次重新引用函数的时候,闭包是全新的。
func2(); // 输出2

以上是“JavaScript闭包的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: JavaScript闭包的示例分析

本文链接: https://www.lsjlt.com/news/67887.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript闭包的示例分析
    小编给大家分享一下JavaScript闭包的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!闭包是JavaScript中的...
    99+
    2022-10-19
  • Javascript中return与闭包的示例分析
    这篇文章给大家分享的是有关Javascript中return与闭包的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、return的使用案例一:var a=1;...
    99+
    2022-10-19
  • JavaScript闭包实例分析
    这篇文章主要讲解了“JavaScript闭包实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript闭包实例分析”吧!   JavaSc...
    99+
    2022-10-19
  • JavaScript闭包原理及作用的示例分析
    小编给大家分享一下JavaScript闭包原理及作用的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!简介说明本文介绍JavaScript的闭包的作用、用途及其原理。闭包的定义闭包是指内部函数总是可以访问其所在的外部...
    99+
    2023-06-22
  • js中闭包的示例分析
    这篇文章主要介绍了js中闭包的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、说明闭包是具有很多变量和这些变量的环境的表现式(通常是函数),这些变量也是该表现式的一...
    99+
    2023-06-14
  • JavaScript解析机制与闭包原理的示例分析
    小编给大家分享一下JavaScript解析机制与闭包原理的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:js解...
    99+
    2022-10-19
  • javascript中变量提升和闭包的示例分析
    这篇文章主要介绍了javascript中变量提升和闭包的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。我们先来看一个题目:<s...
    99+
    2022-10-19
  • javascript之匿名函数和闭包的示例分析
    小编给大家分享一下javascript之匿名函数和闭包的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下匿名函数<script type="te...
    99+
    2022-10-19
  • react中useEffect闭包的示例分析
    这篇文章主要介绍react中useEffect闭包的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!问题代码看一段因为useEffect导致的闭包问题代码const btn = u...
    99+
    2023-06-15
  • JavaScript闭包实例代码分析
    这篇文章主要介绍了JavaScript闭包实例代码分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript闭包实例代码分析文章都会有所收获,下面我们一起来看看吧。什么是闭包?闭包的概念是有很多版本...
    99+
    2023-07-05
  • setTimeout与循环闭包的示例分析
    这期内容当中小编将会给大家带来有关setTimeout与循环闭包的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。我在详细图解作用域链与闭包一文中的结尾留下了一个关...
    99+
    2022-10-19
  • Javascript之作用域、作用域链、闭包的示例分析
    这篇文章主要介绍Javascript之作用域、作用域链、闭包的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是作用域?作用域是一种规则,在代码编译阶段就确定了,规定了变量...
    99+
    2022-10-19
  • JS中闭包与定时器的示例分析
    这篇文章主要介绍了JS中闭包与定时器的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。什么是闭包 有什么作用闭包就是能够读取其他函数内...
    99+
    2022-10-19
  • Go语言中基础闭包的示例分析
    这篇文章将为大家详细讲解有关Go语言中基础闭包的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一. 闭包概述闭包就是解决局部变量不能被外部访问的一种解决方案闭包是把函数当作返回值的一种应用二. 代...
    99+
    2023-06-25
  • 分析JavaScript闭包特性
    这篇文章主要介绍“分析JavaScript闭包特性”,在日常操作中,相信很多人在分析JavaScript闭包特性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”分析JavaSc...
    99+
    2022-10-19
  • Parcel打包的示例分析
    这篇文章主要为大家展示了“Parcel打包的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Parcel打包的示例分析”这篇文章吧。Parcel 打包特点...
    99+
    2022-10-19
  • Go语言基础闭包的原理分析示例详解
    目录一. 闭包概述二. 代码演示运行结果代码说明一. 闭包概述 闭包就是解决局部变量不能被外部访问的一种解决方案 闭包是把函数当作返回值的一种应用 二. 代码演示...
    99+
    2022-11-12
  • JavaScript原始值与包装对象的示例分析
    这篇文章主要介绍JavaScript原始值与包装对象的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平...
    99+
    2023-06-15
  • java中jvm关闭的示例分析
    这篇文章给大家分享的是有关java中jvm关闭的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Java有哪些集合类Java中的集合主要分为四类:1、List列表:有序的,可重复的;2、Queue队列:有序...
    99+
    2023-06-14
  • Go语言中的闭包实例分析
    这篇文章主要介绍“Go语言中的闭包实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Go语言中的闭包实例分析”文章能帮助大家解决问题。一、函数的变量作用域和可见性全局变量在main函数执行之前初...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作