JavaScript 闭包：未捕获的类型错误：counter.value 不是函数

Question

我正在关注本教程：https : //www.youtube.com/watch?v=1JsJx1x35c0但是，当我运行此代码时，它给了我一个错误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.value())counter.increment()counter.increment()console.log(counter.value())counter.decrement()console.log(counter.value())我明白了未捕获的类型错误：counter.value 不是函数这有什么解释？为什么它认为counter.value()不是一个函数？

Answer 1

整个counter表达式的计算结果是一个函数，而不是一个对象，并且该函数没有value属性。如果您调用该函数，value将返回一个具有属性的对象，但您并没有这样做。

您需要立即调用该函数，作为 IIFE，以便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.value())

counter.increment()

counter.increment()

console.log(counter.value())

counter.decrement()

console.log(counter.value())

如果您想创建多个计数器，您可以像现在一样在开始时不调用该函数，但是最好调用它makeCounter而不是counter：

var makeCounter = function() {

  var privateCounter = 0

  function changeBy(val) {

    privateCounter += val

  }

  return {

    increment: function() {

      changeBy(1)

    },

    decrement: function() {

      changeBy(-1)

    },

    value: function() {

      return privateCounter

    }

  }

};

const counter1 = makeCounter();

console.log(counter1.value())

counter1.increment()

counter1.increment()

console.log(counter1.value())

counter1.decrement()

console.log(counter1.value())

console.log('----');

const counter2 = makeCounter();

counter2.decrement();

counter2.decrement();

console.log(counter2.value())

Answer 2

为了在counter函数上创建一个闭包环境，它必须是一个 IIFE。可能是复制和粘贴的错字。更正：

`var counter = (function(){

    var privateCounter = 0

    function changeBy(val){

        privateCounter += val

    }`

    `return {

        increment: function(){

          changeBy(1)

        },

        decrement: function(){

         changeBy(-1)

        },

        value: function(){

         return privateCounter

        }

     }

})()`