简体   繁体   English

有人可以向我解释此JavaScript函数的流程吗? (关闭概念)

[英]Can someone explain me the flow of this JavaScript function? (Closure concept)

I'm reading " Eloquent JavaScript ". 我正在阅读“ Eloquent JavaScript ”。 Chapter 3 introduces " Closure " concept and gives you a couple of examples. 第3章介绍“ 闭包 ”概念,并提供一些示例。 One of these is next one: 其中之一是下一个:

function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

var twice = multiplier(2);
console.log(twice(5));
// → 10

I think I understood the concept. 我想我了解这个概念。 If first I execute console.log(twice) , since variable number is undefined, what I get is [Function] . 如果首先执行console.log(twice) ,由于变量number未定义,我得到的是[Function] What I don't understand is how twice(5) works. 我不明白是twice(5)是如何工作的。 Why local variable number is initialized with value 5 ? 为什么局部变量number用值5初始化?

Also, why if I execute console.log(multiplier(2,5)) I don't get 10 as a result? 另外,为什么如果我执行console.log(multiplier(2,5))我没有得到10结果呢?

Thanks. 谢谢。

Because multiplier returns a function, so twice is equal to the returned function, NOT the multiplier function. 因为multiplier返回一个函数,所以twice等于返回的函数,而不是multiplier函数。

However, when multiplier is called the factor variable is passed and used within the returned function. 但是,在调用multiplier时,将在返回的函数中传递和使用factor变量。

So to make it easier to understand, consider that twice is basically: 因此,为了使其易于理解,请考虑twice基本上是:

var twice = function(number) {
    return number * 2;
};

Where factor has been replaced by the value you passed in when calling multiplier(2) . 其中的factor已替换为您在调用multiplier(2)时传递的值。


I think I understood the concept. 我想我了解这个概念。 If first I execute console.log(twice) , since variable number is undefined, what I get is [Function] . 如果首先执行console.log(twice) ,由于变量号未定义,我得到的是[Function]

When you use console.log(twice) you are not actually calling the function twice , you are simply logging the value of it. 当您使用console.log(twice)时,实际上并没有twice调用该函数,而只是在记录它的值。 So the output of [Function] is not because number is undefined, it is because you are outputting the actual function rather than the result of it. 因此, [Function]的输出不是因为number未定义,而是因为您正在输出实际的函数而不是其结果。


Also, why if I execute console.log(multiplier(2,5)) I don't get 10 as a result? 另外,为什么如果我执行console.log(multiplier(2,5))我没有得到10结果呢?

Here you are calling the multiplier by providing 2 arguments, though you have only defined the function to accept one parameter ( factor ). 在这里,您通过提供2个参数来调用multiplier ,尽管您仅定义了接受一个参数( factor )的函数。 In javascript, this won't cause an error, but you will just get the first value mapped in factor ( factor = 2 ). 在javascript中,这不会引起错误,但是您只会得到映射到factor的第一个值( factor = 2 )。

Note: There are ways to still access all the supplied arguments even if you don't have parameters defined for them ( here's an example ) 注意:即使您没有为它们定义参数,也有一些方法可以访问所有提供的参数( 这是一个示例

Something that would be possible to get a result of 10 which might be of interest is to use the following code: 使用以下代码可以得到10的结果:

var result = multiplier(2)(5); // result = 10

multiplier is a function which returns anonymous function which accepts an argument(number) 乘法器是一个返回匿名函数的函数,该函数接受一个参数(数字)

var twice = multiplier(2);

Basically is :- 基本上是:-

 var twice = function(number) {
        return number * 2;
    };

If you execute 如果执行

console.log(multiplier(2,5))

you call the function giving two parameters, whereas 您调用提供两个参数的函数,而

function multiplier(factor) {}

only takes one parameter. 只需要一个参数。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM