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 相关文章推荐
html下载本地
Jun 19 Javascript
关于js类的定义
Jun 28 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
jquery事件与绑定事件
Mar 16 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
Vue的Options用法说明
Aug 14 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js跳转页面方法总结
2014/01/29 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
python交互式图形编程实例(二)
2017/11/17 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
初中生散播谣言检讨书
2014/11/17 职场文书
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
windows系统搭建WEB服务器详细教程
2022/08/05 Servers