闭包的常见用处

都知道闭包,那闭包到底有啥子用呢? 
1)创建10个li标签,每一个点击的时候,就会弹出相应的序号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<ul id="box"></ul>
<body>
<script type="text/javascript">
  for (var i = 0; i < 10; i++) {
    (function(i) {
      var li = document.createElement("li")
      li.innerHTML = i + ‘<br>‘
      document.getElementById(‘box‘).appendChild(li)
      li.addEventListener(‘click‘, function() {
        alert(i)
      })
    })(i)
  }
</script>
</body>
</html>

这个是个非常简单的例子,也是最常见的,正好,最近我正在投递简历。投的多了,容易忘记哪些投了没投啥的,我就自己写了一个代码,用来管理一下状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" name="" id="text">
        <input type="submit" name="" value="添加" id="button">
    </form>
    <ol id="box">
    </ol>
    <script type="text/javascript">
    // 获取页面元素
    function GetId(id) {
        return document.getElementById(id)
    }
    var button = GetId("button")
    var text = GetId("text")
    function isFirst() {
        var list = []
        return function(value) {
            if (list.indexOf(value) >= 0) {
                return false
            } else {
                list.push(value)
                return true
            }
        }
    }
    var first = isFirst();
    button.addEventListener(‘click‘, function(e) {
        e.preventDefault()
        var value = text.value;
        var isPay = first(value)
        if (value && isPay) {
            var li = document.createElement(‘li‘)
            li.innerHTML = value + ‘<br>‘
            var box = GetId("box")
            box.appendChild(li)
            text.value = ‘‘
        } else if (!isPay) {
            alert("已经投递")
        } else {
            alert("输入不能为空")
        }
        text.value = ‘‘
    })
    </script>
</body>

</html>

非常的简单,就是几行代码而已,每次点击的时候,就去调用那个返回的闭包函数。来判断状态。

大致就是这个样子的,当输入已经投递过的,或者输入为空,则会出现提示消息,很简单,也很实用,算得上是闭包的一个用处。

时间: 2024-10-10 06:56:39

闭包的常见用处的相关文章

js 中的闭包

闭包:闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见方式是 在一个函数内部创建另一个函数        (从定义上讲 js 中所有的函数都是闭包) function a(){ var i=0; function b(){ alert(++i); } return b; } var c=a(); c(); 以上代码的特点: 1.函数b嵌套在函数a内部:      2.函数a返回函数b.    当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包.          

python命名空间与闭包函数详解

python命名空间与闭包函数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要介绍的知识点如下: 1>.三元运算 2>.命名空间 3>.global与nonlocal 4>.函数即变量 5>.嵌套函数 6>.闭包函数 一.三元运算 1 #!/usr/bin/env python 2 #_*_coding:utf-8_*_ 3 #@author :yinzhengjie 4 #blog:http://www.cnblogs.com/yi

Javascript学习日志(三):闭包

说实话,前面一节的原型和原型链在当初学的时候并没有很头疼,对着高级编程第三版撸了几遍就理解透了,闭包这一节真的挺头疼的,很惭愧,看了差不多十来遍吧,还翻看了网上的其他博客和解释文档,五花八门的表达方式,虽然核心思想都一致,但是实在是不能做到自己的理解,后来结合函数作用域链,好不容易有点开窍,趁着热乎劲儿,赶紧写下来,感兴趣的可以参考一下. 闭包:高级编程上面的解释是指有权访问另一个函数作用域中的变量的函数,(是一个函数): 创建闭包的常见方式,就是在一个函数内部创建另一个函数. 在理解闭包之前,

14.匿名函数和闭包

匿名函数和闭包 学习要点:1.匿名函数2.闭包 匿名函数就是没有名字的函数,闭包是可以访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础. 一.匿名函数 //普通函数function box(){ //函数名是box return 'Lee'; } //匿名函数function(){ //匿名函数,会报错,单独的匿名函数是无法运行的 return 'Lee';} //通过表达式自我执行(function box(){ //封装成表达式 alert('Lee');})(

匿名函数和闭包

匿名函数和闭包匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.一. 匿名函数//普通函数functionbox() { //函数名是 boxreturn'Lee';}//匿名函数function() { //匿名函数,会报错return'Lee';}//通过表达式自我执行(function box() { //封装成表达式alert('Lee');})(); //()表示执行函数,并且传参//把匿名函数赋值给变量var box = function() { //将匿名函数赋给

JavaScript核心——闭包

闭包(closure):有权访问另一个函数作用域中的变量的函数. 创建闭包的常见方式就是在一个函数内部创建另一个函数(命名函数或匿名函数都行). 我们以下面这个函数为例: //定义一个用于比较两个对象的函数,按照对象的某个属性来比较 function comparisonFunction(<span style="color:#FF0000;">propertyName</span>){ return function(object1,object2){ <

作用域、作用域链、闭包

作用域.作用域链 一.Js以前没有块级作用域,不过在ES6中有let了. 二.Js使用函数作用域 function aaa(){ var a = "a"; } console.log(a);//报错 三.声明提前 console.log(aaa)//报错 console.log(aaa);//undefined 声明未定义 var aaa; console.log(aaa); //undefined 声明未定义 var aaa = "aaa"; 四.Js的作用域链

匿名函数与闭包

1.匿名函数: 普通函数   function box(){return "lee";}   //函数名是box 匿名函数   function(){return "lee";}   //匿名函数,会报错 通过表达式自我执行    (function box(){alert("lee");})();  //封装成表达式 把匿名函数赋值给变量   var box=function(){return 'lee';}; 函数里的匿名函数    func

JavaScript 闭包究竟是什么

JavaScript 闭包究竟是什么 1.简单的例子 首先从一个经典错误谈起,页面上有若干个div, 我们想给它们绑定一个onclick方法,于是有了下面的代码 <div id="divTest"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> </div> <div id="d