文章圍繞“JavaScript 中的‘return’是什么意思”展開，先解釋有無‘return’的函數(shù)區(qū)別，闡述函數(shù)的可重用性和可維護(hù)性，接著探討為何需要‘return’，分析多種替代方案的不可行性，最后總結(jié)在 JavaScript 中因規(guī)范和多種因素必須使用‘return’。
最近朋友問了我一個問題：“JavaScript 中的 return 是什么意思？”
jsx代碼解讀復(fù)制代碼
function contains(px, py, x, y) {
const d = dist(px, py, x, y);
if (d > 20) return true; // 這行是什么意思？
else return false; // 那這一行呢？
}
一開始我覺得這個問題很簡單，但它背后其實(shí)蘊(yùn)藏了一些重要且有趣的概念！
因為我朋友是藝術(shù)背景，所以本篇文章的結(jié)論是一些很基礎(chǔ)的東西，大家感興趣可以繼續(xù)看下去。
兩種函數(shù)
我先解釋了有 return 和沒有 return 的函數(shù)的區(qū)別。函數(shù)是一組指令，如果你需要這組指令的執(zhí)行結(jié)果，就需要一個 return 語句，否則不需要。
例如，要獲得兩個數(shù)的和，你應(yīng)該聲明一個帶有 return 語句的 add 函數(shù)：
jsx代碼解讀復(fù)制代碼
function add(x, y) {
return x + y; // 帶有 return 語句
}
然后你可以這樣使用 add 函數(shù)：
jsx代碼解讀復(fù)制代碼const a = 1; const b = 2; const c = add(a, b); // 3 const d = add(b, c); // 5
如果你只是想在控制臺打印一條消息，則不需要在函數(shù)中使用 return 語句：
jsx代碼解讀復(fù)制代碼function great(name) { console.log(`Hello ${name}!`); }
你可以這樣使用 great 函數(shù)：
jsx代碼解讀復(fù)制代碼great('Rachel');
我原以為我已經(jīng)解答了朋友的問題，但她又提出了一個新問題：“為什么我們需要這個求和函數(shù)？我們可以在任何地方寫 a + b，那為什么還要用 return 語句？”
jsx代碼解讀復(fù)制代碼const a = 1; const b = 2; const c = a + b; // 3 const d = b + c; // 5
此時，我意識到她的真正問題是：“我們?yōu)槭裁葱枰瘮?shù)？”
為什么需要函數(shù)？
為什么要使用函數(shù)？盡管有經(jīng)驗的程序員有無數(shù)的理由，這里我只關(guān)注一些與我朋友問題相關(guān)的原因
可重用的代碼
她的確有道理。我們可以輕松地在任何地方寫 a + b。然而，這僅僅因為加法是一個簡單的操作。如果你想執(zhí)行一個更復(fù)雜的計算呢？
jsx代碼解讀復(fù)制代碼const a = 1; const b = 2; // 這是否易于在每個地方寫？ const c = 0.6 + 0.2 * Math.cos(a * 6.0 + Math.cos(d * 8.0 + b));
如果你需要多個語句來獲得結(jié)果呢？
jsx代碼解讀復(fù)制代碼const a = 1; const b = 2; // t 是一個臨時變量 const t = 0.6 + 0.2 * Math.cos(a * 6.0 + Math.cos(d * 8.0 + b)); const c = t ** 2;
在這兩種情況下，重復(fù)編寫這些代碼會很麻煩。對于這種可重用的代碼，你可以將其封裝在一個函數(shù)中，這樣每次需要它時就不必重新實(shí)現(xiàn)了！
jsx代碼解讀復(fù)制代碼function theta(a, b) { return 0.6 + 0.2 * Math.cos(a * 6.0 + Math.cos(d * 8.0 + b)); } const a = 1; const b = 2; const c = theta(a, b); const d = theta(b, c);
易于維護(hù)
在討論可重用性時，你無法忽視可維護(hù)性。唯一不變的是世界總是在變化，這對于代碼也一樣！你的代碼越容易修改，它就越具可維護(hù)性。
如果你想在計算結(jié)果時將 0.6 改為 0.8，沒有函數(shù)的情況下，你必須在每個執(zhí)行計算的地方進(jìn)行更改。但如果有一個函數(shù)，你只需更改一個地方：函數(shù)內(nèi)部！
jsx代碼解讀復(fù)制代碼function theta(a, b) { // 將 0.6 更改為 0.8，你就完成了！ return 0.8 + 0.2 * Math.cos(a * 6.0 + Math.cos(d * 8.0 + b)); }
毫無疑問，函數(shù)增強(qiáng)了代碼的可維護(hù)性。就在我以為我解答了她的問題時，她又提出了另一個問題：“我理解了函數(shù)的必要性，但為什么我們需要寫 return？”
為什么需要 return？
真有意思！我之前沒有考慮過這個問題！她隨后提出了一些關(guān)于 return 的替代方案，這些想法非常有創(chuàng)意！
為什么不直接返回最后一條語句？
第一個建議的方案是“為什么不直接返回最后一條語句？”
jsx代碼解讀復(fù)制代碼function add(a, b) { a + b } const sum = add(1, 2); // undefined
我們知道，在 JavaScript、Java、C 或許多其他語言中，這樣是不允許的。這些語言的規(guī)范要求顯式的 return 語句。然而，在某些語言中，例如 Rust，這是允許的：
rust代碼解讀復(fù)制代碼fn add(a: i32, b: i32) -> i32 { a + b } let sum = add(1, 2); // 3
然而值得注意的是，JavaScript 中的另一種函數(shù)類型不需要 return 語句！那就是帶有單個表達(dá)式的箭頭函數(shù)：
sx代碼解讀復(fù)制代碼const add = (x, y) => x + y; const sum = add(1, 2); // 3
如果我們將結(jié)果賦值給局部變量呢？
然后她提出了另一個有創(chuàng)意的解決方案：“如果我們將結(jié)果賦值給一個局部變量呢？”
jsx代碼解讀復(fù)制代碼function add(x, y) { let sum = x + y; } add(1, 2); sum; // Uncaught ReferenceError: sum is not defined
她很快注意到我們無法訪問 sum 變量。這是因為使用 let 關(guān)鍵字聲明的變量只在其定義的作用域內(nèi)可見——在這個例子中是函數(shù)作用域。
可以將函數(shù)視為黑盒子。你將參數(shù)放入盒子中，期待獲得一個輸出（返回值）。只有返回值對外部世界（父作用域）是可見的（或可訪問的）。
將結(jié)果賦值給全局變量呢？
如果我們在函數(shù)作用域之外訪問這個值呢？將其賦值給一個全局變量怎么樣？
jsx代碼解讀復(fù)制代碼let sum; function add(x, y) { sum = x + y; } add(1, 2); sum; // 3
啊，修改全局變量！副作用！非純函數(shù)！這些想法在我腦海中浮現(xiàn)。但我如何在一分鐘內(nèi)解釋為什么這是一個糟糕的選擇呢？
避免這種方法的一個關(guān)鍵原因是，別人很難知道具體的全局變量是在哪個函數(shù)中被修改的。他們需要去查找結(jié)果在哪兒，而不是直接從函數(shù)中獲??！
總結(jié)
簡而言之，我們需要 return，因為我們需要函數(shù)，而在 JavaScript 中的標(biāo)準(zhǔn)函數(shù)中沒有可行的替代方案。
函數(shù)的存在是為了使代碼具有可重用性和可維護(hù)性。由于 JavaScript 的規(guī)范、函數(shù)作用域的限制以及修改全局變量帶來的風(fēng)險，我們在 JavaScript 的標(biāo)準(zhǔn)函數(shù)中必須使用 return 語句。
作者：小小酥梨
鏈接：https://juejin.cn/post/7434460436307591177
該文章在 2024/11/18 18:00:18 編輯過
400 186 1886
