在javascript中返回函数，理解范围&关闭 [英] Returning functions in javascript, understanding scope & closures

问题描述

我正在关注javascript关闭的Mozillas开发者网站，他们有这个代码示例。

I was looking at Mozillas developer site on javascript closure and they had this example of code.

  function makeAdder(x){
    return function (y) {
        console.log(y + " this is y")
        console.log(x + " this is x")
        return x + y;
        }
}
var add10 = makeAdder(10);
console.log(add10(2)); // 12

现在我理解正在设置的X属性但是我没有得到的是如何范围y受到影响。我知道它有一个返回功能，但我的大脑试图想象你如何设置一个没有参考的时候。有人能解释一下吗

Now i understand the X attribute being set but what i dont get is how the scope of the y is being affected. I know its a return function but my brain went to mush trying to visualise how you could set a y when there was no ref to it. could someone explain?

推荐答案

makeAdder 返回一个可以传递<$的函数c $ c> y 参数。它是在调用时设置的，而不是 x ，它是在创建新函数时设置的（在调用<$ c $时） c> makeAdder ）。

makeAdder returns a function to which you can pass the y parameter. It is set at the time of invocation, as opposed to x which is set at the time of creation of the new function (at the time of the invocation of makeAdder).

对于此示例的情况，输出相当于写了：

For the case of this example, the output is equivalent to having written:

function add10(y) {
    return 10 + y;
}

console.log(add10(2)); // 12

这里没有新的东西。示例代码主要是试图说明正在为 x 创建一个闭包。

Nothing new is going on here. The sample code is mainly trying to illustrate that a closure is being created for x.

所以 makeAdder ，在这里恰当地命名：当你向它传递10时，它会为你提供一个函数，它会将你传递给它的所有内容添加10个功能。

So makeAdder, here, is aptly named: when you pass 10 to it, it gives you a function that will add 10 to everything you pass to that new function.

var add10 = makeAdder(10);
var add20 = makeAdder(20);

console.log(add10(1) + add20(1)); // 32

当然，为了添加，可能更容易获得一个函数接受两个参数并添加它们。但这不是一个补充的教训，它是闭包的一个教训。

Surely, for the purpose of adding, it might be easier to just have a function that accepts two parameters and adds them. But this is not a lesson in adding, it is a lesson in closures.

现实世界的场景可能是这样的：

A real world scenario might be something like this:

var buttons = document.getElementsByClassName('myButton');
for(var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
        alert('You clicked button ' + i);
    };
}

在上面的代码中， i 将遍历整个集合。因此，所有按钮将提醒任何 buttons.length 。相反，您可以执行以下操作：

In the above code, i will have iterated through the entire set before any of the buttons are clicked. Therefore, all buttons will alert whatever buttons.length is. Instead, you could do the following:

var makeAlert = function(x) {
    return function() {
        alert('You clicked button ' + x);
    };
};

for(var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = makeAlert(i);
}

这里的区别是 i （将在整个迭代之后），但在迭代期间使用，此时 i
每个按钮的值都不同。

The difference here is that i is not being used when the button is clicked (which will be after the entire iteration), but it is used during the iteration, at a time when i will have a different value for each button.

而不是创建变量， makeAlert ，您经常会看到这种类型的代码被写为匿名函数，立即被调用。下面的代码基本上等同于上面的代码：

Instead of creating a variable, makeAlert, you will often see this type of code being written as an anonymous function, invoked immediately. The code below is essentially equivalent to the code above:

for(var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = (function(x) {
        return function() {
            alert('You clicked button ' + x);
        };
    })(i);
}

这篇关于在javascript中返回函数，理解范围&amp;关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！