JavaScript基础篇(6)之函数表达式闭包


Posted in Javascript onDecember 11, 2015

 其实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() { }; 如图:

JavaScript基础篇(6)之函数表达式闭包 

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

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

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

JavaScript基础篇(6)之函数表达式闭包 

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

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 ;

图解:(不了解作用域链的同学请先看前面的文章 作用域和作用域链 )

JavaScript基础篇(6)之函数表达式闭包 

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

如:(即,没有名字的函数)

JavaScript基础篇(6)之函数表达式闭包 

关于对象中函数的返回值是匿名函数时,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)之函数表达式闭包,希望大家喜欢。

Javascript 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
轮播图组件js代码
Aug 08 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
js禁止表单重复提交
Aug 29 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 #Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python版飞机大战代码分享
2018/11/20 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
施工人员岗位职责
2013/12/12 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
质量承诺书范文
2014/03/27 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
机器人瓦力观后感
2015/06/12 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server