【前端学习笔记】闭包的作用及案例

1.保存函数执行状态:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="father">
	<p>保存函数执行状态</p>
	<p>性能优化</p>
	<p>封装函数</p>
</div>
</body>
</html>
<script>
var list = document.getElementById(‘father‘).children;
//保存函数执行状态,保存现场(用于注册事件比较多)
  //反面例子
  function demo(nodes){
  	for(var i = 0; i < nodes.length; i++){
  		nodes[i].onclick = function(){
  			alert(i);
  		}
  	}
  }
  demo(list);
 //如上弹出的i永远是3

 // 使用闭包例子
  function demo2(nodes){
  	function Closure(i){
  		return function(){
  			alert(i);
  		}
  	}
  	for(var i = 0; i < nodes.length; i++){
  		nodes[i].onclick = Closure(i);
	  }
	}
  demo2(list);
</script>

2.封装函数,实现信息隐藏,只暴露接口,外部无法访问内部私有变量,内部变量可以访问外部变量:

  var func =(function(){
  	var arr = [];
  	return {
  		add:function(obj){
  			arr.push(obj);
  		},
  		empty:function(){
  			arr = [];
  		},
  		getCount:function(){
  			return arr.length;

  		},
  		get:function(){
  			return arr;

  		},
  	}
  })();

3.性能优化:

// 闭包使用举例 -- 性能优化1
//减少函数定义时间和内存消耗

// 不使用闭包,每次执行sum就注册一次add函数。
function sum(i, j) {
  var add = function(i, j){
    return i+j;
  }
  return add(i, j)
}

var startTime = new Date();
for(var i = 0; i< 1000000; i++) {
  sum(1,1);
}
var endTime = new Date();
console.log(endTime - startTime);

 // 使用闭包,不用每次执行sum就注册一次add函数。
var sum = (function() {
  var add = function(i, j){
    return i+j;
  }
  return function(i,j) {
    add(i, j);
  }
})();

var startTime = new Date();
for(var i = 0; i< 1000000; i++) {
  sum(1,1);
}
var endTime = new Date();
console.log(endTime - startTime);
/**
闭包使用举例 -- 性能优化2
普通递归函数跟使用闭包记录调用返回结果的递归函数调用次数对比
**/
// 普通递归函数
 var factorial = (function(){
   var count = 0;
   var fac = function(i){
     count++;
     if (i==0) {
       console.log(‘调用次数:‘ + count);
       return 1;
     }
     return i*factorial(i-1);
   }
   return fac;
 })();
 for(var i=0;i<=10;i++){
   console.log(factorial(i));
 }

// 使用闭包记录调用返回结果的递归函数 -- 记忆函数
var factorial = (function(){
  var memo = [1];
  var count = 0;
  var fac = function(i){
    count++;
    var result = memo[i];
    if(typeof result === ‘number‘){
      console.log(‘调用次数:‘ + count);
      return result;
    }
    result = i*fac(i-1);
    memo[i] = result;
    return result;
  }
  return fac;
})();
for(var i=0;i<=10;i++){
  console.log(factorial(i));
}
时间: 2024-10-06 02:59:23

【前端学习笔记】闭包的作用及案例的相关文章

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

2017-2-15从0开始前端学习笔记-文本

2017-2-15从0开始前端学习笔记-文本 标签 文本 粗体和斜体 <b>bold粗体</b> <i>italic斜体</i> 上标和下标 <sup>上标</sup> <sub>下标</sub> 空白 换行符和水品线 <br/>换行符 <hr/>水平线 语义化标记 加粗和强调 <strong>加粗 加强语气</strong> <em>强调 斜体 能改

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Linux学习笔记——例说makefile 综合案例

0.前言 从学习C语言开始就慢慢开始接触makefile,查阅了很多的makefile的资料但总感觉没有真正掌握makefile,如果自己动手写一个makefile总觉得非常吃力.所以特意借助博客总结makefile的相关知识,通过例子说明makefile的具体用法. 例说makefile大致分为4个部分 1.只有单个C文件 2.含有多个C文件 3.需要包括头文件路径 4.一个较为复杂的例子 [代码仓库]--makefile-example 代码仓库位于bitbucket,可借助Tortoise

WEB前端学习笔记 三

接上一篇,web学习笔记 二,web学习笔记刚刚发出,就发现被其他网站采集了,在此感谢您的采集和转发,但请注明文章出自网知博学. 1.7  开发工具的选择 增强文本编辑器:EditPlus.Notepad++ 特点:比较小.占用系统资源比较少.代码颜色高亮显示.但没有代码自动补功能 IDE:(Integrated Development Environment,集成开发环境).IDE集成开发环境(简称IDE)开发环境就是指在开发软件的时候需要用到的软件.这些软件包括代码编辑器.编译器.调试工具和

前端学习笔记汇总(之merge方法)

学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果)的并集 接下来,做出测试: 1 $(function () { 2 var arr1 = ['apple', 'orange',1, 'cherry', 'orange']; 3 var arr2 = ['chen', 343, true, 'cherry',1]; 4 var result = $

前端学习笔记

If fear is cultivated;it will become stronger; If faith is cultivated;it will achieve mastery. -----<阿甘正传> 开通前端学习博客,每个阶段一个目标,总结自己的收获以及所犯错误,不忘初心,方得始终!

大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式 浏览器兼容性 大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w