JavaScript——用闭包模拟私有方法

最新推荐文章于 2024-11-19 18:49:10 发布

原创最新推荐文章于 2024-11-19 18:49:10 发布 · 809 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #闭包

TypeScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript中的闭包概念，通过示例演示了如何利用闭包实现函数工厂和模拟私有方法，展示了闭包在数据隐藏及封装方面的作用。

闭包

现在来考虑以下例子：

/**一个 makeAdder 函数 */
function makeAdder(x) {
    return (y) => {
        return x + y
    }
}

var add5 = makeAdder(5)
var add10 = makeAdder(10)

console.log(add5(2))  // 7
console.log(add10(2))  // 12

在这个示例中，我们定义了一个 makeAdder(x) 函数，它接受一个参数 x，并返回一个新的函数。返回的函数接受一个参数 y，并返回 x + y 的值。

从本质上讲，makeAdder(x) 是个工厂函数——它创建了将指定的值和它的参数求和的函数。在上面的示例中了，我们使用工厂函数创建了两个新函数——一个将其参数和 5 求和，一个和 10 求和。

add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在 add5 的词法环境中，x 为 5，在 add10 中 x 则为 10。

用闭包模拟私有方法

在 Java 中，有支持声明私有方法的方式，即这个私有方法只能被同一个类中的其它方法所调用，类外的不行。

而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问，还提供了管理全局命名空间的强大能力，避免了非核心方法弄乱了代码的公共接口部分。

下面的示例展示了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为模块设计模式。

/**Counter 是个立即执行函数 */
var Counter = (function() {
    var privateCounter = 0
    function changeBy(val) {
        privateCounter += val
    }
    return {
        increment: function() {
            changeBy(1)
        },
        decrement: function() {
            changeBy(-1)
        },
        value: function() {
            return privateCounter
        }
    }
})()

// console.log("Counter:", Counter)
console.log("Counter.value:", Counter.value())  // Counter.value: 0
Counter.increment()
Counter.increment()
console.log("Counter.value:", Counter.value())  // Counter.value: 2
Counter.decrement()
console.log("Counter.value:", Counter.value())  // Counter.value: 1

在之前的示例中，每个闭包都有它的词法环境；而这次我们只创建了一个词法环境，并且被三个函数共享：Counter.incremnet，Counter.decrement，Counter.value。

该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在匿名函数之外访问，必须通过匿名函数返回的三个公共函数访问。这三个公共函数是共享同一个环境的闭包。

立即执行函数表达式用法：(function(){}())，(function(){})();

注意到我们定义了一个立即执行的匿名函数，用于创建一个 Counter。我们若想要创建多个 Counter，可以使用具名函数的方式：

function makeCounter() {
    var privateCounter = 0
    function changeBy(val) {
        privateCounter += val
    }
    return {
        increment: function() {
            changeBy(1)
        },
        decrement: function() {
            changeBy(-1)
        },
        value: function() {
            return privateCounter
        }
    }
}

var Counter1 = makeCounter()
var Counter2 = makeCounter()
console.log("Counter1.value():", Counter1.value())  //Counter1.value(): 0
Counter1.increment()
Counter1.increment()
console.log("Counter1.value():", Counter1.value())  //Counter1.value(): 2
Counter2.decrement()
console.log("Counter2.value():", Counter2.value())  //Counter1.value(): -1
console.log("Counter1.value():", Counter1.value())  //Counter1.value(): 2