javascript基础六:说说你对闭包的理解?闭包使用场景?

news2024/11/22 16:19:02

在这里插入图片描述
一、是什么
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)
也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域

在 JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁

举个粟子

function init() {
    var name = "小爱同学"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数,一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

displayName() 没有自己的局部变量。然而,由于闭包的特性,它可以访问到外部函数的变量

二、使用场景

任何闭包的使用场景都离不开这两点:

  • 创建私有变量
  • 延长变量的生命周期

一般函数的词法环境在函数返回后就被销毁,但是闭包会保存对创建时所在词法环境的引用,即便创建时所在的执行上下文被销毁,但创建时所在词法环境依然存在,以达到延长变量的生命周期的目的

下面举个粟子
在页面上添加一些可以调整字号的按钮


function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

柯里化函数
柯里化的目的在于避免频繁调用具有相同参数函数的同时,又能够轻松的重用


// 假设我们有一个求长方形面积的函数
function getArea(width, height) {
    return width * height
}
// 如果我们碰到的长方形的宽老是10
const area1 = getArea(10, 20)
const area2 = getArea(10, 30)
const area3 = getArea(10, 40)

// 我们可以使用闭包柯里化这个计算面积的函数
function getArea(width) {
    return height => {
        return width * height
    }
}

const getTenWidthArea = getArea(10)
// 之后碰到宽度为10的长方形就可以这样计算面积
const area1 = getTenWidthArea(20)

// 而且如果遇到宽度偶尔变化也可以轻松复用
const getTwentyWidthArea = getArea(20)

使用闭包模拟私有方法
在JavaScript中,没有支持声明私有变量,但我们可以使用闭包来模拟私有方法
下面举个例子:

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
})();

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

上述通过使用闭包来定义公共函数,并令其可以访问私有函数和变量,这种方式也叫模块方式

两个计数器 Counter1 和 Counter2 是维护它们各自的独立性的,每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境,不会影响另一个闭包中的变量

其他
例如计数器、延迟调用、回调等闭包的应用,其核心思想还是创建私有变量和延长变量的生命周期

三、注意事项
如果不是某些特定任务需要使用闭包,在其它函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响
例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。

原因在于每个对象的创建,方法都会被重新赋值


function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}

上面的代码中,我们并没有利用到闭包的好处,因此可以避免使用闭包。修改成如下:

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/575437.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习-Kmeans

K-means是一种经典的无监督学习算法,用于对数据进行聚类。K-means算法将数据集视为具有n个特征的n维空间,并尝试通过最小化簇内平方误差的总和来将数据点划分为簇。本文将介绍K-means算法的原理、实现和应用。 定义 K-means是一种无监督学习算法&#…

MongoDB基础到入门(一篇就够了)

文章目录 文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持✨前言MongoDBMongoDB体系结构MongoDB数据模型MongoDB部署安装服务器启动服务器 Shell连接(mongo命令)MongoDB可视化工具MongoDB命令基本常用⭐权限数据库⭐辅助命令⭐集合⭐…

vite的使用

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 系列文章目录 前端系列文章——传送门 后端系列文章——传送…

抖音seo源代码分享(前端+后端)

后端代码展示: $where [ [name > dvtv_s_id, oper > , value > $this->sid], [name > dvtv_dv_id, oper > , value > $dv_id], ]; $cache_model new App_Model_Douyin_MysqlVideoTempVideoStora…

挂耳式耳机推荐,这几个蓝牙耳机品牌不容错过!

办公的同时享受音乐是释放工作压力的不错途径,对于成为打工人日常配饰的耳机随着无线技术的不断进步也在不断开发新产品。开放式耳机不入耳佩戴有效的降低对耳朵的负担,在不打扰旁人的同时,长时间的佩戴也是对耳朵的考验,不知该如…

29 Vue 中 v-if/show/for 的实现

前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 主要记录的是 vue 的相关实现机制 呵呵 理解本文需要 vue 的使用基础, js 的使用基础 v-if 测试用例 测试用例如下, 主要是一个 if 的使用 这里我们仅仅跟进到…

chatgpt赋能python:Python桌面应用程序:在SEO中的重要性和应用

Python桌面应用程序:在SEO中的重要性和应用 在当今数字时代,拥有一个桌面应用程序成为了非常重要的一件事情,特别是对于那些需要使用软件来完成日常任务的工作人员。而Python作为一种跨平台编程语言,可以帮助开发者编写适用于Win…

chatgpt赋能python:Python换行连接介绍

