JavaScript闭包实例讲解


Posted in Javascript onApril 22, 2014

这带来的好处是内部函数可以访问定义它们的外部函数的参数和变量。

首先,我们来构造一个简单的对象。

var testObj = {
    value: 10,
    add: function(inc){
        this.value += (typeof inc === "number") ? inc : 1;
    }
};
testObj.add();
testObj.value; // 11
testObj.add(2);    
testObj.value; // 13

这样写就有一个问题,value值不能保证不会被非法修改,可以按如下的方法进行修改。
var testObj = (function(){
    var value = 10;
    return {
        add: function(inc){
            value += (typeof inc === "number") ? inc : 1;
        },
        getValue: function(){
            return value;
        }
    };
})();
testObj.add();
testObj.getValue(); // 11
testObj.add(2);
testObj.getValue(); // 13

我们可以通用调用一个函数的形式去初始化testObj,该函数会返回一个对象字面量,函数里定义了一个value变量,该变量对add和getValue方法总是可用的,但函数的作用域使得它对其他的程序来说是不可见的。同时,我们还可以得出一个结论,内部函数拥有比它的外部函数更长的生命周期。

我们再继续看一个构造函数调用的例子。

var MyObj = function(str){
    this.status = str;
};
MyObj.prototype.getStatus = function(){
    return this.status;
};
var obj = new MyObj("javascript");
obj.getStatus(); // "javascript"

这样写并没有错,但是会有一点“多此一举”,为什么要用一个getStatus方法去访问一个本可以直接访问到的属性呢?如果status是私有属性,那当然才有意义。
var obj = function(status){
    return {
        getStatus: function(){
            return status;
        }
    };
};
var myObj = obj("javascript");
myObj.getStatus(); // "javascript"

这里当我们调用obj的时候,它返回包含getStatus方法的一个新对象,该对象的一个引用保存在myObj中,即使obj已经返回了,但getStatus方法仍然享有访问obj对象的status属性的特权。getStatus方法并不是访问该参数的一个副本,它访问的就是该参数本身。这是可能的,因为该函数可以访问它被创建时所处的上下文环境,这被称为闭包。
Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
jQuery实现评论模块
Aug 19 jQuery
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
JavaScript函数的4种调用方法详解
Apr 22 #Javascript
JavaScript实现存储HTML字符串示例
Apr 21 #Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 #Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 #Javascript
jquery form 加载数据示例
Apr 21 #Javascript
三种方式获取XMLHttpRequest对象
Apr 21 #Javascript
JavaScript中的Math 使用介绍
Apr 21 #Javascript
You might like
PHP下对字符串的递增运算代码
2010/08/21 PHP
php编写一个简单的路由类
2011/04/13 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
详解python中的模块及包导入
2019/08/30 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
什么是lambda函数
2013/09/17 面试题
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
通知怎么写?
2019/04/17 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Django框架模板用法详解
2022/06/10 Python