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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
Nuxt.js踩坑总结分享
Jan 18 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
详解vue中v-for的key唯一性
May 15 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
最短的IE判断代码
2011/03/13 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
innerText 使用示例
2014/01/23 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python实现class对象转换成json/字典的方法
2016/03/11 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
详解Python locals()的陷阱
2019/03/26 Python
Django使用rest_framework写出API
2020/05/21 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
学校国庆节活动总结
2015/03/23 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
python如何利用traceback获取详细的异常信息
2021/06/05 Python