JavaScript闭包应用的整理
0 什么是JavaScript闭包？
当函数定义内部的函数被保存到外部时，就会形成闭包。闭包会导致作用域链不释放，造成内存泄漏。
1 获取局部变量
【练习目的】
下面这个练习，是为了通过闭包实现获取定义在function内部的局部变量值。
【注意事项】
最后a()函数返回的是b()的执行。因此在调用a()的时候，也即调用的是b()的执行。
若a()返回的是b函数名，为了得到scope局部变量的值，对a的调用形式应为a()()。
【输出结果】
‘local’
【样例代码】
var scope = 'global';
function a(){
var scope = 'local';
var b = function(){
return scope;
}
return b();
} console.log(a());
2 实现数组累加
【练习目的】
下面这个练习，是为了通过闭包实现状态的保存，同时练习数组reduce方法。
【注意事项】
注意reduce()的用法。
【输出结果】
28
【样例代码】
function cumulate_sum(arr){
var sum = function(){
return arr.reduce(function(x , y){
return x + y;
});
}
return sum();
}
console.log(cumulate_sum([1,2,3,4,5,6,7]));
3 实现点击相应位置输出对应序号
【练习目的】
下面这个练习，实现了通过立即执行函数来实现值的保存。
【注意事项】
如果不采用立即执行函数，则由于拷贝出来的i为最终的i值，输出会恒为5.
此外需要注意鼠标点击事件的绑定方法addEventListener('click' , function(){})
其中的第二个参数为回调函数。
【输出结果】
通过浏览器进行观察
【样例代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Closure</title>
//编写盒子样式
<style>
*{
margin :0;
padding:0;
list-style: none;
}
li{
height:50px;
width: 300px;
border:1px solid #000;
text-align:center;
line-height: 50px;
color:#000;
margin:30px;
}
</style>
</head>
<body>
// 生成盒子
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var oLi = document.getElementsByTagName('li');
for(var i = 0 ; i < oLi.length ; i ++){
(function(i){
oLi[i].addEventListener('click' , function(){
console.log(i + 1);
})
})(i);
}
</script>
</body>
</html>
4 写在后面
闭包是JavaScript中常用的实现方式，是学习过程的重点，此后还会对其应用的知识点进一步整理。
明天考蓝桥杯了，祝自己好运！
JavaScript闭包应用的整理的更多相关文章
- 我也谈javascript闭包的原理理解
参考原文:http://www.oschina.net/question/28_41112 前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性——对象.原型继承.闭包.其中闭包 对 ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript闭包(Closure)
JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...
- Javascript闭包和C#匿名函数对比分析
C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...
- javascript闭包理解
//闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...
- Javascript闭包深入解析及实现方法
1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...
- javascript闭包和作用域链
最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...
- JavaScript闭包深入解析
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...
随机推荐
- Elasticsearch源码分析 - 源码构建
原文地址:https://mp.weixin.qq.com/s?__biz=MzU2Njg5Nzk0NQ==&mid=2247483694&idx=1&sn=bd03afe5a ...
- SQLServer之创建视图
视图定义 视图是一个虚拟的表,是一个表中的数据经过某种筛选后的显示方式,视图由一个预定义的查询select语句组成. 使用SSMS数据库管理工具创建视图 1.连接数据库,选择数据库,展开数据库-> ...
- c/c++ 网络编程 bind函数
网络编程 bind函数 bind的作用是确定端口号. 正常处理都是先bind,然后listen 如果不bind,直接listen,会是什么结果? 内核会自动随机分配一个端口号 例子: #include ...
- Json对象遍历
var json = {"id":"123","name":"tom","sex":"ma ...
- SpringBoot+Maven多模块项目（创建、依赖、打包可执行jar包部署测试）完整流程
一,创建Maven多模块项目先建立外层父工程 File →new →project 选择Spring Initializr Next下一步到以下页面 工程结构如下 ...
- 为Arch Linux安装搜狗输入法
我们在使用电脑的时候很多时候需要输入中文,这个时候如果没有一个中文输入法那么就是一件非常尴尬的事情了.我门现在开始在我们的archlinux来安装sougou输入法 1.我们需要配置我们的源 arch ...
- Gitlab利用Webhook实现Push代码后的jenkins自动构建
之前部署了Gitlab的代码托管平台和Jenkins的代码发布平台.通常是开发后的代码先推到Gitlab上管理,然后在Jenkins里通过脚本构建代码发布.这种方式每次在发版的时候,需要人工去执行je ...
- 总结JAVA----IO流中的File类
对于IO流中File类的总结 File类的基本概念 File类只能用于完成对于文件属性(是否存在.可读性.长度)的一些操作,不能用于文件的访问. File类的对象 File类的对象存储的是文件的绝对路 ...
- SQL MID() 函数
MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID(column_name,start[,length]) FROM table_name 参数 ...
- cumprod、prod函数
1.prod函数 prod函数用于求矩阵元素的积,其调用格式如下. (1)B=prod(A):若A为向量,则返回所有元素的积:若A为矩阵,则返回各列所有元素的积. (2)B=prod(A,dim):返 ...