在 javascript 中使用闭包时出现 TypeError答案

【问题标题】：TypeError when using closures in javascript在 javascript 中使用闭包时出现 TypeError
【发布时间】：2017-12-17 16:41:45
【问题描述】：

我正在执行闭包示例，请检查下面的代码

function Counter()
{ 
    var count=0;
    var counterIncrement=function()
    {
        count++;
        console.log(count);            
    }
    return counterIncrement;  
    
}

var v=Counter();
v.counterIncrement();

错误：请解释

"message": "Uncaught TypeError: v.counterIncrement is not a function",
"文件名": "https://stacksnippets.net/js",
“lineno”：26，
“colno”：3

【问题讨论】：

应该是闭包！
你应该使用v() 而不是v.counterIncrement()
v.counterIncrement() 没有意义。参考这个 - stackoverflow.com/a/111111/6643136
Counter 返回一个函数。它不返回具有名为counterIncrement 的属性的对象。你可以打电话给v();，但v.counterIncrement 是undefined。
How do JavaScript closures work?的可能重复

标签： javascript jquery closures

【解决方案1】：

function Counter()
{ 
    var count=0;
    var counterIncrement=function()
    {
        count++;
        console.log(count);            
    }
    return counterIncrement;// Here you are returning function 
}

var v=Counter();
//v.counterIncrement();// This will not call like that 
//Directly call
v();

你喜欢的答案如下

var counter = (function() {
var count = 0;
return {
    counterIncrement: function() {
    count++;
    console.log(count);
    },
  };   
})();

【讨论】：

但是我想调用 Counter() 的内部函数，即 counterIncrement 假设我有两个函数，当调用 v()// 它会正确执行两个函数
好的，我正在根据需要更新我的答案
我已根据您的需要进行了更新，请查看第二个示例

【解决方案2】：

试试这样：

var counter = (function() {
  var count = 0;
  function countval(val) {
    count += val;
  }
  return {
    counterIncrement: function() {
      countval(1);
    },
    counterDecrement: function() {
      countval(-1);
    },
    value: function() {
      return count;
    }
  };   
})();

console.log(counter.value()); 
counter.counterIncrement();
console.log(counter.value()); 
counter.counterDecrement();
console.log(counter.value());

如果你不想这样，你可以调用v(); 而不是v.counterIncrement();..所以代码是

var v=Counter();
v();

【讨论】：

试着让它不那么复杂。
我也想给出最低限度，但他们已经发布了这个答案。
但是我想调用 Counter() 的内部函数，即 counterIncrement 假设我有两个函数，当调用 v()// 它会正确执行两个函数
如果你想使用两个函数，你可以添加另一个函数作为回报..我会更新我的答案

【解决方案3】：

更新：

这是 OP 在评论中要求的扩展答案。

所以 OP 是在问如果你有 2 个函数在里面怎么办。你会怎么称呼它？很简单，只需返回一个对象并将函数处理程序分配给每个属性。

示例：

function Counter()
{
    var count=0;
    var counterIncrement = function()
    {
        count++;
        console.log(count);
    }

    var increment = function(value) {
        count += value;
        console.log(count);
    }

    // return as an object with reference to the functions
    return {
        counterIncrement : counterIncrement,
        increment : increment
    }
}

var v= Counter();
v.counterIncrement();
v.increment(100);

---- 上一个答案 ------

当您执行var v=Counter(); 时，实际上您正在执行函数Counter() 并将其返回值分配给v。

在这种情况下，Counter() 将返回对函数 counterIncrement 的引用。

所以变量v 现在拥有一个名为counterIncrement() 的可调用函数。当您执行v.counterIncrement() 时，您的javascript 引擎会将代码视为counterIncrement.counterIncrement()，它会被解析为未定义的属性。这会产生您所看到的错误消息。

只调用v() 就足够了。

function Counter()
{
    var count=0;
    var counterIncrement=function()
    {
        count++;
        console.log(count);
    }
    return counterIncrement;

}

var v= Counter();
v();

【讨论】：

但是我想调用 Counter() 的内部函数，即 counterIncrement 假设我有两个函数，当调用 v()// 它会正确执行两个函数
@Bergi 你说得有道理。将其初始化为 50 没有意义...不确定我在想什么。
@VeereshKoppula v 已经是“内部函数”，因此您只需调用它即可v()
感谢回复，我的问题是：如果我有两个函数 1) counterIncrement(), 2Increment() 如何更接近地调用这两个函数，请解释我参考 - youtube.com/watch?v=FYrtnS3X_Lw&t=30s
非常感谢，请解释一下 // 作为对象返回，参考函数 return { counterIncrement : counterIncrement, increment : increment } 为什么你在没有引用的情况下引用它不会执行，请参考此视频，

【解决方案4】：

您可以稍微修改您的代码以创建Counter 的对象，然后您可以访问类似myObject.counterIncrement() 的函数

function Counter()
{ 
    var count=0;
    this.counterIncrement = function() //used 'this' for create an object method which can access outside
    {
        count++;
        console.log(count);            
    }
    //return counterIncrement;  //no need to return this method,

}

var v = new Counter();//used 'new' keyword to create an object of 'counter' 
v.counterIncrement();//access ojbect method.

v.counterIncrement();//out put 2
v.counterIncrement();//out put 3

【讨论】：