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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP图片水印类的封装
2017/07/06 PHP
php实现的生成排列算法示例
2019/07/25 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
基于python绘制科赫雪花
2018/06/22 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
个人简历自我鉴定
2013/10/11 职场文书
幼儿园老师寄语
2014/04/03 职场文书
三八妇女节活动总结
2014/05/04 职场文书
法人委托书范本
2014/09/15 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android