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 相关文章推荐
javascript中的new使用
Mar 20 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 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函数)
2006/10/09 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php计算税后工资的方法
2015/07/28 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery.each使用详解
2015/07/07 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
js实现随机点名功能
2020/12/23 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python NumPy库安装使用笔记
2015/05/18 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
文明餐桌行动实施方案
2014/02/19 职场文书
实习推荐信
2014/05/10 职场文书
大学生工作自荐书
2014/06/16 职场文书
2014年调度员工作总结
2014/11/19 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
java多态注意项小结
2021/10/16 Java/Android