Js return value problem

Today I saw an article on the Internet about the return value of JS functions. There are some difficulties in JS functions. I mentioned it above about the issue of js function returning another function, and attached an interview question. I will share it with you

[javascript] view plain copy
var add = function(x){  
    var sum = 1;  
    var tmp = function(x){  
        sum = sum + x;  
    return tmp;  
    }  
    tmp.toString = function(){  
        return sum;  
    }  
    return tmp;  
} // alert(add(1)(2)(3)) --> 6

Next, let’s explain in detail the return of another function. The problem.

Actually, I came from Java. When I first saw that article, I didn’t know much about returning another function. The reason why I wrote this article was because there was a little bit of confusion in it. I feel strange, that is the final calling method

[javascript] view plain copy

add(1)(2)(3)

Because in java, I I have never seen such a function calling method, so it caught my attention, and I decided to research it. I will share my research below. Of course, if you already have a deep understanding of this, you can choose to skip it. Or give pointers and smile when there are deficiencies. Okay, without further ado, let’s get to the point.

Let's look at the simplest example:

[javascript] view plain copy
function create1(pro) {  
    console.log("pro : " + pro);  
    return function(obj1, obj2){  
        console.log(obj1 + " -- " + obj2);  
        return obj1 + obj2;  
    }  
}

I built a simple function create1, and it has a return value, and the return value is an internal function. After the function is built, let’s call it next:

[javascript] view plain copy
var c1 = create1("pro"); // 创建函数

If according to my previous understanding, when I call this method, pro: pro should be printed, and then an error will be reported. If you have the same thoughts as me after reading this, then congratulations on thinking too much or having a fixed mindset. Smile

. What is true is that when we call it through the above code, the log prints pro : pro , but no error is reported, and after we call it repeatedly, we just print the same log back and forth. This also means that at this time, it only entered the create1() method and did not enter the internal function of the function. Inspired by the interview questions, I tried to call it once and found that the subsequent results were printed.

[java] view plain copy
c1(1, 2); // 调用函数

The following log is printed; this shows that when we first call the method, we did not actually enter the inner function, but only entered the outer function body. We only have to Only by calling can we enter the inner function body, and at this time, if we repeat the above call, it will only call the inner function body, and there will be no outer function body.

A function like this returns another function. Our first call only builds an outer function body Object. Only subsequent calls can call the inner function body. And repeated calls will only repeat the inner function body.

Don’t worry, it’s not over yet, there will be more to come...

Next, let’s take a look at another situation. We first declare a function to do addition operations:

[javascript] view plain copy
function infun(obj1, obj2) {  
    console.log(obj1 + " -- " + obj2);  
        return obj1 + obj2;  
}  
然后再声明一个函数，在该函数中调用上面声明的函数：
[javascript] view plain copy
function create2(pro) {  
    console.log("pro = " + pro);  
        return infun(obj1, obj2); // 这个时候,会报错  
}

Finally, call:

[javascript] view plain copy
var c1 = create2("pro");

Check the log:

pro = pro
‌Uncaught ReferenceError: obj1 is not defined

You will find that after a log is printed, an exception is thrown. Make some changes to the method. When

[javascript] view plain copy
function create2(pro) {  
    console.log("pro = " + pro);  
    var obj1 = 1, obj2 = 2;  
    return infun(obj1, obj2); // 这个时候,会报错  
}

is called, it will be found to run normally and two log records will be printed.

This shows that, similar to this, returning a declared function within a function is actually calling the declared function, which is different from the above situation.

Okay, now look back and take a closer look at the interview questions at the beginning, and you will find that everything is clear:

[javascript] view plain copy
// 声明一个函数表达式  
var add = function(x){  
    var sum = 1;  
    // 在函数表达式内部有一个求和的内部函数  
    var tmp = function(x){  
        sum = sum + x;// 求和  
        return tmp;  
    }  
    // 构建一个函数体的toString()函数  
    tmp.toString = function(){  
        return sum;  
    }  
    return tmp; // 返回的是一个函数体,如果该函数体有toString()方法,则会调用函数体的toString()方法  
}

Then let’s look at the call:

[javascript] view plain copy
alert(add(1)(2)(3))

The result is 6. The reason is the same as the first situation we discussed. Next, we call repeatedly:

[javascript] view plain copy
// 以下结果输出为：6  
alert(add(10)(2)(3))  
alert(add(100)(2)(3))  
// 下面的结果输出变了  
alert(add(1)(3)(3))  
alert(add(1)(2)(5))

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!

Related reading:

How to make DIV adaptive height

How to use CSS hides the text content of the image background

How to use CSS to hide divs in HTML

The above is the detailed content of Js return value problem. For more information, please follow other related articles on the PHP Chinese website!