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 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
深入理解(function(){... })();
Aug 16 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
详解vue中axios的封装
Jul 18 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
解析link_mysql的php版
2013/06/30 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
js 表格隔行颜色
2009/12/02 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python开发之文件操作用法实例
2015/11/13 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python调用java的jar包方法
2018/12/15 Python
python装饰器常见使用方法分析
2019/06/26 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
医院护士求职自荐信格式
2013/09/21 职场文书
人事档案接收函
2014/01/12 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
电影建国大业观后感
2015/06/01 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android