//function(){}//会报错 var fun = function(){};//将匿名函数赋值给变量 (function(){})();//匿名函数自执行 function(){ return function(){};//函数里" />
当前位置:首页 > 日记 > 正文

javascript笔记之匿名函数和闭包

javascript笔记之匿名函数和闭包

本文介绍了js匿名函数和闭包的相关内容,供大家参考,具体内容如下

匿名函数

<script type="text/javascript">  //function(){}//会报错  var fun = function(){};//将匿名函数赋值给变量   (function(){})();//匿名函数自执行   function(){  return function(){};//函数里的匿名函数  } </script> 

闭包

闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见的方式,就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量

<script type="text/javascript">  //通过闭包可以返回局部变量  function box() {  var user = 'Lee';  return function () { //通过匿名函数返回box()局部变量   return user;  };  }  console.log(box()());  //通过box()()来直接调用匿名函数返回值  var b = box();  console.log(b());  //另一种调用匿名函数返回值   //通过闭包可以实现局部变量的累加  function box() {  var age = 100;  return function () {   age ++;   return age;  }  }  var b = box();  //获得函数  console.log(b());  //调用匿名函数  console.log(b());  //第二次调用匿名函数,实现累加 </script> 

使用闭包有一个优点,也是它的缺点:就是可以把局部变量驻留在内存中,可以避免使用全局变量。(全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难,所以推荐使用私有的,封装的局部变量)。由于闭包里作用域返回的局部变量资源不会被立刻销毁回收,所以可能会占用更多的内存。过度使用闭包会导致性能下降,建议在非常有必要的时候才使用闭包。

循环里的闭包

<script type="text/javascript">  function box() {  var arr = [];   for (var i = 0; i < 5; i++) {   arr[i] = function () {   return i;   };  }  return arr;  }   var b = box();    //得到函数数组  console.log(b.length);   //得到函数集合长度  for (var i = 0; i < b.length; i++) {  console.log(b[i]());   //输出每个函数的值,都是最后一个值  } </script> 

box()已执行完毕,i早已变成5,而返回的函数保存的变量都是i,所以最终的结果就是5个5

循环里的闭包--修改

<script type="text/javascript">  function box() {  var arr = [];   for (var i = 0; i < 5; i++) {   arr[i] = (function (num) {   return function () {  //返回函数    return num;   }   })(i);   /*   //相当于:   arr[i] = (function () {   var num = i;//定义一个局部变量   return function () {    return num;   }   })();   */  }  return arr;  }   var b = box();    //得到函数数组  for (var i = 0; i < b.length; i++) {  console.log(b[i]());   //0,1,2,3,4  } </script> 

通过在box作用域里新建块级作用域来是每个返回函数保存的变量都不一样

闭包中的this对象

而闭包却在运行时指向window的,因为闭包并不属于这个对象的属性或方法。

<script type="text/javascript">  var user = 'The Window';   var obj = {  user : 'The Object',  getUserFunction : function () {   return function () { //闭包不属于obj,里面的this指向window   return this.user;   };  }  };  console.log(obj.getUserFunction()()); //The window  //可以强制指向某个对象  console.log(obj.getUserFunction().call(obj)); //The Object  /*  //也可以从上一个作用域中得到对象  getUserFunction : function () {  var that = this;  //从对象的方法里得对象  return function () {   return that.user;  };  }  */ </script> 

模仿块级作用域

JavaScript没有块级语句的作用域,if () {} for () {}等没有作用域

<script type="text/javascript">  //使用块级作用域(私有作用域)改写  function box(count) {  (function () {   for (var i = 0; i<count; i++) {}  })();  console.log(i); //报错,无法访问  }  box(2); </script> 

使用了块级作用域(私有作用域)后,匿名函数中定义的任何变量,都会在执行结束时被销毁。在全局作用域中使用块级作用域可以减少闭包占用的内存问题,因为没有指向匿名函数的引用。只要函数执行完毕,就可以立即销毁其作用域链了。

私有变量

JavaScript没有私有属性的概念;所有的对象属性都是公有的。不过,却有一个私有变量的概念。任何在函数中定义的变量,都可以认为是私有变量,因为不能在函数的外部访问这些变量

而通过函数内部创建一个闭包,那么闭包通过自己的作用域链也可以访问这些变量。而利用这一点,可以创建用于访问私有变量的公有方法。

<script type="text/javascript">  function Box() {  var age = 100;   //私有变量  function run() {   //私有函数   return '运行中...';  }  this.get = function () {  //对外公共的特权方法,闭包(函数访问了不属于对象作用域的age和run方法)   return age + run();  };  }   var box = new Box();  console.log(box.get()); </script> 

静态私有变量

上面的私有变量在每次实例化对象的时候都会重新初始化,通过块级作用域(私有作用域)中定义私有变量或函数,同样可以创建对外公共的特权方法。。

<script type="text/javascript">  (function () {  var age = 100;//静态私有变量  function run() {  return '运行中...';  }  Box = function () {}; //构造方法,没有使用var,全局函数  Box.prototype.go = function () { //原型方法  return age + run();  };  })();   var box = new Box();  console.log(box.go()); </script> 

模块模式

<script type="text/javascript">  var box = function () { //box是一个模块  var age = 100;  function run() {  return '运行中...';  }  return { //直接返回对象  go : function () {  return age + run();  }  };  }(); </script> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

JavaScript禁止微信浏览器下拉回弹

JavaScript禁止微信浏览器下拉回弹

浏览器,回弹,效果,电脑软件,JavaScript,本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下方法1:<script type="text/javascript"> var overscroll = function(el){ el.addEventListener('touchs…

react系列从零开始_简单谈谈react

react系列从零开始_简单谈谈react

从零开始,简单,系列,电脑软件,react,react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到webpack,node等前端知识,每天会…

javascript+css3开发打气球小游戏

javascript+css3开发打气球小游戏

小游戏,完整,代码,电脑软件,javascript,效果知识点:css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等。css代码如下:<style>{margin:0;padding:0;}body{background:#434343;…

jQuery分页插件jquery.pagination.

jQuery分页插件jquery.pagination.

分页,插件,使用方法,电脑软件,jQuery,jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢;jQuery的多数插件使…

node.js 利用流实现读写同步,边读

node.js 利用流实现读写同步,边读

读写,方法,同步,电脑软件,node,如下所示://10个数 10个字节,每次读4b,写1blet fs=require("fs");function pipe(source,target) { //先创建可读流,再创建可写流 //先读一次,rs.on(data) //将读到的类容写入目标中 ,返回布尔值,如果是ture,继…

ie下js不执行的几种可能

ie下js不执行的几种可能

不执行,几种,电脑软件,js,1、首先考虑的就是代码是否有报错2、其次搜索代码中是否有console.log等测试的代码3、检查所用的方法是否兼容ie以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!…

javascript闭包功能与用法实例分析

javascript闭包功能与用法实例分析

实例分析,闭包,功能,电脑软件,javascript,本文实例讲述了javascript闭包功能与用法。分享给大家供大家参考,具体如下:理解闭包闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化…

在Word2007中怎样设置默认表格样式

在Word2007中怎样设置默认表格样式

设置,默认,样式,表格,电脑软件,  默认情况下,在Word2007中插入的表格均默认使用普通样式。用户可以将表格样式库中最常用的表格样式作为默认样式,使新插入的表格都使用该样式。以下是小编为您带来的关于在Word2007中设置默认表格样式,希望对…

JQ文件上传之前预览功能的简单实例

JQ文件上传之前预览功能的简单实例

简单实例,分享,文件上传,功能,电脑软件,1、先准备一个divonchange触发事件<input type="file" onchange="preview(this)" ></span><div id="preview"></div>2、写JS代码//上传图片之前预览图片function preview(file){if (file.files…

在Word2007文档中怎么设置剪贴画棱

在Word2007文档中怎么设置剪贴画棱

文档,设置,效果,剪贴画,电脑软件,  在Word2007文档中,用户可以为剪贴画设置棱台效果,从而实现剪贴画的多种立体化效果,例如棱纹、斜面、凸起等棱台效果。以下是小编为您带来的关于在Word2007文档中设置剪贴画棱台效果,希望对您有所帮助。在Wo…

ES6中Array.find | 和findIndex |

ES6中Array.find | 和findIndex |

函数,详解,电脑软件,Array,findIndex,ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。他们的都是一个查找…

js字符限制 | 字符截取 一个中文汉

js字符限制 | 字符截取 一个中文汉

字符,字符截取,中文,汉字,两个,html<input type="text" id="txt">核心js代码//字符串截取function getByteVal(val, max) {var returnValue = '';var byteValLen = 0;for (var i = 0; i < val.length; i++) {if (val[i].match(/[^\x…