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> 

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

(0)

相关推荐

  • js中匿名函数的N种写法

    匿名函数没有实际名字,也没有指针,怎么执行滴? 其实大家可以看看小括号的意义就应该可以理解.小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值,不难理解 (function(){})()可以将没有名字的函数执行了把- 关于匿名函数写法,很发散~ 最常见的用法: 复制代码 代码如下: (function() { alert('water'); })(); 当然也可以带参数: 复制代码 代码如下: (function(o) { alert

  • JavaScript闭包 懂不懂由你反正我是懂了

    越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释,当我看到stackoverflow上这一篇解答,我脑中就出现了一句话:就是这货没跑了! 不才译文见下,见笑了. Peter Mortensen问: 就像老Albert所说的,"如果你不能向一个六岁的孩子解释清楚,那么其实你自己根本就没弄懂."好吧,我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了. 你们会怎么把它解释给一个充满好奇

  • 前端开发必须知道的JS之闭包及应用

    在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教.一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行环境中执行,如读写局部变量.函数参数.运行内部逻辑.创建执行环境的过程包含了创建函数的作用域,函数也是在

  • javascript 匿名函数的理解(透彻版)

    复制代码 代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的第一眼,我就迷糊了.为什么只有一个匿 名函数又没看到运行(当然是运行了--),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN.结果相信现在很多人都很清楚了(因为在我之 后也不乏来者,呵呵~).当一个匿名函数被括起来,然后

  • js的匿名函数使用介绍

    1.匿名函数概述 关于匿名函数的第一次认识还是在jquery源码里,打开jQuery首先看到的是 复制代码 代码如下: (function( window, undefined ) {.......................})(window); 这就是一个匿名函数,红色为参数,匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法. 既然不能访问,那怎么能调用jquery?这是因为jquery的匿名函数有这样两句话(蓝色字): 复制代码 代码如下: (function( win

  • js bind 函数 使用闭包保存执行上下文

    复制代码 代码如下: window.name = "the window object" function scopeTest() { return this.name; } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: fu

  • JavaScript 匿名函数(anonymous function)与闭包(closure)

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

  • js中匿名函数的创建与调用方法分析

    本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

  • 详谈JavaScript 匿名函数及闭包

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 复制代码 代码如下: function double(x){     return 2 * x;   } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. 复制代码 代码如下: var double = new Functio

随机推荐