javascript 闭包详解


Posted in Javascript onFebruary 15, 2015

javascript 闭包是一个很有趣的东东。看了些相关资料https://3water.com/article/29472.htm,对其印象最深刻的是:实现了public 和private。

创建一个非匿名闭包最简单的语法是:

var obj = (function(){//各种代码  });

闭包最经典的例子:

var makeCounter = (function () {

        var i = 1; 

        this.test=function(){ 

            console.log(i);

            i++; 

        }

        return this;

    });

    var obj = makeCounter();

    obj.test(); // 1

    obj.test(); // 2

    var obj1 = makeCounter();

    obj1.test(); // 1

    obj1.test(); // 2

private 与 public :

var makeCounter= (function () {

        var i = 1;

        //这货是private的

        function log(){

            console.log(i);

            i++;

        }

        //这货是public的

        this.test(){

            log();

        }

        return this;

    });

    var obj = makeCounter();

    obj.test(); // 1

    obj.test(); // 2 

    obj.log(); //undefined   

自执行函数:

第一次看到这样的代码时的感觉是:好高级;

var obj = (function(window){

      //各种代码

}(window));

然后google了下,发现他们经常都会这样写:

var obj= (function () {

        var i = 1; 

        this.test=function(){ 

            console.log(i);

            i++; 

        }

        return this;

    }());

    obj.test(); // 1

    obj.test(); // 2

     最简单的理解,程序员偷懒把两步写成了一步。

    //这是一个函数。它应该这样用obj()

    var makeCounter = function () {

        //各种代码 

    }

    //这是一个对象。它类似于 var obj = makeCounter();

    var obj = (function () {

        //各种代码

    }());

它也可以有参数:

    var output = "new test";

    var obj = (function (msg) {

        this.test = function(){

            console.log(msg);

        }

        return this;

    }(output));

    obj.test();

它还可以更复杂更高级点:

var output = "new test";

    var obj = (function (obj, msg) {

        //这货也是私有的。类似obj.i(!=obj.i),却又不是obj.i(因为外部不可访问)。

        var i = 1;

        //private

        function log() {

            console.log(i + " : " + msg);

            i++;

        }

        //public

        obj.test = function () {

            log();

        }

        return obj;

    }(obj, output));

    obj.test(); // 1 : new test

    obj.i = 100;

    //i没被改变

    obj.test(); // 2 : new test

初次见面,留下了很深刻的印象。闭包的使用,实现了状态,属性的保持;避免了全局变量满屏飞舞;结束了变量老是被重定义,重赋值的尴尬局面。它还可以将一个对象分部到多个js文件。实在是太好了。

上面所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 #Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 #Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 #Javascript
浅谈javascript中this在事件中的应用
Feb 15 #Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 #Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 #Javascript
Linux下编译安装php libevent扩展实例
Feb 14 #Javascript
You might like
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python collections模块的使用方法
2020/10/09 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
局域网标准
2016/09/10 面试题
外科实习自我鉴定
2013/10/06 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
副处级干部考察材料
2014/05/17 职场文书
教师暑期培训感言
2014/08/15 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python