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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
详解vue路由
Aug 05 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
javascript的delete运算符知识点总结
2019/11/19 Javascript
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python属于哪种语言
2020/08/16 Python
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
三年级音乐教学反思
2014/01/28 职场文书
大学生励志演讲稿
2014/04/25 职场文书
个人安全生产承诺书
2014/05/22 职场文书
教师聘用意向书
2015/05/11 职场文书
常住证明范本
2015/06/23 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
Django与数据库交互的实现
2021/06/03 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
vue动态绑定style样式
2022/04/20 Vue.js