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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
javascript中的继承实例代码
Apr 27 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
Html5生成验证码的示例代码
May 10 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
写求职信要注意什么问题
2014/04/12 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
社区服务活动感想
2015/08/11 职场文书
简短清晨问候语
2015/11/10 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android