Question

你好我已经开始学习一些javascript而且我无法在“正常”函数中解决这个问题。我不明白为什么以下两个函数输出不同的结果。 f2输出5，而f1输出1.为什么？

var f1 = function(){
  var x= 1;

  var add = function(){
    x=5;
  };

  var result = function(){
    console.log(x);
  };

  return {
    add: add,
    result: result
  };
};

f1().add();
f1().result();

var f2= (function(){
  var x= 1;

  var add = function(){
    x=5;
  };

  var result = function(){
    console.log(x);
  };

  return {
    add: add,
    result: result
  };
})();

f2.add();
f2.result();

Answer 1

第一个示例显示了f1()的两次调用。

第一次调用f1()会创建一个新的变量作用域，x设置为1，并返回带有方法的对象。 .add()然后将x设置为5。
f1()的第二次调用创建另一个新的变量范围，x再次设置为1，并返回带有方法的对象。然后，.result()会返回仍为x的{{1}}。

第二个示例仅调用1一次，因此没有新的变量范围f2()并且正在创建新方法。

所以基本上x的两次调用会在每次调用时初始化f1，并返回两个不同的对象，其方法更接近两个不同的x变量。

x被调用一次，因此一个对象共享一个f2变量并返回方法。因此，x来电和.add()来电使用相同的.result()变量。

Answer 2

让我概述一下代码中会发生什么：

// Declares a function named f1.
var f1 = function () {
  // Searches each scope (the scope of f1, the scope containing f1, etc.) for
  // a variable named x. If found, it will reassign it to 1. If the search reaches
  // the global scope and no variable is found it will declare and initialize
  // a global variable.
  x = 1;

  // Declares a local variable named add to a function that reassigns the value of x.
  var add = function () {
    x = 5;
  };

  // Declares a local variable named result to a function that logs the value of x.
  var result = function () {
    console.log(x);
  };

  // Returns an object containing each function.
  return {
    add: add,
    result: result
  };
};

// Calls f1 and the returned add function.
f1().add();

// Calls f1 again (which reassigns x) and calls the returned result function.
f1().result();


// Creates a variable named f2 and assigns to the result of applying an anonymous
// function. f2 now references the returned object.
var f2 = (function () {
  // Reassigns x, does not create a new variable.
  x = 1;

  var add = function () {
    x = 5;
  };

  var result = function () {
    console.log(x);
  };

  return {
    add: add,
    result: result
  };
})();

// The difference now is that the function that contains add and result is only
// called once, during the initialization of f2. Had you written var g = f1();
// g.add(); g.result(); you would have gotten the exact same results.
f2.add();
f2.result();

Javascript模块模式和函数调用

2 个答案: