logo标签列表

如何在JavaScript中执行我的Add函数

javascript
3

我想使用以下代码来执行我的add函数。但是我没有得到正确的语法。

我已经尝试过x.add(3,4)和x().add(3,4)，但都不起作用。 请告诉我我错在哪里。

<html>
  <body>

    <p>
      After a function has been stored in a variable, 
      the variable can be used as a function:
    </p>

    <p id="demo">
      hello
    </p>

    <script>

      var x = function () {

        var add = function(a, b) { return a + b };

        var mul = function(a, b) { return a * b };

      }();

      document.getElementById("demo").innerHTML = x.add(3,4);

    </script>

  </body>
</html>
Σ╜┐τõ¿this.addσÈÔthis.mulµÙѵ¢┐µìóvar addσÈÔvar mulπÇé - Laurens
为什么你要把 add 和 mul 放在函数 x 里面？你可以把 x 去掉，让 add 和 mul 函数分开，然后只需运行 add(3,4) 或 mul(3,4)。 - Blundering Philosopher
5个回答
2

看起来你希望x是一个对象。正确的语法是：

似乎您希望将x作为一个对象。 正确的语法如下：

var x = {
  add: function(a,b){return a + b},
  mul: function(a,b){return a * b},
};

如果你坚持使用IIFE（因为你在该作用域中执行的操作比你展示的更多），那么你需要这样做：

Original Answer翻译成"最初的回答"

var x = (function () {
  function add(a,b){return a + b}
  function mul(a,b){return a * b}

  return {add, mul};
}());
1
请参见以下内联注释： 

// You can set the function up as a "constructor function",
// meaning that an object instance will be constructed from the
// invocation of the function. Standard convention is to use
// PascalCase for constructor function names:
function X() {
  // Later, when an instance of this object is made,
  // members of the object can be gotten by identifying
  // them as going along with "this" object instance.
  // There is more to know about this (ie. properties are
  // created as I'm showing here, but methods are often 
  // added to the function's prototoype).
  this.add = function(a,b){return a + b};
  this.mul = function(a,b){return a * b};
}

// Use the function to construct an object instance
let instance = new X();

// Then, use that instance and its associated members.
// FYI: Don't use .innerHTML when you aren't getting/setting
// any HTML. Use .textContent for raw text.
document.getElementById("demo").textContent = "Add: " + instance.add(3,4);
document.getElementById("demo").textContent += " | Multiply: " + instance.mul(3,4);
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>

<p id="demo">hello</p>

1

在其他函数内定义的函数不会自动对外部代码可用。它们的默认存在时间与任何其他本地变量相同，在外部函数执行完成时进行垃圾回收。

要使其保留，您需要指定如何使其可用。其中一种选项是将它们返回，并添加一个结构来保存它们：

var x = function () {
  return {
    add: function(a,b){return a + b},
    mul: function(a,b){return a * b},
  };
}();

虽然目前为止，外部函数并不是必需的，可能可以被移除：

var x = {
  add: function(a,b){return a + b},
  mul: function(a,b){return a * b},
};
0
您正在做的是定义一个名为x的函数，并在该函数内部定义两个变量，命名为add和mul。由于JavaScript遵循item scope的规则（尤其是在函数上下文中，参见Function Scope部分），这些变量在函数外部是不可访问的。要访问它们，您需要让函数return一个定义它们的对象：
var x = function() {
  var add = function(a,b){return a + b};
  var mul = function(a,b){return a * b};

  return {
    add: add,
    mul: mul
  };
}

现在可以通过调用函数来访问它们，该函数将返回这两个值：

var y = x();
document.getElementById("demo").innerHTML = y.add(3,4);
-2

In side function if you want to declare public variables to constuctor use this. And make sure to put new to create new instance of your constructor 

var x = new function () {

  this.add = function(a,b){return a + b};
  this.mul = function(a,b){return a * b};

};
console.log(x.add(1,3));
console.log(x.mul(5,3));

1
虽然您的代码可能提供了有效的解决方案，但您应该始终提供书面说明，解释为什么它可以改善 OP 的问题。 - charlietfl
1
在这个上下文中，这种解决问题的方式并不好，因为函数不再以普通变量的形式存储。 - Jamie Ridding
不要使用new function！ - Bergi
@Bergi，你能否解释一下为什么？ - Maheer Ali
@MaheerAli 请点击链接查看详细解释。 - Bergi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接