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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 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获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python学生成绩管理系统简洁版
2020/04/05 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
总经理职责范文
2013/11/08 职场文书
七年级历史教学反思
2014/02/05 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
电子信息工程自荐信
2014/05/26 职场文书
反腐倡廉标语
2014/06/24 职场文书
家长会欢迎词
2015/01/23 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL