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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
React复制到剪贴板的示例代码
Aug 22 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
jQuery live
2009/05/15 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python引用DLL文件的方法
2015/05/11 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python对列表的操作知识点详解
2019/08/20 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
在python shell中运行python文件的实现
2019/12/21 Python
Django用户身份验证完成示例代码
2020/04/03 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
管理部副部长岗位职责范文
2014/03/09 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
服务理念口号
2014/06/11 职场文书
见习报告的格式
2014/10/31 职场文书
小学德育工作总结2015
2015/05/12 职场文书
队列队形口号
2015/12/25 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python