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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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简单静态页生成过程
2008/03/27 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
Angularjs 基础入门
2014/12/26 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
详解VueJs中的V-bind指令
2018/05/03 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python日期的加减等操作的示例
2017/08/15 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
前处理班长职位说明书
2014/03/01 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
小组口号大全
2014/06/09 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
答谢词范文
2015/01/05 职场文书
学校党员干部承诺书
2015/05/04 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS