因为实验室项目要用，所以最近在学习OpenLayers，但是从来没有做过前端呀，坑爹的，硬着头皮上吧

反正正好借这个机会学习一下JS，本来对这门语言也挺感兴趣的，多多少少写过一下JS代码了，差不多学一些里面的特殊概念了

以前一直觉得闭包这个词太神秘，所以先选这个概念了

参考资料：《JavaScript高级程序设计》

　　　　　　博客：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures（主要是这一篇，代码来源）

　　　　　　　　　http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

　　　　　　　　　http://coolshell.cn/articles/6731.html

代码里面有注释，就不写太多了。

  1. <!--闭包是指有权访问另一个函数作用域的变量的函数-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7. </head>
  8. <body>
  9. <!--<a href="#" id="size-12">12</a>-->
  10. <!--<a href="#" id="size-14">14</a>-->
  11. <!--<a href="#" id="size-16">16</a>-->
  12.  
  13. <script language="JavaScript">
  14. //  function makeFunc(){
  15. //      var name = "Mozilla";
  16. //      function displayName(){
  17. //          alert(name);
  18. //      }
  19. //      return displayName;
  20. //  }
  21. //    var myFunc = makeFunc();
  22. //    myFunc();
  23.  
  24. //    function makeAdder(x){
  25. //        return function(y){
  26. //            return x+y;
  27. //        };
  28. //    }
  29. //    var add5 =makeAdder(5);
  30. //    var add10=makeAdder(10);
  31. //    document.writeln(add5(2));
  32. //    document.writeln(add10(2));
  33.  
  34. //闭包允许将函数与其所操作的某些数据（环境）关连起来。这显然类似于面向对象编程。
  35. //在面对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。
  36. //    function makeSizer(size){
  37. //        return function() {
  38. //            document.body.style.fontSize = size + 'px';
  39. //        };
  40. //    }
  41. //    var size12 = makeSizer(12);
  42. //    var size14 = makeSizer(14);
  43. //    var size16 = makeSizer(16);
  44. //
  45. //    document.getElementById('size-12').onclick=size12;
  46. //    document.getElementById('size-14').onclick=size14;
  47. //    document.getElementById('size-16').onclick=size16;
  48. //完成面向对象中的私有化
  49. //    var Counter = (function(){
  50. //        var privateCounter = 0;
  51. //        function changeBy(val){
  52. //            privateCounter+=val;
  53. //        }
  54. //        return {
  55. //            increment:function(){
  56. //                changeBy(1);
  57. //            },
  58. //            decrement: function () {
  59. //                changeBy(-1);
  60. //            },
  61. //            value:function(){
  62. //                return privateCounter;
  63. //            }
  64. //        }
  65. //    })();
  66. //    alert(Counter.value());
  67. //    Counter.increment();
  68. //    Counter.increment();
  69. //    alert(Counter.value());
  70. //    Counter.decrement();
  71. //    alert(Counter.value());
  72. //如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，
  73. // 因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。
  74.  
  75. //例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。
  76. // 原因是这将导致每次构造器被调用，方法都会被重新赋值一次（也就是说，为每一个对象的创建）。
  77.  
  78. </script>
  79. </body>
  80. </html>

JavaScript闭包简单学习的更多相关文章

  1. JavaScript闭包简单应用

    闭包定义 在JavaScript中,当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包.简单说,闭包就是能够读取其他函数内部变量的函数. 闭包的作用: 1. 可以读取函数内部的变量 2. 让 ...

  2. django之JavaScript的简单学习2

    前言:ajax预备知识:json进阶 1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: 请大家记住一 ...

  3. JavaScript 的简单学习2

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  4. Javascript闭包简单理解

    提到闭包,想必大家都早有耳闻,下面说下我的简单理解.平时写代码.第三方框架和组件都或多或少用到了闭包.所以,了解闭包是非常必要的.呵呵... 一.什么是闭包简而言之,就是能够读取其他函数内部变量的函数 ...

  5. javaScript的简单学习

    JavaScript介绍 JavaScript跟java没半毛钱关系 JavaScript有三部分组成:ECMAScript,document object model,broswer object ...

  6. [javascript] Promise简单学习使用

    原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html 解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Pr ...

  7. JavaScript闭包，只学这篇就够了

    # 闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念,即使新手也可以轻松参透闭包的含义. 其实只要理解了核心概念,闭包并不是那么的难于理解.但是,网上充斥了太多学术性的 ...

  8. JavaScript闭包只学这篇就够了

    闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念,即使新手也可以轻松参透闭包的含义. 其实只要理解了核心概念,闭包并不是那么的难于理解.但是,网上充斥了太多学术性的文章 ...

  9. javascript闭包1

    javascript闭包 在学习javascript闭包之前,需要先了解一下"作用域链". 每一段javascript代码都有一个与之关联的作用域链(scope chain),这个 ...

随机推荐

  1. Android RelativeLayout 属性 转自互联网

    // 相对于给定ID控件 android:layout_above 将该控件的底部置于给定ID的控件之上; android:layout_below 将该控件的底部置于给定ID的控件之下; andro ...

  2. java scoket http TCP udp

    http://blog.csdn.net/kongxx/article/details/7259436 TCP/UDP: 齐全:http://www.blogjava.net/Reg/archive/ ...

  3. pat04-树4. Root of AVL Tree (25)

    04-树4. Root of AVL Tree (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue An A ...

  4. js 中标签的增删 方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. win10的xbox下载应用或者游戏时，出现0x80070422和0x80073D0A的解决办法

    这个错误:0x80070422是因为关闭了windows update这个服务导致的 这个错误:0x80073D0A是因为关闭了windows firewall这个服务导致的 具体操作: cmd下se ...

  6. tomcat和应用集成

    将tomcat作为应用的一部分集成到应用中,使得应用可以直接开启http服务,对外提供接口.此时应用程序不必再遵守j2ee中的文件目录格式要求. 此种方式改变了以往先部署tomcat容器,再按照j2e ...

  7. C#基础知识-数组_ArrayList_List(九)

    之前两篇文档讲述了C#中的面向对象的概念,其实这个概念对于很多种语言都是通用的,只不过每种语言具体实现的过程方法不一样,比如Java.C++.python等,这些都是很流行的面向对象的语言在编程语言排 ...

  8. angular2-模块

    Angular模块 (NgModule) Angular 模块是带有 @NgModule 装饰器函数的类. @NgModule接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码. ...

  9. The twentyth day

    10th Dec 2018 Cause It's hard for me to lose in my life I've found  因为失去你是一种煎熬 Only time will tell a ...

  10. 原生js获取手机定位信息

    <script type="text/javascript"> function Location() {}; Location.prototype.getLocati ...