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 innerHTML 的一些问题的解决方法
Jun 22 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python多线程之事件Event的使用详解
2018/04/27 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
法律专业自我鉴定
2013/10/03 职场文书
实习鉴定评语
2014/01/19 职场文书
英文演讲稿
2014/05/15 职场文书
旅游节目策划方案
2014/05/26 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
教师工作总结范文2014
2014/11/10 职场文书
工程项目合作意向书
2015/05/08 职场文书
科级干部培训心得体会
2016/01/06 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
Python基本知识点总结
2022/04/07 Python