Python 换行连接介绍 如果你是一个Python初学者,你可能会想知道如何在程序中使用换行连接来使代码更加易读和易于理解。 换行连接是Python编程中一个很重要的概念,也是一个很简单的概念,但是许多初学者经常会犯错误。 在本文中,我…

( 链表) 142. 环形链表 II——【Leetcode每日一题】

❓142. 环形链表 II 难度:中等 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定…

【测试】软件测试基本概念、软件测试分类、测试工具

文章目录 软件测试的定义概念、目的什么是软件?软件与程序的区别软件测试的定义软件测试的目的软件测试的流程软件测试执行 软件测试分类按照测试阶段分类单元测试集成测试确认测试系统测试验收测试 按照测试方法分类静态测试动态测试黑盒测试白盒测试灰盒测试冒烟测…

算法第四版 Algorithms Part 1动态联通性

联通性检测用途 照片中的像素网络中的计算机社交网络中的朋友计算机芯片中的电路元器件数学集合中的元素Fortan程序中的变量复合体系中的金属位 假定已连接等价于 反身的: p与p本身是连接的.对称的: 如果p连接到q,那么q也链接到p传递的: 如果p连接到q并且q连接到r,那么p连接…

港科夜闻|香港科大近百名创新企业家回归母校庆祝大学首个「独角兽日」

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大近百名创新企业家回归母校庆祝大学首个「独角兽日」。这些香港科大毕业的创业者,参与创立了五间独角兽企业或上市公司,以及近90间初创企业,包括现正快速崛起、有潜力成为下一间…

【Linux】守护进程(附终端、进程组、会话的介绍)

目录 1、终端2、进程组3、会话4、守护进程 橙色 1、终端 echo $$ 可以查看当前终端进程的id 默认情况下(没有重定向),每个进程的标准输入、标准输出和标准错误输出都指向控制终端、进程从标准输入读也就是读用户的键盘输入,进程往标准输出或标准错误…

PGXC GaussDB

PGXCA PGXC(PostgreSQL eXtended Coordinator)是一个基于 PostgreSQL 架构的分布式数据库解决方案。它扩展了 PostgreSQL,为用户提供了在多个节点上分布式存储和处理数据的能力。 PGXC 的设计目标是将 PostgreSQL 扩展为能够处理大规模数据…

2023 年互联网上 10个最佳联盟营销论坛(付费和免费)

2023 年互联网上 10个最佳联盟营销论坛(付费和免费) 在文章中,我将分享 2023 年的 10 个最佳联盟营销论坛。 您是联盟营销的新手并正在寻找向专业人士学习的地方吗? 您来对地方了,我们赞赏您加入联盟营销论坛的决定…

【C++初阶】9. string类的模拟实现

string类的完整实现放这里啦!快来看看吧 1. string类的成员 string类的作用就是将字符串类型实现更多功能,运算符重载,增删改查等等操作,所以其成员就包含char*的字符串 private:char* _str;size_t _capacity;size_t _size;2. …

三对角矩阵原理及C++实现

一、三对角矩阵 1.三对角矩阵概念 2.三对角矩阵元素数量 对于给定n阶方阵M,若其为三对角矩阵,则元素个数N为: 若n1,此时方阵只有一个元素M[0][0],由定义知该元素也在三对角线上。故N1。若n>1,由三对角…

chatgpt赋能python:Python文件夹的使用和优化

Python 文件夹的使用和优化 文件夹是计算机操作系统中最基本的存储单位之一。在计算机领域,文件夹也被称为目录。文件夹中可以存储多个文件或其他文件夹,使得文件在计算机中可以更好的组织和管理。基于Python语言,我们可以很容易地创建、读取…

javaEE基于springboot的小区社区文化活动报名系统jsp生活服务网站

社区文化宣传网站采用的开发框架为springboot框架,开发工具采用Eclipse,idea 服务器用的是Tomcat。编码语言是Java,数据库采用Mysql数据库。 本社区文化宣传网站,主要服务的用户是社区附近的居民,为居民展示最新的新闻…

带电更换10kV架空线路直线杆绝缘子(绝缘手套作业法)

一、现场复勘 1.核对线路及杆塔号 线路双重名称及杆号无误。 2.检查杆身质量 3.检查电杆埋深 4.检查拉线受力情况 5.检查相邻杆情况 作业点及相邻侧电杆之间导线应无断股等现象。 6.检查气象条件 作业前需进行湿度和风速的测量,风力大于5级,或湿度大…