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 动态添加表格行
Jun 22 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
React + webpack 环境配置的方法步骤
Sep 07 Javascript
Angular移动端页面input无法输入的解决方法
Nov 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
php下过滤HTML代码的函数
2007/12/10 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
PHP Class&Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP函数积累总结
2019/03/19 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
重命名批处理python脚本
2013/04/05 Python
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
保护母亲河倡议书
2014/04/14 职场文书
创先争优承诺书
2015/01/20 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Nginx报404错误的详细解决方法
2022/07/23 Servers