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实现关闭js弹出层的窗口
Feb 10 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
javascript中数组方法汇总
Jul 07 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
vue中axios封装使用的完整教程
Mar 03 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实现单链表的实例代码
2013/03/22 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
javascript 闭包
2011/09/15 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
python获取图片颜色信息的方法
2015/03/18 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
电子商务专业学生职业生涯规划
2014/03/07 职场文书
劳资员岗位职责
2015/02/13 职场文书
详解Vue router路由
2021/11/20 Vue.js
React四级菜单的实现
2022/04/08 Javascript