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 相关文章推荐
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
node.js使用fs读取文件出错的解决方案
Oct 23 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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP中“=>
2019/03/01 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
微信跳一跳自动运行python脚本
2018/01/08 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
税务干部个人整改措施思想汇报
2014/10/10 职场文书
南京南京观后感
2015/06/02 职场文书