美文网首页
Javascript闭包初级入门

Javascript闭包初级入门

作者: zhCN_超 | 来源:发表于2017-07-13 17:02 被阅读6次

    2017/03/13

    前言

    closure(闭包)是Javascript这门动态语言很难的部分,但在项目中实用性很强,并且在高阶函数中运用很多。

    闭包

    我总结的闭包特性:

    闭包是函数
    函数可嵌套,闭包一定是一个作用域内的一个函数
    闭包能保持住外部作用域的变量不被销毁

    涉及的概念:函数作用域内存回收,请自行查阅书籍。不多说,直接上例子。

    例1

    var a = 10;
    function fn(){
        console.log(a);
    }
    fn();
    // 最简单的例子
    // 全局环境定义变量 a
    // 闭包 fn 为全局作用域内的一个函数,函数内部保持着外部变量 a 不被内存回收
    

    例2

    function foo(){
        var a = 1;
        return function(){
            console.log(a++);
        }
    }
    var fn = foo();
    fn();
    // 函数 foo 作用域内有变量 a 和一个匿名函数,也就是这段程序中的闭包
    // 程序第 7 行, 变量 fn 为闭包的引用
    // 反复执行 fn ,则会在控制台看到从 1 开始不停的累加,闭包让外部的变量 a 不被销毁
    

    例3

    我们来看一段闭包在项目中的应用,即单例模式

    // 单例模式
    var getSingle = function(fn){
      var ret;
      return function(){
        return ret || (ret = fn.apply(this, arguments));
      }
    };
    
    // 页面只需要一个 div 来呈现弹出框
    var getDialog = getSingle(function(){
      return document.createElement('div');
    });
    
    var obj1 = getDialog();
    var obj2 = getDialog();
    console.log(obj1 === obj2); // true
    // 不管 getDialog 在这段程序之后执行多少次,赋值给多少其他变量,这些变量全部都是同一个 div 对象
    
    

    更多

    更多关于闭包的理解,请点击下载国外友人的PPT

    相关文章

      网友评论

          本文标题:Javascript闭包初级入门

          本文链接:https://www.haomeiwen.com/subject/pkxghxtx.html