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的静态属性和原型属性
May 07 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
zTree树形插件异步加载方法详解
Jun 14 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Vue入门之数量加减运算操作示例
Dec 11 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
JS前端加密算法示例
2016/12/22 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python实现微信好友的数据分析
2019/12/16 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
男方父母证婚词
2014/01/12 职场文书
七年级生物教学反思
2014/01/30 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
贫困证明怎么写
2015/06/16 职场文书
人事任命书范本
2015/09/21 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL