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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
React组件生命周期详解
Jul 03 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
javascript canvas实现雨滴效果
Jun 09 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
西德产收音机
2021/03/01 无线电
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
原生js实现随机点名
2020/07/05 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
介绍信怎么写
2015/05/05 职场文书
保姆聘用合同
2015/09/21 职场文书
python文件目录操作之os模块
2021/05/08 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python