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 Tab选项卡效果代码改进版
Apr 01 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
vue实现移动端div拖动效果
Mar 03 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
PHP has encountered an Access Violation
2007/01/15 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
JavaScript实现下拉列表
2021/01/20 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python实现针对中文排序的方法
2017/05/09 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
如何利用Python 进行边缘检测
2020/10/14 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
卫校毕业生自我鉴定
2014/09/28 职场文书
2015年党员承诺书
2015/01/21 职场文书
英语辞职信范文
2015/02/28 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP