Javascript立即函数和代码范围

时间:2017-10-18 07:07:04

标签: javascript function closures

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

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

3 个答案:

答案 0 :(得分:5)

因为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);

答案 1 :(得分:0)

  

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

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

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

答案 2 :(得分:0)

立即函数调用仅被评估一次。您正在为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