理解JAVASCRIPT 闭包
最近去面试了一家企业,结果非常灰心丧气,于是周末给自己定了一个目标
学好一门,学精通一门。不求多,只求懂。
最近看到一个概念“闭包”。
什么是闭包呢?
简单一点就是:看得到多和看得到少的区别。
上面这句话是我自己总结的,或许不太准确。
你能看到的多少这句话该如何理解呢?
下面随便丢一段代码:
var name="Peter";
function outer()
{
var name="Tom";
function inner()
{
return this.name;
}
return inner; //返回函数inner,作为OUTER的一个返回值
}
var flag=outer();
alert(flag()); //Peter
大家也许会比较的疑惑,为什么返回的是Peter而不是Tom?
是不是认为编程的就近原则?
答案是:你还没有很好的理解闭包。
下面的一张图可以帮助大家理解一下,定义了一个flag对象,然后公共的函数是inner的父函数outer,
其实执行的是inner函数,因为outer函数返回对INNER函数的一个引用。
然后alert就是执行这个函数inner了。

我们要理解为什么是Peter而不是Tom,还需要了解一下闭包的作用域链。
那么,什么是作用域链呢?
看下面的代码;
function num()
{
var number=0; //结果为4
//number=0; //结果为1 number++;
}
var number=4;
num(); alert(number);
如果运行上述代码,在function内加var 和不加var的区别是很大的。
这就是文章下面要提到的JAVASCRIPT链式结构;
如果不声明var,那就表示这是一个全局变量,记住这一点概念很重要。
而在函数内部加了var以后,试想一下,外面的这个number和里面的number就没有任何的关系了,
所以最后的结果是4,是全部的number起作用。
如果没加var关键字,那么number就是属于window下的,默认this指向window(this.number),
外层的var=4会被自动替换成1.
如果想alert的值为4,只有一个办法,把
var number=4;
num();
的顺序替换一下^_^。
闭包的特性之一,就是可以在函数外部通过对象调用到函数内部的局部变量。
就好像是C#中,私有的变量,必须通过getter,setter方法来进行调用一样。
说白了,闭包,就是和上面说的可以类比。
再回到上面的问题,为什么name是window的而非function内部的局部变量的呢?
大家有没有发现 var flag=outer()这句话。
其实flag对象是指向window的。
而这个outer函数其实是返回了一个inner的引用。
所以,inner里的this.name(等同于outer().name)也被变成了一个window对象的引用。
所以,闭包不仅可以在外面访问函数内部的变量,
还可以改变内部变量的值,所以这一点大家要注意了,
非常危险的!慎用闭包。
比如下面的代码
name="Peter";
var obj={
name:"yang",
innerFunc:function()
{
return function()
{
return this.name;
}
}
}
alert(obj.innerFunc()()); //Peter
通过外面可以改变里面局部变量的值,让其指向全局变量。
所以这就相当于形成了一个setter方法。
大家使用闭包的时候一定要小心啊。
另外最后再补充一下:
JAVASCRIPT的链式原理:
1.内部函数B形式参数,实际参数,函数,内部变量。
2.内部函数B的原型prototype
3.外部函数A的形式参数,实际参数,函数,内部变量。
4.WINDOW对象,活动对象(链式的顶端)
另外还有一点要注意,就是在闭包的时候,因为外部可以调用到内部函数的变量,并且是Writable的,所以内部
函数变量是一个“可持久的”,就是可以不受JAVASCRIPT的垃圾回收机制的影响。
而内部函数的变量根据链式原理对于外部的变量也是可持久的,这就造成了内,外的变量都具有可持久性,
这就形成了闭包,不过造成了这些变量越积越多,在内存中,从而影响程序的效率。
这个时候,就要在函数调用结束后删掉一些不必要的变量,否则严重的会造成内存泄漏。
好了,写完了,话说那个人问我怎么写JQUERY的分页,我没答出来,好好努力吧
O(∩_∩)O哈哈~
祝大家周末愉快,我是新手,有写得不合理的地方,请多多指正。
理解JAVASCRIPT 闭包的更多相关文章
- 我从来不理解JavaScript闭包,直到有人这样向我解释它...
摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...
- 深入理解JavaScript闭包【译】
在<高级程序设计>中,对于闭包一直没有很好的解释,在stackoverflow上翻出了一篇很老的<JavaScript closure for dummies>(2016)~ ...
- 【转】深入理解JavaScript闭包闭包(closure) (closure)
一.什么是闭包?"官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述 ...
- 全面理解Javascript闭包和闭包的几种写法及用途
好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途. 一.什么 ...
- 深入理解JavaScript闭包(closure)
最近在网上查阅了不少javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...
- 深入理解javascript闭包(一)
闭包(closure)是Javascript语言的一个难点.也是它的特色,非常多高级应用都要依靠闭包实现. 一.什么是闭包? 官方"的解释是:闭包是一个拥有很多变量和绑定了这些变量的环境的表 ...
- 深入理解javascript闭包(一)
原文转自脚本之家(http://www.jb51.net/article/24101.htm) 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
- 深入理解Javascript闭包概念
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部能够直接读取全局变量 ...
- 轻松理解JavaScript闭包
摘要 闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包 一.什么是闭包? 闭包就是可以访问另一个函数作用域中变量的函数. 下面列举出常见的闭包实现方式,以例子讲解闭包概念 ...
- 【译】理解JavaScript闭包——新手指南
闭包是JavaScript中一个基本的概念,每个JavaScript开发者都应该知道和理解的.然而,很多新手JavaScript开发者对这个概念还是很困惑的. 正确理解闭包可以帮助你写出更好.更高效. ...
随机推荐
- .NET开源OpenID和OAuth解决方案Thinktecture IdentityServer
现代的应用程序看起来像这样: 典型的交互操作包括: 浏览器与 web 应用程序进行通信 Web 应用程序与 web Api (有时是在他们自己的有时代表用户) 通信 基于浏览器的应用程序与 web A ...
- ABP理论学习之Swagger UI集成
返回总目录 本篇目录 介绍 安装 安装Nuget包 配置 测试 介绍 从官方网站上可以看到:"启用了Swagger API,就可以获得交互式文档,生成和发现客户端SDK". 安装 ...
- java中文乱码解决之道(二)-----字符编码详解:基础知识 + ASCII + GB**
在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...
- 在C#代码中应用Log4Net(五)将Log4Net正确地封装在自己的类库中并进行调用
前面的几篇文章已经比较完整地解释了怎么使用Log4Net,但是我们可能需要将Log4Net的日志类封装在自己的类库中,以便C/S或B/S程序进行调用.下面的示例程序简单地分为两层,一个是应用程序层We ...
- 人生苦短,我用python——当我在玩python的时候我玩些什么
文章背景 家里的第一台电脑是在2006年夏天买的,10年上大学之后基本上就没人用,过没两年就当二手卖给一个熟人. 弟弟小我10岁,今年刚上初一.他在我毕业前半年就整天用妈妈的手机发短信给我,问我什么时 ...
- [ASP.NET MVC 小牛之路]18 - Web API
Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建Web服务为HTTP客户端提供API.Web API 使用的基础库是和一般的MVC框架一样的,但Web API并不是MVC框架的 ...
- TODO:关于自媒体博客改名
TODO:关于自媒体博客改名 1.微信公众号:ludong86 个人类帐号一个自然年内可主动修改两次名称 2.企鹅号 不能改帐号名称 3.简书 名称可以随意修改,但是个人主页是系统自动生成的. 4.今 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (24) ------ 第五章 加载实体和导航属性之查询内存对象
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-4 查询内存对象 问题 你想使用模型中的实体对象,如果他们已经加载到上下文中, ...
- Elasticsearch5.0 安装问题集锦
使用Elasticsearch5.0 必须安装jdk1.8 [elsearch@vm-mysteel-dc-search01 bin]$ java -version java version &quo ...
- Dynatree使用
最近用到了Dynatree的树形结构,记录一下它的用法. 需求: 1.jquery.js 2.jquery-ui.custom.js 3.jquery.cookie.js 下载dynatree,放到资 ...