首页 > 技术文章 > JS面向对象之闭包

liu666 2016-08-07 23:09 原文

闭包

闭包的概念

  • 闭包的含义就是闭合,简单来说就是一个具有封闭功能的结构
  • 闭包就是具有封闭的对外不公开的,包裹结构或空间

在 js 中的闭包

  • 在 js 中函数可以构成闭包
  • 函数是一个代码结构的封闭结构,具有包裹特性
  • 根据作用域规则, 只允许函数访问外部数据, 外部无法访问函数内部数据
  • 所以说函数具有封闭的, 不公开的特效, 所以可以构成闭包

闭包解决什么问题

  1. 闭包不允许外界访问
  2. 外界间接访问闭包中的数据
    • 函数可以构成闭包, 解决的问题就是函数外访问到函数内部的数据

得到一个数据

    function foo(){
        var num = 123;
        return num;
    }
    var result = foo();
    console.log(result);
}
  1. 外部可以访问到函数内的数据
  2. 但是数据不能进行二次访问, 如果再试访问函数内部数据需要再次调用函数, 虽然得到的移入是num = 123, 但是实际不是第一次函数调用的那个值

得到一个函数, 通过函数访问数据

  • 在函数内的数据, 不能直接被函数外访问,如果函数内再定义一个函数, 那么函数内部数据可以被函数外访问
    function foo(){
        var num = Math.random();
        function fn(){
            return num;
        }
        return fn;
    }
    var f = foo();
    // f 可以直接访问这个数据 num
    var result1 = f();
    var result2 = f();
    // 得到结果一致,说明多次访问的是同一个数据

得到的数据可以是对象

    function foo(){
        var  o = {name : 'Bob'};
        return function(){
            return o;
        }
    }
    var fn = foo();
    var result = fn();

获得多个数据

    function foo(){
        var num1 = Math.random();
        var num2 = Math.random();
        return {
            num1 : function(){
                return num1;
            },
            num2 : function(){
                return num2;
            }
        }
    }

获得和修改这个数据

    function foo(){
        var num = Math.random();
        return {
            getNum : function(){
                return num;
            },
            setNum : function(value){
                num = value;
            }
        }
    }

闭包的基本结构

  1. 通过函数: 写一个函数, 函数内定义一个新函数, 返回新函数, 使用新函数得到函数内的数据
  2. 通过对象: 写一个函数, 函数内顶一个对象, 对象中绑定多个方法, 返回对象, 利用对象内的方法访问函数内中的数据

闭包的基本用法

  1. 带有私有访问数据的对象
    function Person(){
        this.name = 'Peter';
        // setName('')
    }
    // 私有数据指的是只有函数内部可以访问的数据,或者对象内部的方法

    // 简单的例子,判断孩子是不是老张家的
    function createPerson(){
        var name = '张全蛋';
        return {
            getName : function(){
                return name;
            },
            setName : function(value){
                // 如果value的第一个字符串是 张 ,就设置
                if(value.charAt(0) === '张'){
                    name = value;
                } esle {
                    //不姓 张 ,就将错误抛出
                    throw new Error('你不姓张,难道还能姓王?');
                }
            }
        }
    }
  1. 带有私有数据的函数
    // 不具有私有数据
    var fn = function(){};
    function fn(){}

    // 具有私有数据
    var foo = (function(){
        // 私有数据
        return function(){
            // 可以访问私有数据
        }
    })();

闭包的基本模型

函数模型

function foo(){
    // 私有数据
    return function(){
        // 可以访问上面的私有数据
    }
}

对象模型

function foo(){
    // 私有数据
    return {
        method : function(){
            // 可以访问的私有数据
        }
    }
}

闭包的性能问题

  • 函数的执行需要内存, 函数中定义的变量会在函数执行后自动回收
  • 因为是闭包结构, 如果还有变量引用这些数据的话, 这些数据不会被回收
  • 因此在使用闭包的时候,如果不使用这些数据了, 需要将函数赋值为 null
    var foo = (function(){
        var num = 123;
        return function(){
            return num;
        }
    })();
    // 如果不需要foo中的数据, 赋值为 null
    foo = null;

推荐阅读