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 onmouseout 解决办法
Jul 17 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
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如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
详解html-webpack-plugin用法全解
2018/01/22 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python写日志文件操作类与应用示例
2019/07/01 Python
django如何实现视图重定向
2019/07/24 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python字典key不能是可以是啥类型
2020/08/04 Python
python 实现IP子网计算
2021/02/18 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
企业理念标语
2014/06/09 职场文书
庆六一开幕词
2015/01/29 职场文书
保姆聘用合同
2015/09/21 职场文书
实习报告怎么写
2019/06/20 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL