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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
Bootstrap表单布局
Jul 19 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 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
谈谈新手如何学习PHP
2006/12/14 PHP
基于php-fpm的配置详解
2013/06/03 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python的unittest测试类代码实例
2017/12/07 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
详解Python3定时器任务代码
2019/09/23 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
聊聊python中的循环遍历
2020/09/07 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
工作自荐信
2013/12/11 职场文书
《忆江南》教学反思
2014/04/07 职场文书
促销活动总结范文
2014/04/30 职场文书
重点工程汇报材料
2014/08/27 职场文书
主持人大赛开场白
2015/05/29 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
关于Vue中的options选项
2022/03/22 Vue.js