JavaScript 闭包使用示例，安全计数

最新推荐文章于 2020-07-14 16:58:29 发布

JavaWeb大牛

最新推荐文章于 2020-07-14 16:58:29 发布

阅读量387

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端

本文链接：https://blog.youkuaiyun.com/neymar_jr/article/details/76448416

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript封装局部变量的方法，并通过一个计数器示例展示了如何避免全局变量可能带来的问题，如冲突及对window对象的影响。通过定义一个名为mybag的对象并为其添加一个增加计数的方法add，每次点击按钮时会更新页面上显示的计数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<p id="demo">0</p>
	<button type="button" onclick="myFunction()">计数!</button>
<script>

	
	var mybag={
		count:0,
		add:function(){
			this.count++;
			return this.count;
		}
	}
	
	function myFunction(){
		document.getElementById('demo').innerHTML =mybag.add()
	}
	

</script>

</body>
</html>

如果把count写成全局变量不太好，一个容易造成冲突，第二个容易会使window 对象崩溃，放在mybag里面。用函数add去改变它。新手写add函数时，注意别写成 add:function { ... } ，注意有个()，另外注意html 是怎么插入值的，不是document.getElementById('demo').innerHTML(mybag.add())

document.getElementById('demo').innerHTML =mybag.add()

document.getElementById('demo').innerHTML =mybag.add()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JavaWeb大牛

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

21、JavaScript 闭包：深入理解与应用

pink7的博客

05-23

本文深入探讨了 JavaScript 中闭包的概念、原理及其实际应用。从闭包的基础定义到作用域链的配置，再到变量引用的特性，文章详细分析了闭包带来的便利与潜在问题，例如内存泄漏和 this 对象绑定问题。同时，文章提供了多个实际应用场景，包括私有变量封装、事件处理和函数柯里化，并讨论了闭包的性能影响及优化策略。通过本文，读者可以全面掌握闭包的核心知识，并在实际开发中灵活运用。

闭包实现计数器

Shinersmile的博客

03-21

716

闭包实现计数器 add 指定了函数自我调用的返回字值。自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。 add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护，只能通过 add 方法修改。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head&gt

参与评论您还未登录，请先登录后发表或查看评论

用闭包实现计数器

hcy48的博客

04-27

4681

如果我们需要一个计数器，一个会把计数器设置成全局变量，这样这个计数器会依次增加var counter = 0;function add() { return counter += 1; }add(); add(); add(); //counter为3这样执行过3次add()后，因为counter是全局变量，所以此时counter为3，实现了计数器的功能。但这样有个问题就是，counter暴露

JAvaScript之闭包按钮点赞案例

qq_41320857的博客

08-02

1192

Scriprt代码： //获取所有的按钮 //根据标签名字获取元素 function my$(tagName) { return document.getElementsByTagName(tagName); } //闭包缓存数据 function fn() { var value=2; return fu...

JS 闭包计数器

Sandy专栏

10-09

5894

JS Counter

闭包计数，闭包事件，常见闭包陷阱

weixin_30482181的博客

08-16

172

什么是闭包？ “官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。 javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。所以在要获得函数内部变量时，只能在函数...

轻松学习Javascript闭包函数

10-23

JavaScript中的闭包是一种强大的特性，它允许函数访问和修改其外部作用域中的变量，即使在其外部函数已经执行完毕后。这种机制使得闭包成为管理作用域、封装...希望这个介绍能够帮助你更好地理解和应用JavaScript闭包。

浅析javascript闭包实例分析

12-02

JavaScript中的闭包是一种强大的特性，它允许函数访问和操作其外部作用域中的变量，即使在其外部函数已经执行完毕的情况下。...理解并掌握闭包的概念对于编写高效且安全的JavaScript代码至关重要。

javascript 避免闭包引发的问题

10-30

闭包是JavaScript中一个重要的概念，它允许函数访问函数外部的变量。但是，如果不正确理解闭包的工作原理，很容易造成一些预料之外的问题，最典型的就是变量共享导致的问题。在提供的代码示例中，存在一个常见问题...

【JavaScript源代码】js闭包和垃圾回收机制示例详解.docx

12-29

### JavaScript闭包与垃圾回收机制详解 #### 一、闭包 ##### 1.1 闭包是什么？闭包（Closure）是JavaScript中一个非常重要的概念，它涉及到函数及其相关的词法作用域。简单来说，闭包就是能够访问其自身作用域...

浅谈闭包

yonglingyu的博客

02-22

199

浅谈闭包 ·关键字：函数闭包一．闭包的介绍前言：在将闭包之前，首先我们要了解一下函数的两个阶段二．函数的两个阶段 1.函数定义阶段：函数是一个复杂数据类型，在内存中开辟一个存储空间，把函数体内的代码当做字符串一模一样的放在这个空间中，把这个空间地址复制给函数名（变量名） 2.函数的调用阶段：按照函数名（变量名）找到对应的存储空间，重新开辟一个函数执行空间...

闭包实现计数器案例

qq_40057138的博客

07-14

793

一级标题统计数值，且该计数器在所有函数中都可以用的 JS代码 function add(){ var count = 0;//变量值始终保持在内存中 function getCount(){ count +=1 ; alert(count); } return getCount; } var result = add(); result(); //输出 1

js计数器，闭包计数器

雪雷-的专栏

04-28

2168

内部函数访问外部变量导致变量在内存中未被回收。var fun = (function() { var x = 0; return function() { console.log(++x); }; })();var foo = document.querySelector('.foo'); foo.addEventListener('click', (func

javascript 闭包计数问题

oragutan的博客

07-04

287

菜鸟教程(runoob.com) 局部变量计数。计数! 0 var add = (function () { var counter = 0; return function () {return counter += 1;} })(); function myFunction(){ document.getElementById("de

利用闭包返回一个计数器函数，每次调用它返回递增整数：

migushu3的博客

10-25

1090

#方案1 def createCounter(): def f(): x = 0 while True: x += 1 yield x it = f() def number(): return next(it) return number createA = c...

计数器闭包做法

Vivian_shuang的博客

07-22

1548

DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> p>全局变量计数p> button onclick="myFunction()">计数button> p id="demo">0p> script type="text/javascript"> // 局部变量的做法错误做

js闭包

djpj23816的博客

08-02

224

<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>局部变量计数。</p> <button type="button" onclic...

javascript闭包的使用--按钮切换

weixin_30267691的博客

08-30

204

闭包实现按钮状态切换看下面的代码： 1 var toggleBtn = document.getElementById('toggle'); 2 3 var toggleFun = (function() { 4 var checked = true; 5 6 return function() { 7 var color = checked...

JavaScript闭包的应用案例——让Onclick事件都能正确的弹出相应的参数

weixin_33802505的博客

01-12

654

摘转自：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530074.html 要求：让这三个节点的Onclick事件都能正确的弹出相应的参数。 <ul> <li id="a1">aa</li> <li id="a2">aa</li> &a

深入理解JavaScript闭包及其代码实例

以压缩包子文件中的`main.js`为例，我们可以构建一个闭包示例： ```javascript function createCounter() { let count = 0; // 外部函数的私有变量 return function() { count += 1; // 内部函数操作外部变量 ...