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 相关文章推荐
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
详解JavaScript中return的用法
May 08 Javascript
搭建vue开发环境
Jul 19 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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读写文件的方法(生成HTML)
2006/11/27 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP 正则表达式小结
2015/02/12 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
深入理解移动前端开发之viewport
2018/10/19 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python多进程间通信代码实例
2019/09/30 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
国际贸易专业自荐信
2014/06/10 职场文书
医院合作协议书
2014/08/19 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书