Question

在比较正常功能和即时功能时，我对范围感到困惑。这是一个例子：

var num=5;
var x=3;
 doubleNum = function(){
   num = num*x
   x++;
   return num;
};
console.log(doubleNum());//15
console.log(doubleNum());//60
console.log(doubleNum());//300

这是一个普通函数，num和x是全局定义的，可由doubleNum访问，因此更新了num和x。

var num=5;
var x=3;
doubleNum = function(){
   num = num*x
   x++;
   return num;
}();
console.log(doubleNum);//15
console.log(doubleNum);//15
console.log(doubleNum);//15

但是，如果我定义一个立即函数并以同样的方式调用它，我会得到不同的答案。即使我希望有相同的输出我错过了必要的东西吗？或者我理解了一些错误的概念？请帮忙。提前致谢。 Jsfiddle

Answer 1

因为doubleNum不是对函数的引用，而是保留匿名函数调用的结果。

在第一种情况下，您为doubleNum分配了一个函数，并且每次通过doubleNum()调用它时，您都会更改其中的超出范围变量并返回num。你这样做3次。您的代码等同于

var num=5;
var x=3;

doubleNum = function(){
   num = num*x; // Every call will affect the outscoped num
   x++; // Every call will affect the outscoped x
   return num;
};

var val = doubleNum(); // Call changes the values and returs a new result
console.log(val);

val = doubleNum(); // Call changes the values and returs a new result
console.log(val);

val = doubleNum(); // Call changes the values and returs a new result
console.log(val);

在第二种情况下，您为doubleNum分配单一呼叫匿名功能的结果。函数值已经计算过一次，并将结果分配给doubleNum。您的代码等同于

var num=5;
var x=3;
var doubleNum;

var myFunction = function(){
   num = num*x;
   x++;
   return num;
};

doubleNum = myFunction(); // Only one call

console.log(doubleNum);
console.log(doubleNum);
console.log(doubleNum);

Answer 2

我是否错过了必要的东西？

仅在第二种情况中，doubleNum的值已经计算，因为函数在定义后立即被调用。

另一方面，在第一种情况下，只有function定义被分配给doubleNum而不是它的调用结果。

Answer 3

立即函数调用仅被评估一次。您正在为doubleNum分配一个值而不是立即函数。要达到类似的效果，请尝试使用类和getter。

class ClassName {
  constructor(){
    this.num = 5;
    this.x = 3;
  }
  get doubleNum() {
    this.num = this.num*this.x++;
    return this.num;
  }

}

var double = new ClassName();

console.log(double.doubleNum);//15
console.log(double.doubleNum);//30
console.log(double.doubleNum);//300

Javascript立即函数和代码范围

3 个答案: