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 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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
星际争霸任务指南——人族
2020/03/04 星际争霸
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
机关作风建设自查报告
2014/10/22 职场文书
同事打架检讨书
2015/05/06 职场文书
盗窃案辩护词
2015/05/21 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
初一军训感言
2015/08/01 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS