JavaScript基础篇（6）之函数表达式闭包

更新时间：2015年12月11日 11:20:02 投稿：mrr

这篇文章主要介绍了javascript基础篇（6）之函数表达式闭包的相关资料,需要的朋友可以参考下

其实js支持函数闭包的主要原因是因为js需要函数能够保存数据。这里的保存数据是只函数在运行结束以后函数内变量的值也会进行保存。至于为什么js需要在函数内可以保存数据，那就是js是一种函数式语言。在函数内保存数据是函数式语言的一大特征。

回顾前面介绍过的三种定义函数方式

functiosu(numnumreturnunum//函数声明语法定义
vasufunction(numnum)returnunum}//函数表达式定义
vasuneFunction("num""num""returnunum")//Functio构造函数

在分析闭包之前我们先来看看，定义和调用函数容易犯的错误。

例1：

sayHi(); //错误：函数还不存在
var sayHi = function () {
  alert("test");
};

例2：

if (true) {
  function sayHi() {
    alert("1");
  }
} else {
  function sayHi() {
    alert("2");
  }
}
sayHi();//打印结果并不是我们想要的

例3：

var fun1 = function fun2() {
  alert("test");
}
fun2();//错误：函数还不存在

在例1中，我们不能在使用函数声明式语法定义之前调用函数。解决方案：

1.如果使用函数表达式定义函数的话，需要在表达式定义后调用。

var sayHi = function () {
  alert("test");
};
sayHi()

2.使用函数声明式。（这里浏览器引擎会函数声明提升, 在所有代码执行之前先读取函数声明）

sayHi(); 
function sayHi () {
  alert("test");
};

在例2中，我们预期的结果应该是打印1，实际结果是打印2。

if (true) {
  function sayHi() {
   alert("1");
  }
  } else {
  function sayHi() {
   alert("2");
  }
}
sayHi();//打印结果并不是我们想要的

为什么会这样？正因为函数声明提升，所以浏览器在预解析的时候不会判断if条件，直接解析第二个函数定义的时候覆盖了第一个。

解决方案：

var sayHi;
if (true) {
  sayHi = function () {
   alert("1");
  }
  } else {
  sayHi = function () {
   alert("2");
  }
}
sayHi();

在例3中，发现只能只用fun1()调用，而不能使用fun2()调用。

我自己的理解，真正原因不知道。没找到资料。

因为1： function fun3() { }; 等效与 var fun3 = function fun3() { }; 如图：

所以只能只用fun1()调用，而不能使用fun2()调用。

其实这里我还是有疑问的？哪位大神知道，望告知。

既然，fun2在外面不能调用为什么在函数内部能调用？虽然在debugger还是得不到fun1。

好了，通过上面的三道题目热身。我们继续今天的主题“闭包”。

1.什么是闭包？

定义：就是有权访问另一个函数作用域的变量的函数

我们先从一个示例函数开始：

例1：

function fun() {
  var a = "张三";
}
fun();//在我们执行完后，变量a就被标记为销毁了

例2：

function fun() {
  var a = "张三";
  return function () {
    alert("test");
  }
}
var f = fun();//同样，在我们执行完后，变量a就被标记为销毁了

例3：

function fun() {
  var a = "张三";
  return function () {
    alert(a);
  }
}
var f = fun();//【现在情况发生变化了，如果a被销毁，显然f被调用的话就不能访问到变量a的值了】
f();//【然后变量a的值正常的被访问到了】
//这就是闭包，当函数A 返回的函数B 里面使用到了函数A的变量，那么函数B就使用了闭包。
示例：
function fun() {
  var a = "张三";
  return function () {
   alert(a);
  }
}
var f = fun();//【现在情况发生变化了，如果a被销毁，显然f被调用的话就不能访问到变量a的值了】
f();//【然后变量a的值正常的被访问到了】

显然，滥用闭包会增大内存的使用。所以非特殊情况尽量不要使用闭包。如果用到了，记得手动设置空引用，内存才能被回收 f = null ;

图解：（不了解作用域链的同学请先看前面的文章作用域和作用域链）

2.什么是匿名函数？ (仅仅只是解释这个概念)

如：（即，没有名字的函数）

关于对象中函数的返回值是匿名函数时，this的怪异现象

讲解之前，先清醒下头脑，不要越看越迷糊了。如果迷糊了，那就直接忽略下面的。

var name1 = "张三";
var obj = {
  name1: "李四",      
  fun2: function () {
    alert(this.name1);
  },
  fun3: function () {
    return function () {
      alert(this.name1);
    }
  }
}

obj.fun2();//打印结果"李四"意料之中的。
obj.fun3()();//因为这里返回的是一个函数，所以要再加一对()来调用。打印结果是"张三"，意料之外。
//真是百事不得其解啊，什么this指向了全局？
我们前面讲过“ 哪个对象点出来的方法，this就是哪个对象 ”，那我们的 obj.fun3()() 打印的是“张三”也就是说this执行了全局作用域。

我们看看下面的示例也许就知道为什么了。

var name1 = "张三";
var obj = {
  name1: "李四",      
  fun2: function () {
    alert(this.name1);
  },
  fun3: function () {
    return function () {
      alert(this.name1);
    }
  }
}    
//obj.fun3()();
var obj2 = {};
obj2.name1 = "test";
obj2.fun = obj.fun3();
obj2.fun();//打印结果"test",再次证明了“哪个对象点出来的方法，this就是哪个对象”.
var name1 = "张三";
var obj = {
  name1: "李四",
  fun2: function () {
   alert(this.name1);
  },
  fun3: function () {
    return function () {
     alert(this.name1);
    }
  }
}
//obj.fun3()();
var obj2 = {};
obj2.name1 = "test";
obj2.fun = obj.fun3();
obj2.fun();//打印结果"test",再次证明了“哪个对象点出来的方法，this就是哪个对象”.

我们来分解下 obj.fun3()() 先是 obj.fun3() 返回一个匿名函数到了window作用域，然后接着调用this就指向了window了。（感觉解释有点勉强，也不知道对不，暂时自己先是这么理解的）

闭包形成的原因：内存释放问题

一般，当函数执行完毕后，局部活动对象会被销毁，内存中仅保存全局作用域，但闭包的情况是不一样的。

闭包的活动对象依然会保存在内存中，于是像上例中，函数调用返回后，变量i是属于活动对象里面的，就是说其栈区还没有释放，但你调用c()的时候i变量保存的作用域链从b()->a()->全局去寻找作用域var i声明所在，然后找到了var i=1;然后在闭包内++i;结果，最后输出的值就是2了；

以上所述是小编给大家分享的JavaScript基础篇（6）之函数表达式闭包，希望大家喜欢。

您可能感兴趣的文章:

纯JS实现轮播图
这几天一直在看js动画，今天又get到了一个轮播图，使用纯js实现的，但是外观样式不是很好看，如果大家有需要可以美化下，具体实现代码还是很完整的，大家可以参考下
2017-02-02
不使用XMLHttpRequest实现异步加载 Iframe和script
运用Iframe和script可以实现简单的异步加载,没有使用XMLHttpRequest，需要的朋友可以参考下
2012-10-10
写的htc的数据表格
写的htc的数据表格...
2007-01-01
Javascript变量作用域详解
这篇文章主要是对Javascript变量作用域进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
javascript 动态创建表格的2种方法总结
本文给大家总结了2种使用javascript动态创建表格的方法，非常简单实用，小伙伴们自己对比下看看哪种更适合你呢，一般本人是使用第一种的。
2015-03-03
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解
这篇文章主要介绍了bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路的相关资料,需要的朋友可以参考下
2016-09-09
video.js使用改变ui过程
这篇文章主要介绍了video.js使用改变ui的过程，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
JavaScript中的await函数使用小结
async 函数是 AsyncFunction 构造函数的实例,并且其中允许使用 await 关键字,async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为,而无需刻意地链式调用 promise,这篇文章主要介绍了JavaScript中的await,需要的朋友可以参考下
2024-01-01
html文本框提示效果的示例代码
在html文本框中显示提示效果，以方便用户的输入，比如在输入姓名时，会自动提示姓名长度最多16个字符，是不是很酷哦。快来看看吧
2014-06-06
详解js删除数组中的指定元素
在本篇文章中我们给大家分享了js删除数组中的指定元素的详实示例方法，有需要的朋友们学习下
2018-10-10

JavaScript基础篇（6）之函数表达式闭包

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具