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 相关文章推荐
Cookie 小记
Apr 01 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
vue-ajax小封装实例
Sep 18 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
微信小程序实现弹出层效果
May 26 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
python中列表和元组的区别
2017/12/18 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
keras 读取多标签图像数据方式
2020/06/12 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
UDP协议功能
2013/01/06 面试题
企业面试题试卷附带答案
2015/12/20 面试题
JPA的优势都有哪些
2013/07/04 面试题
服务标兵事迹材料
2014/05/04 职场文书
法学自荐信
2014/06/20 职场文书
干部培训简讯
2015/07/20 职场文书
导游词之日本富士山
2020/01/06 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android