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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php英文单词统计器
2016/06/23 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
Python缩进和冒号详解
2016/06/01 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Java面试题及答案
2012/09/08 面试题
几道数据库的概念性面试题
2014/05/30 面试题
车祸赔偿收入证明
2014/01/09 职场文书
师德师风个人整改措施
2014/10/27 职场文书