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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
document.designMode的功能与使用方法介绍
Nov 22 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
JavaScript函数IIFE使用详解
Oct 21 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持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
基于node实现websocket协议
2016/04/25 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
如何在vue中使用ts的示例代码
2018/02/28 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
如何基于Python按行合并两个txt
2020/11/03 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
信息管理专业推荐信
2013/10/29 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
初中生毕业评语
2014/12/29 职场文书
学困生转化工作总结
2015/08/13 职场文书
Python机器学习之基础概述
2021/05/19 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android