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(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript File分段上传
Mar 10 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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语法(2)
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
Linux下多个Python版本安装教程
2018/08/15 Python
在python里面运用多继承方法详解
2019/07/01 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
Python try except else使用详解
2021/01/12 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
蜜蜂引路教学反思
2014/02/04 职场文书
精彩的广告词
2014/03/19 职场文书
学校党员干部承诺书
2015/05/04 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
Python面向对象之成员相关知识总结
2021/06/24 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript