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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
BootStrap中的表单大全
Sep 07 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 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之第七天
2006/10/09 PHP
使用php来实现网络服务
2009/09/15 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python实现字典的key和values的交换
2015/08/04 Python
详解python单例模式与metaclass
2016/01/15 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python sort、sort_index方法代码实例
2019/03/28 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python读取与处理netcdf数据方式
2020/02/14 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
方法名是否可以与构造器的名字相同
2012/06/04 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
神龙架导游词
2015/02/11 职场文书
房地产项目合作意向书
2015/05/08 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书