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 CSS修改学习第一章 查找位置
Feb 19 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
解读ES6中class关键字
Nov 20 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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模拟js函数unescape的函数代码
2012/10/20 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
详解redux异步操作实践
2018/08/15 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python Socket编程详细介绍
2017/03/23 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python编写计算器功能
2019/10/25 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
师生聚会感言
2014/01/26 职场文书
项目合作意向书模板
2014/07/29 职场文书
感谢信模板大全
2015/01/23 职场文书
详解Django的MVT设计模式
2021/04/29 Python
python和anaconda的区别
2022/05/06 Python