js fuction函數內return一個內部函數詳解

今天在網上，看到一篇關於js函數難點的文章，js函數的一些難點。在那上面提了一下，關於js函數返回另一個函數的問題，並附上了一道面試題：

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

接下來，就來詳細的解讀返回另一個函數的問題。

其實我是從Java轉過來的，一開始看到那篇文章，我對於返回另一個函數並沒有什么認識，我之所以寫這篇文章是因為，在那里面有一點讓我感到奇怪，那就是最后的調用方式

add(1)(2)(3)

由於在java中，我沒有見到過這樣的函數調用方式，所以引起了我的注意，我決定去研究研究；下面就將我的研究分享出來，當然如果你對此已經有了深刻的認識，你可以選擇跳過，或者對於不足的地方，給出指點。好了閑話不多說，進入正題。

我們來看一個最簡單的例子：

function create1(pro) {
    console.log("pro : " + pro);
    return function(obj1, obj2){
        console.log(obj1 + " -- " + obj2);
        return obj1 + obj2;
    }
}

我構建了一個簡單的函數create1，並且有一個返回值，返回值是一個內部函數。函數構建完了，接下來進行調用：

var c1 = create1("pro"); // 創建函數

如果按照我之前的理解，當我調用了這個方法后，應該會打印出 pro : pro，接着然后報錯的。如果你看完過后，也跟我有一樣的想法，那恭喜你想多了或者有了固型思維

。真實的是當我們通過上面的代碼調用的時候，日志是打印出了  pro : pro ,但是並沒有報錯，並且我們反復來回的調用過后，也只是來回的打印相同的日志。這也就說明這個時候，只是進入了create1()方法，並沒有進入到該函數的內部函數內。通過面試題的啟發，我在試着調用了一次，發現打印出了后續的。

c1(1, 2); // 調用函數

這樣就打印出了下面的日志；這說明其實我們一開始調用方法的時候，其實是並沒有進入到里層的函數的，只是進入了外層函數體，我們只有再調用才能進入里層函數體，並且這個時候，我們重復上面的調用，他只會是調用里層的函數體，並沒有外面的函數體。

類似這種函數返回另一個函數的，我們第一次調用只是構建了一個外層函數體對象，只有有后續的調用，才能調用內層函數體，並且重復調用，只會重復內層函數體。
不要急，還沒有完，后面還有……

接下來，我們看一看另一種情況，我們先聲明一個函數，用來做加法運算：

function infun(obj1, obj2) {
    console.log(obj1 + " -- " + obj2);
        return obj1 + obj2;
}

然后再聲明一個函數，在該函數中調用上面聲明的函數：

function create2(pro) {
    console.log("pro = " + pro);
        return infun(obj1, obj2); // 這個時候,會報錯
}

最后是調用：

var c1 = create2("pro");

查看日志：

pro = pro
‌Uncaught ReferenceError: obj1 is not defined

會發現，打印出了一條日志后，接着拋出了異常。對方法做一下改動，

function create2(pro) {
    console.log("pro = " + pro);
    var obj1 = 1, obj2 = 2;
    return infun(obj1, obj2); // 這個時候,會報錯
}

在調用會發現正常運行，並且打印出了兩條日志記錄。

這說明，類似於這種，在一個函數內返回一個已經聲明的函數，其實是調用已經聲明的函數，跟上面的情況是不一樣的。
好了，現在回過頭來，仔細看看開頭的面試題，就會發現一切都明了了：

// 聲明一個函數表達式
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()方法
}

然后再來看看調用：

alert(add(1)(2)(3))

結果為6，至於原因就跟我們第一種討論的情況一樣，接下來，我們反復調用：

// 以下結果輸出為：6
alert(add(10)(2)(3))
alert(add(100)(2)(3))
// 下面的結果輸出變了
alert(add(1)(3)(3))
alert(add(1)(2)(5))