首頁 > web前端 > css教學 > 主體

Js的回傳值問題

php中世界最好的语言
發布: 2017-11-28 14:05:42
原創
2053 人瀏覽過

今天看到網路上有一篇關於JS函數回傳值的問題了嗎,裡面有一些js函數的困難點。在那上面提了一下,關於js函數返回另一個函數的問題,並附上了一道面試題,我就給大家分享一下

[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
登入後複製

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

其實我是從java轉過來的,一開始看到那篇文章,我對於返回另一個函數並沒有什麼認識,我之所以寫這篇文章是因為,在那裡面有一點讓我感到奇怪,那就是最後的呼叫方式

[javascript] view plain copy

add(1)(2)(3)  

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

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

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

我建立了一個簡單的函數create1,並且有一個回傳值,回傳值是一個內部函數。函數建構完了,接下來進行呼叫:

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

如果按照我之前的理解,當我呼叫了這個方法後,應該會印出 pro : pro,接著然後報錯的。如果你看完過後,也跟我有一樣的想法,那恭喜你想太多了或者有了固型思維微笑

#。真實的是當我們透過上面的程式碼呼叫的時候,日誌是打印出了  pro : pro ,但是並沒有報錯,並且我們反覆來回的調用過後,也只是來回的打印相同的日誌。這也就說明這個時候,只是進入了create1()方法,並沒有進入到該函數的內部函數內。透過面試題的啟發,我在試著調用了一次,發現印出了後續的。

[java] view plain copy
c1(1, 2); // 调用函数
登入後複製

這樣就列印出了下面的日誌;這說明其實我們一開始呼叫方法的時候,其實是並沒有進入到裡層的函數的,只是進入了外層函數體,我們只有再呼叫才能進入裡層函數體,而這個時候,我們重複上面的調用,他只會是調用裡層的函數體,並沒有外面的函數體。

類似這種函數返回另一個函數的,我們第一次調用只是構建了一個外層函數體對象,只有有後續的調用,才能調用內層函數體,並且重複調用,只會重複內層函數體。

不要急,還沒完,後面還有…

接下來,我們看另一種情況,我們先宣告一個函數,用來做加法運算:

[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); // 这个时候,会报错  
}
登入後複製

最後是呼叫:

[javascript] view plain copy
var c1 = create2("pro");
登入後複製

查看日誌:

pro = pro
‌Uncaught ReferenceError: obj1 is not defined
登入後複製

會發現,印出了一條日誌後,接著拋出了例外。對方法做一下改動,

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

在呼叫會發現正常運行,並且列印了兩個日誌記錄。

這說明,類似這種,在一個函數內回傳一個已經宣告的函數,其實是呼叫已經宣告的函數,跟上面的情況是不一樣的。

好了,現在回過頭來,仔細看看開頭的面試題,就會發現一切都明了了:

[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()方法  
}
登入後複製

然後再來看看呼叫:

[javascript] view plain copy
alert(add(1)(2)(3))
登入後複製

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

[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))
登入後複製

#相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!


相關閱讀:

怎麼讓DIV自適應高度

怎麼用CSS隱藏圖片背景的文字內容

在HTML裡用CSS隱藏div的方法

#

以上是Js的回傳值問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板