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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
JS简单随机数生成方法
Sep 05 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
JS随机密码生成算法
Sep 23 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JavaScript实现轮播图特效
Apr 10 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 PDO中文乱码解决办法
2009/07/20 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
AngularJS语法详解
2015/01/23 Javascript
javascript截取字符串小结
2015/04/28 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
JS中的多态实例详解
2017/10/15 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Python爬虫开发与项目实战
2020/12/16 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
优秀员工推荐材料
2014/12/20 职场文书
2014年个人年终总结
2015/03/09 职场文书
国博复兴之路观后感
2015/06/02 职场文书
勇敢的心观后感
2015/06/09 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript