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 相关文章推荐
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
swiper实现导航滚动效果
Dec 13 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/15 PHP
yii数据库的查询方法
2015/12/28 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python对象体系深入分析
2014/10/28 Python
python中随机函数random用法实例
2015/04/30 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python requests模块实例用法
2019/02/11 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python编写打字训练小程序
2019/09/26 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
重阳节简报
2015/07/20 职场文书
Python如何配置环境变量详解
2021/05/18 Python
python脚本框架webpy的url映射详解
2021/11/20 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
Promise静态四兄弟实现示例详解
2022/07/07 Javascript