JavaScript中的闭包介绍


Posted in Javascript onMarch 15, 2015

所谓的闭包应该是指: 内部函数读取当前函数以外的变量,即创建时所处的上下文环境。

function hello(){

    var char = "hello,world";

    function print(){

        console.log(char);

    };

    return print();

}

需要注意的是这里的print函数引用了外部hello函数的char变量,于是在这里我们能够返回一个
hello,world

而这个功能在某种意义上来说,应该是要归功于作用域。当然了,我们没有办法直接访问char,除非是我们声明这个变量的时候出错了。如
function hello(){

    char = "hello,world";

    function print(){

        console.log(char);

    };

    return print();

}

仅仅是因为少了个var。
在这里hello变成一个闭包 了。 闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

Javscript 闭包与this

需要注意的是读取this与arguments时,可能是会出问题的。

function hello(){

    this.char = "hello,world";

    function output(){

        char = "I'm no hello world";       

        console.log(this.char);

    };

    return output();

}

当然了这个例子并不够贴切,so,我们需要一个额外的例子来解释这个问题,下面引用一个《Javascript高级程序设计》中的一个例子,来说明这个问题。
var name = "The window";
var object = {

    name: "My Object",
    getNameFunc: function(){

        return function(){

            return this.name;

        }

    }

};

object.getNameFunc()()

只是这种用法实在是,而解决方法便是保存一个临时变量that,如之前在《关于Javascript的this的一些知识》一文中所说的。
var name = "The window";

var object = {

    name: "My Object",
    getNameFunc: function(){

        var that = this;

        return function(){

            return that.name;

        }

    }

};

object.getNameFunc()()

Javscript 闭包与读写变量
值得注意的是,如果我们没有处理好我们的变量时,我们也可以修改这些变量。
function hello(){

    var char = "hello,world";

    return{

        set: function(string){

            return char = string;

        },

        print: function(){

            console.log(char)

        }

    }

}

var say = hello();

say.set('new hello,world') 

say.print() // new hello world

Javascript 闭包与性能

引用MDC的说法

 如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。

文上还说到。
 例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。原因是这将导致每次构造器被调用,方法都会被重新赋值一次(也就是说,为每一个对象的创建)。
Javascript 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
js特殊字符转义介绍
Nov 05 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 #Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 #Javascript
Javascript中的apply()方法浅析
Mar 15 #Javascript
Javascript中的Callback方法浅析
Mar 15 #Javascript
Javascript中的call()方法介绍
Mar 15 #Javascript
Javascript中的高阶函数介绍
Mar 15 #Javascript
Javascript中this关键字的一些小知识
Mar 15 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
Promise扫盲贴
2019/06/24 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
python time()的实例用法
2020/11/03 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
零件设计自荐信范文
2013/11/27 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
整改报告怎么写
2014/11/06 职场文书
合作与交流自我评价
2015/03/09 职场文书
Python基础之元编程知识总结
2021/05/23 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
Spring中bean集合注入的方法详解
2022/07/07 Java/Android