暫存變數很方便:存住一個算出來的值、又用名字解釋它的意義。但改成函式常常更好——少一個要傳的參數、在邏輯與原函式間畫下明確邊界,還能避免同一段計算在相似函式裡重複出現。
🧠 Why It's a Problem
一個只被算一次、之後純粹被讀取的暫存變數,其實可以升級成一個查詢方法。這個手法在類別裡最有效,因為成員共用同一個環境,方法能直接取用它們。
- 想消除重複計算:把計算變成方法,別的方法也能共用同一段邏輯,不必各抄一份。
- 想畫清邊界:計算邏輯自成一個方法,和呼叫它的函式之間界線分明。
- 想精簡函式:抽出計算後,原函式少一個區域變數要照顧。
WARNING
只適合「被計算一次、之後皆為讀取」的暫存變數,不適合快照(snapshot)變數——那種存的是某個時間點的狀態,改成每次重算意義就變了。
⚖️ Refactoring
機械步驟:① 確認變數在使用前已完全算定、且計算每次都給相同結果 → ② 把計算式抽成一個方法(查詢) → ③ 把對變數的引用改成呼叫該方法 → ④ 測試 → ⑤ 移除原本的暫存變數。
前 — 一串暫存變數承載中間計算
const originalPrice = 200;
const discountRate = 0.15;
const discountAmount = originalPrice * discountRate;
const discountedPrice = originalPrice - discountAmount;
console.log(`Discounted price: ${discountedPrice}`);discountAmount、discountedPrice 是散落的暫存變數,計算邏輯無法被其他地方共用。
後 — 暫存變數升級成查詢方法
class PriceCalculator {
constructor(originalPrice, discountRate) {
this.originalPrice = originalPrice;
this.discountRate = discountRate;
}
discountAmount() {
return this.originalPrice * this.discountRate;
}
discountedPrice() {
return this.originalPrice - this.discountAmount();
}
}
const calculator = new PriceCalculator(200, 0.15);
console.log(`Discounted price: ${calculator.discountedPrice()}`);計算搬進共用環境的方法裡,discountedPrice() 直接呼叫 discountAmount()——邏輯有了明確邊界,也可被類別內其他方法重用。
NOTE
若只是想在單一函式內把難懂的表達式命名清楚,用 Extract Variable 就夠了;當這段計算值得跨方法共用、且屬於某個類別時,才升級成查詢。
🔑 Takeaways
- Replace Temp with Query 把只算一次、之後純讀取的暫存變數升級成方法。
- 好處:消除重複計算、畫清邏輯邊界、精簡原函式的參數與變數。
- 在類別裡最有效,因為成員共用環境。
- 不要對快照變數用——它記的是某時間點的狀態。
- 只想就地命名時用 Extract Variable;要跨方法共用才用查詢。
No notes yet — jot your takeaways or Q&A here.