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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python3 max()函数基础用法
2019/02/19 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
用django设置session过期时间的方法解析
2019/08/05 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
生产副总岗位职责
2013/11/28 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python