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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
国内咖啡文化
2021/03/03 咖啡文化
php中数据的批量导入(csv文件)
2006/10/09 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python3解释器知识点总结
2019/02/19 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
《尊严》教学反思
2014/02/11 职场文书
电子商务专业求职信
2014/03/08 职场文书
2014年三万活动总结
2014/04/26 职场文书
财务整改报告范文
2014/11/05 职场文书
颐和园导游词
2015/01/30 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js