用简单的英语描述 JavaScript 闭包和副作用？ （分别地）

Question

我读过一些 JavaScript 书籍，总是听说闭包和副作用。出于某种原因，我无法理解它们到底是什么。谁能用简单的英语和例子向我解释一下它们是什么？ （正如您向具有图形设计师编程水平的人解释的那样）。

Answer 1

副作用是更容易的概念。 “纯函数”是将其输入值映射到输出值的函数 function plus(x, y) { return x + y; } }。 “副作用”是除返回值之外的任何效果。因此，例如：

function plusWithSideEffects(x, y) {
  alert('This is a side effect'); 
  return x + y;
} 

具有引发警报对话框（并需要用户交互）的副作用。每个代码函数都有一些副作用（它们都会消耗内存并且需要时间，如果没有别的的话），但是当人们谈论副作用时，他们通常最关心的是任一IO（如上面的警报对话框） ) 或写入超出函数执行周期的状态。

副作用的挑战在于它们使函数更难以推理和重用。 （推理和重用尽可能接近“纯函数”的函数要容易得多，因为它们倾向于“做好一件事”。）

Answer 2

具有副作用的函数除了返回值之外还执行其他操作（尽管它们也可能执行此操作）。如果您可以将给定参数的所有函数调用替换为这些参数的值，并且程序具有相同的行为，则不会产生副作用。这要求函数始终为给定参数返回相同的值。

也就是说，假设f(1,2) == 12。如果您始终可以将 f(1,2) 替换为 12 并且程序的行为方式相同，那么 f 对这些没有副作用论据。另一方面，如果在一个地方 f(1,2) == 12 和另一个地方 f(1,2) == 13，则 f< /code> 有副作用。同样，如果程序在将 f(1,2) 替换为 12 后停止发送电子邮件，则 f 会产生副作用。一般来说，如果 f(x,y) == z （其中 z 取决于 x 和 y），并且您始终可以将每个 f(x,y) 调用替换为 < code>z，则 f 没有副作用。

一些有副作用的简单函数：

// doesn't always return the same value
function counter() {
    // globals are bad
    return ++x;
}
// omitting calls to `say` change logging behavior
function say(x) {
    console.log(x);
    return x;
}

Answer 3

副作用：

将副作用视为同时执行两件事的事物。
例如：

副作用的经典示例：

var i = 1;
var j = i++;

副作用发生在 i++ 处。这里发生的情况是 j 变为 1 ，然后 i 递增并变为 2。换句话说，发生了两件事，副作用是i 变成了 2。

闭包：

可视化如下所示的链接链：<><><><><><><> 。
想象一下，这个链接链的名称称为范围链。然后想象所有这些链接将对象连接在一起，如下所示：<>对象<>对象<>对象<>。
现在，请记住以下几点：

(1) 所有作用域链均以全局对象开头。

(2) 定义函数时，会存储该函数的作用域链。

(3) 当调用一个函数时，它会创建一个新对象并将其添加到作用域链中。

现在，请看下面的示例：

function counter () { // define counter
                   var count = 0;
                   return function () { return count + 1;}; // define anonymous function
                   };
var count = counter(); // invoke counter

在此示例中，当 counter()< /code> 定义后，计数器的作用域链如下所示：<>全局对象<>。然后，当调用 counter() 时，作用域链如下所示：<>全局对象<>计数器对象<>。之后，定义并调用 counter 内部没有名称的函数（称为匿名函数）。一旦调用，匿名函数的作用域链如下所示：<>全局对象<>计数器对象<>匿名函数对象<>

这是闭包部分。如果您注意到，匿名函数正在使用在其外部定义的变量 count 。原因是因为匿名函数可以访问其作用域链中定义的任何变量。这就是闭包，一个函数以及对其存储作用域链中任何变量的引用。

但是，在上面的示例中，一旦函数返回，调用时创建的对象就会被丢弃，因此实际上没有任何意义。现在看以下内容：

function counter () { // define counter
                   var count = 0;
                   function f() { return count + 1;}; // define f
                   return f; // return f
                   };
var count = counter(); // invoke counter

在本示例中，我返回一个名为 f 的函数，并将其分配给变量 count。现在变量 count 保存了对整个作用域链的引用，并且它不会被丢弃。换句话说，变量 count 存储这样的作用域链：<>全局对象<>计数器对象<>匿名函数对象<>。这就是闭包的力量，你可以保存对作用域链的引用，并像这样调用它：count()。

Answer 4

示例

function outer() {
    var outerVar;

    var func = function() {
        var innerVar
        ...
        x = innerVar + outerVar
    }
    return func
}

当outer()死亡时，函数func()继续活着，这很实用

Answer 5

我是 JavaScript 新手，不会尝试谈论闭包。然而，我对 JavaScript 的陌生使我非常清楚副作用的使用，这在我常用的编程语言（Erlang）中是不可能的。

副作用似乎是 JavaScript 中改变状态的常用方法。以 w3cschools.com 网站上的这个例子为例：

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

这里没有输入参数或返回值，而是文档的内容发生了变化，因为它们在函数范围内是全局的。例如，如果您要在 Erlang 中编写此代码，则文档将作为参数传入，并且将返回新的文档状态。阅读调用程序的人会看到传入的文档和返回的更改后的文档。

看到调用该函数不返回显式新状态的函数应该提醒程序员可能使用了副作用。

Answer 6

主要副作用是函数内部与外界的交互。副作用的一些例子是：-
API 调用或 HTTP 请求、数据突变、打印到屏幕或控制台、
DOM 查询/操作。
例子 ：

var a = 12
function addTwo(){
   a = a + 2; // side-effect

}
addTwo()

关闭

根据 MDN 的说法，

闭包使您可以从内部函数访问外部函数的作用域。在 JavaScript 中，每次创建函数时都会创建闭包。

例子 ：

function outer(){
  var a = 12; // Declared in outer function 
  function addTwo(){ // closure function
    a = a + 2; // acessing outer function property
    console.log(a)
  }
  addTwo();
 }
 outer()