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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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实现文件下载更能介绍
2012/11/23 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue多次循环操作示例
2019/02/08 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
留学自荐信写作方法
2014/01/27 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
新品发布会主持词
2014/04/02 职场文书
五四青年节的活动方案
2014/08/20 职场文书
单位更名证明
2015/06/18 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
2016年小学生寒假总结
2015/10/10 职场文书