闭包

闭包的定义：在函数中创建子函数，并且子函数中调用了函数中的变量。称之为闭包

闭包和普通函数的区别是：

• 多了一层外部函数的作用域链
• 普通函数的作用域链为：函数本身的变量 -> 全局变量；而闭包作用域链为：函数本身的变量 -> 父函数的变量-> 全局变量
• 应尽量少用闭包，因为会增加内存的占用

标准的闭包实现：

(function () {
    function createComparisonFunction(propertyName) {
        return function (obj1, obj2) {
            var value1 = obj1[propertyName]
            var value2 = obj2[propertyName]

            var result = 0
            if (value1 > value2) {
                result = 1
            }
            else if (value1 < value2) {
                result = -1
            }

            return result
        }
    }

    var compare = createComparisonFunction('name')
    var obj1 = { name: 'a' }
    var obj2 = { neme: 'b' }
    console.log(compare(obj1, obj2)) // -1
})();

闭包与变量

　　因为闭包会共享父级作用域链的变量，所以下面demo中的闭包，打印出的index结果都是10

(function () {
    function createFunction() {
        var arr = []

        for (var index = 0; index < 10; index++) {
            arr[index] = function () {
                return index
            }
        }

        return arr
    }


    var arr = createFunction()

    for (var index = 0; index < arr.length; index++) {
        var element = arr[index];
        console.log(element()) // 全部都是10
    }
})();

为了解决上面的变量共享问题，我们可以给数组赋值时，增加一个立即执行的闭包。

思路：因为参数是按值传递的，所以多写一个闭包，并且马上执行，就可以将每个参数都隔离开，达到预期的效果

(function () {
    function anotherCreateFunction() {
        var arr = []

        for (var index = 0; index < 10; index++) {
            arr[index] = (function (num) {
                return function () {
                    return num
                }
            })(index)
        }

        return arr
    }

    var arr = anotherCreateFunction()

    for (var index = 0; index < arr.length; index++) {
        var element = arr[index];
        console.log(element()) // 1~10
    }
})();

 

闭包中的this

　　

　　默认闭包中的this会指向window

(function () {
    var name = 'Cheery'
    var thisObject = {
        name: 'Colyn',
        getNameFunc: function () {
            return function () {
                return this.name
            }
        }
    };

    console.log(thisObject.getNameFunc()()) // Cheery
})();

 如果想要在闭包中访问父级函数的作用域，可以通过提前将this的值保存起来，以达到预期效果

(function () {
    var name = 'Cheery'
    var thisObject = {
        name: 'Colyn',
        getNameFunc: function () {
            var that = this
            return function () {
                return that.name
            }
        }
    };

    console.log(thisObject.getNameFunc()()) // Colyn
})();

闭包的内存泄漏问题

• IE9之前的javascript和COM对象的回收机制不同
• 如果闭包的作用域链中保存着一个HTML 元素，那么就意味着该元素将无法被销毁

下面这个方法，只要匿名函数存在，element的引用数至少是1，因此它所占用的内存就永远不会被回收

(function () {
    function assignHandler() {
        var element = document.getElementById('someElement')
        element.click = function () {
            alert(element.id)
        }
    }
})();

解决办法

• 将闭包中要用到的变量提取到父级作用域链中
• 销毁element

(function () {
    function anotherAssignHandler() {
        var element = document.getElementById('someElement')
        // 重点1
        var id = element.id
        element.click = function () {
            alert(id)
        }

        // 重点2
        element = null
    }
})();

模仿块级作用域

 

以下函数的index会存在于整个函数

(function () {
    function blockFunction() {
        for (var index = 0; index < 10; index++) {

        }

        console.log(index) //10
    }
})();

想要解决变量污染的问题，可以创建一个立即执行的闭包来解决

(function () {
    function anotherBlockFunction() {
        (function () {
            for (var blockIndex = 0; blockIndex < 10; blockIndex++) {

            }
        })()

        console.log(blockIndex) //Uncaught ReferenceError: blockIndex is not defined
    }
})();

 

特权方法：指的是有权访问私有变量的共有方法

 

方式一：每个实例独享变量

 

(function () {
    function PrivilegeFunction(name) {
        var privateName = name || 'Cheery'

        this.publicSetName = function (name) {
            privateName = name
        }


        this.publicGetName = function () {
            return privateName
        }
    }

    var p1 = new PrivilegeFunction
    var p2 = new PrivilegeFunction

    console.log(p1.publicGetName()) // Cheery
    console.log(p2.publicGetName()) // Cheery

    p1.publicSetName('Colyn')

    console.log(p1.publicGetName()) // Colyn
    console.log(p2.publicGetName()) // Cheery
})();

方式二：实例间共享变量

(function () {
    var staticPrivateName

    function StaticPrivilegeFunction(name) {
        staticPrivateName = name || 'Cheery'
    }

    StaticPrivilegeFunction.prototype.publicSetName = function (name) {
        staticPrivateName = name
    }

    StaticPrivilegeFunction.prototype.publicGetName = function () {
        return staticPrivateName
    }

    var p1 = new StaticPrivilegeFunction
    var p2 = new StaticPrivilegeFunction

    console.log(p1.publicGetName()) // Cheery
    console.log(p2.publicGetName()) // Cheery

    p1.publicSetName('Colyn')

    console.log(p1.publicGetName()) // Colyn
    console.log(p2.publicGetName()) // Colyn
})();