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闭包应用的整理的更多相关文章

  1. 我也谈javascript闭包的原理理解

    参考原文:http://www.oschina.net/question/28_41112 前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性——对象.原型继承.闭包.其中闭包 对 ...

  2. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  3. JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  4. JavaScript闭包(Closure)

    JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...

  5. Javascript闭包和C#匿名函数对比分析

    C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...

  6. javascript闭包理解

    //闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...

  7. Javascript闭包深入解析及实现方法

    1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...

  8. javascript闭包和作用域链

    最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...

  9. JavaScript闭包深入解析

    for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...

随机推荐

  1. WPF开发为按钮提供添加，删除和重新排列ListBox内容的功能

    介绍 我有一种情况,我希望能够将项目添加到列表中,并在列表中移动项目,这似乎是使用a的最简单方法ListBox.我立刻想到了如何以通用的方式做到这一点,然后,也许,可以使用行为来做到这一点.这似乎是一 ...

  2. EventBus中观察者模式的应用

    一 介绍 EventBus是一款安卓的开源消息传递框架,地址:https://github.com/greenrobot/EventBus android系统的消息传递非常复杂,比如activity和 ...

  3. 【原】Java学习笔记008 - 方法（函数）

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 方法/函数 Met ...

  4. System.map文件的作用

    有关System.map文件的信息好象很缺乏.其实它一点也不神秘,并且在整个事情当中它并不象看上去那么得重要.但是由于缺乏必要的文档说明,使其显得比较神秘.它就象耳垂,我们每个人都有,但却不知道是干什 ...

  5. 持续代码质量管理-SonarQube Scanner部署

    1. SonarQube Scanner地址 上一篇文章我们安装了SonarQube-7.3,让我们可以在页面查看代码质量.但是具体的扫描工作则需要SonarQube Scanner完成. 下载页面 ...

  6. LeetCode算法题-Valid Palindrome II（Java实现）

    这是悦乐书的第287次更新,第304篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第155题(顺位题号是680).给定非空字符串s,最多可以删除一个字符. 判断它是否是回 ...

  7. LeetCode算法题-Second Minimum Node In a Binary Tree（Java实现）

    这是悦乐书的第285次更新,第302篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第153题(顺位题号是671).给定非空的特殊二叉树,其由具有非负值的节点组成,其中该树 ...

  8. LeetCode算法题-Binary Tree Tilt（Java实现）

    这是悦乐书的第263次更新,第276篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第130题(顺位题号是563).给定二叉树,返回整棵树的倾斜度.树节点的倾斜被定义为所有 ...

  9. python selenium2 中的显示等待WebDriverWait与条件判断expected_conditions举例

    #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium. ...

  10. 英语口语练习系列-C21-美式幽默

    1. 基础词汇 1.1 back [bæk] n. 后背 on the back 靠着背 sleep on the back 仰着睡 back of the chair 椅子的后背 stab sb. ...