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