本文探討如何在 JavaScript 代碼中運(yùn)用強(qiáng)類型語(yǔ)言的技巧。這些技巧不僅能減少代碼錯(cuò)誤，還能縮減代碼量。雖然本文以 JavaScript 為例，但這些技巧也適用於大多數(shù)弱類型語(yǔ)言。

關(guān)鍵要點(diǎn)：

• 在 JavaScript 中應(yīng)用強(qiáng)類型語(yǔ)言的技巧可以減少 bug 並縮減代碼量。
• “一致類型規(guī)則”（規(guī)定所有值只有一種類型）可以應(yīng)用於 JavaScript 以提高代碼質(zhì)量和可讀性。
• 應(yīng)在模塊邊緣執(zhí)行類型檢查和類型轉(zhuǎn)換，以防止隱式類型強(qiáng)制轉(zhuǎn)換導(dǎo)致的 bug 並簡(jiǎn)化代碼。
• 應(yīng)仔細(xì)考慮在 JavaScript 中使用“null”和“undefined”，尤其是在處理對(duì)象和數(shù)組等引用類型時(shí)。
• TypeScript 是一個(gè)推薦用於在 JavaScript 中強(qiáng)制執(zhí)行更強(qiáng)類型語(yǔ)義的工具，它具有早期錯(cuò)誤檢測(cè)和更清晰的代碼文檔等優(yōu)點(diǎn)。

JavaScript 類型系統(tǒng)

首先快速回顧一下 JavaScript 數(shù)據(jù)類型系統(tǒng)的工作原理。 JavaScript 將其值分為兩類：

• 原始類型，例如 String、Number 和 Boolean。將原始類型賦值給變量時(shí)，始終會(huì)創(chuàng)建一個(gè)新值，它是所賦值值的副本。
• 引用類型，例如 Object 和 Array。賦值引用類型始終複製相同的引用。為了闡明這一點(diǎn)，讓我們來看下面的代碼示例：

var a = [];
var b = a;

a.push('Hello');

當(dāng)我們更改 a 時(shí)，變量 b 也會(huì)發(fā)生變化，因?yàn)樗鼈兌家猛粋€(gè)數(shù)組。所有引用類型的工作方式都是如此。 JavaScript 不會(huì)強(qiáng)制執(zhí)行任何類型，這意味著任何變量都可以在任何時(shí)候保存任何數(shù)據(jù)類型。本文其餘部分將討論此方法的缺點(diǎn)，以及如何應(yīng)用強(qiáng)制執(zhí)行類型的語(yǔ)言中的簡(jiǎn)單技巧來編寫更好的 JavaScript 代碼。

引入一致類型規(guī)則

一致類型規(guī)則在理論上很簡(jiǎn)單：所有值都應(yīng)該只有一種類型。強(qiáng)類型語(yǔ)言在編譯器級(jí)別強(qiáng)制執(zhí)行此規(guī)則，它們不允許您隨意混合和匹配類型。弱類型賦予我們很大的自由度。一個(gè)常見的例子是將數(shù)字連接到字符串中。您不需要執(zhí)行像在 C 等語(yǔ)言中那樣繁瑣的類型轉(zhuǎn)換。別擔(dān)心，我不會(huì)告訴您放棄所有便利。一致類型規(guī)則只需要您注意變量和函數(shù)的行為方式，這樣您的代碼就會(huì)得到改進(jìn)。

變量中的類型

首先，讓我們看看該規(guī)則如何應(yīng)用於變量。它非常簡(jiǎn)單：您的變量應(yīng)該始終只有一種類型。

var a = [];
var b = a;

a.push('Hello');

上面的示例顯示了問題所在。此規(guī)則要求我們假裝此示例中的最後一行代碼會(huì)拋出錯(cuò)誤，因?yàn)楫?dāng)我們第一次定義變量 text 時(shí)，我們賦予它字符串類型的 value，現(xiàn)在我們正在為其賦值一個(gè)數(shù)字。一致類型規(guī)則意味著我們不允許這樣更改變量的類型。當(dāng)您的變量一致時(shí)，更容易推斷您的代碼。它尤其有助於更長(zhǎng)的函數(shù)，在這些函數(shù)中，很容易忽略變量的來源。當(dāng)在不遵守此規(guī)則的代碼庫(kù)中工作時(shí)，我意外地導(dǎo)致了許多錯(cuò)誤，因?yàn)槲铱吹铰暶髁艘粋€(gè)變量，然後假設(shè)它會(huì)保持相同的類型——因?yàn)樽屛覀兠鎸?duì)現(xiàn)實(shí)，這有意義，不是嗎？通常沒有理由將不同的類型分配給同一個(gè)變量。

函數(shù)參數(shù)中的類型

相同的規(guī)則也適用於此。函數(shù)的參數(shù)也應(yīng)該保持一致。一個(gè)錯(cuò)誤的例子：

var text = 'Hello types';

// 錯(cuò)誤！不要這樣做！
text = 1;

這裡有什麼問題？通常認(rèn)為，根據(jù)類型檢查來分支邏輯是不好的做法。對(duì)此有一些例外，但通常更好的選擇是使用多態(tài)性。您應(yīng)該努力確保函數(shù)參數(shù)也只有一種類型。如果您忘記考慮不同的類型，它會(huì)減少出現(xiàn)問題的可能性，並使代碼更簡(jiǎn)單，因?yàn)槟槐鼐帉懘a來處理所有不同類型的案例。編寫 sum 函數(shù)的更好方法如下：

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}

然後，您在調(diào)用代碼中而不是在函數(shù)中處理類型檢查。從上面可以看出，該函數(shù)現(xiàn)在簡(jiǎn)單多了。即使我們必須將類型檢查移動(dòng)到其他地方，我們?cè)皆缭诖a中執(zhí)行它們，效果就越好。我們將在本文後面討論類型檢查和 typeof 的使用，包括如果使用不當(dāng)，類型檢查如何輕鬆級(jí)聯(lián)。

函數(shù)返回值中的類型

這與其他兩個(gè)相關(guān)：您的函數(shù)應(yīng)該始終返回相同類型的 value。我們可以在這裡舉 AngularJS 的一個(gè)例子。 AngularJS 提供了一個(gè)將文本轉(zhuǎn)換為小寫的函數(shù)，稱為 angular.lowercase。還有一個(gè)標(biāo)準(zhǔn)函數(shù)，String.prototype.toLowerCase。我們可以比較它們的行為來更好地理解規(guī)則的這一部分：

function sum(a, b) {
  return a + b;
}

變量 a 將包含您期望的內(nèi)容：“hello types”。但是，b 將包含什麼？它將是一個(gè)空字符串嗎？函數(shù)會(huì)拋出異常嗎？或者它可能只是 null？在這種情況下，b 的 value 為 null。請(qǐng)注意，立即很難猜測(cè)結(jié)果是什麼——我們一開始就有三種可能的結(jié)果。對(duì)於 Angular 函數(shù)，對(duì)於非字符串值，它將始終返回輸入?，F(xiàn)在，讓我們看看內(nèi)置函數(shù)的行為：

var a = [];
var b = a;

a.push('Hello');

第一次調(diào)用的結(jié)果相同，但第二次調(diào)用會(huì)拋出異常。內(nèi)置函數(shù)遵循一致類型規(guī)則，並且不允許不正確的參數(shù)類型。返回值也始終是一個(gè)字符串。所以我們可以說內(nèi)置函數(shù)更好，但您可能想知道究竟是如何做到這一點(diǎn)的？讓我們考慮一下此類函數(shù)的典型用例。我們?cè)诖a中的某個(gè)點(diǎn)使用它來將字符串轉(zhuǎn)換為小寫。正如 JavaScript 代碼中經(jīng)常發(fā)生的那樣，我們不能 100% 確定我們的輸入是否總是字符串。沒關(guān)係，因?yàn)槲覀兪莾?yōu)秀的程序員，我們假設(shè)我們的代碼沒有任何錯(cuò)誤。如果我們使用不遵守這些規(guī)則的 AngularJS 函數(shù)會(huì)發(fā)生什麼？非字符串值會(huì)毫無問題地通過它。它可能會(huì)通過幾個(gè)函數(shù)，我們甚至可能會(huì)通過 XMLHttpRequest 調(diào)用發(fā)送它。現(xiàn)在錯(cuò)誤的值在我們的服務(wù)器中，並最終進(jìn)入數(shù)據(jù)庫(kù)。您可以看到我的意思，對(duì)吧？如果我們使用遵守規(guī)則的內(nèi)置函數(shù)，我們會(huì)在那時(shí)立即發(fā)現(xiàn)該錯(cuò)誤。每當(dāng)您編寫函數(shù)時(shí)，請(qǐng)確保其返回的類型一致。下面顯示了一個(gè)不好的例子：

var text = 'Hello types';

// 錯(cuò)誤！不要這樣做！
text = 1;

同樣，與變量和參數(shù)一樣，如果我們有這樣的函數(shù)，我們就無法對(duì)它的行為做出假設(shè)。我們將需要使用 if 來檢查返回 value 的類型。我們可能會(huì)在某個(gè)時(shí)候忘記它，然後我們手中就會(huì)出現(xiàn)另一個(gè)錯(cuò)誤。我們可以通過多種方式重寫它，以下是一種解決此問題的方法：

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}

這次我們確保所有路徑都返回一個(gè)字符串?，F(xiàn)在更容易推斷函數(shù)的結(jié)果了。

null 和 undefined 是特殊的

到目前為止，我們實(shí)際上只討論了原始類型。當(dāng)涉及到對(duì)象和數(shù)組時(shí)，您應(yīng)該遵循相同的規(guī)則，但需要注意兩個(gè)特殊情況。處理引用類型時(shí)，有時(shí)需要指示沒有 value。一個(gè)很好的例子是 document.getElementById。如果找不到匹配的元素，它將返回 null。這就是為什麼我們將 null 視為與任何對(duì)像或數(shù)組共享類型的原因，但僅限於那些對(duì)像或數(shù)組。您應(yīng)該避免從可能返回 Number 等原始值的函數(shù)中返回 null。 undefined 也可以被認(rèn)為是引用的“無值”。出於大多數(shù)目的，它可以被視為等於 null，但由於其在其他面向?qū)ο笳Z(yǔ)言中的語(yǔ)義，null 更為可取。

數(shù)組和 null

使用數(shù)組時(shí)，您還應(yīng)該考慮空數(shù)組通常比 null 更好。儘管數(shù)組是引用類型，您可以使用 null 與它們一起使用，但通常返回空數(shù)組更有意義。讓我們來看下面的例子：

var a = [];
var b = a;

a.push('Hello');

這可能是數(shù)組最常見的用法之一。您從函數(shù)中獲取一個(gè)數(shù)組，然後對(duì)其進(jìn)行迭代以執(zhí)行其他操作。如果 getListOfItems 在沒有項(xiàng)目時(shí)返回 null，上面的代碼會(huì)發(fā)生什麼？它會(huì)拋出錯(cuò)誤，因?yàn)?null 沒有長(zhǎng)度（或任何其他屬性）。當(dāng)您考慮像這樣使用數(shù)組，甚至是 list.forEach 或 list.map 時(shí)，您可以看到當(dāng)沒有值時(shí)返回空數(shù)組通常是一個(gè)好主意。

類型檢查和類型轉(zhuǎn)換

讓我們更詳細(xì)地了解類型檢查和類型轉(zhuǎn)換。您應(yīng)該何時(shí)進(jìn)行類型檢查？您應(yīng)該何時(shí)進(jìn)行類型轉(zhuǎn)換？

類型轉(zhuǎn)換

類型轉(zhuǎn)換的第一個(gè)目標(biāo)應(yīng)該是確保您的值的類型正確。數(shù)值應(yīng)該是數(shù)字而不是字符串，依此類推。第二個(gè)目標(biāo)應(yīng)該是您只需要轉(zhuǎn)換一次 value。進(jìn)行類型轉(zhuǎn)換的最佳位置是在源處。例如，如果您從服務(wù)器獲取數(shù)據(jù)，則應(yīng)該在處理接收到的數(shù)據(jù)的函數(shù)中進(jìn)行任何必要的類型轉(zhuǎn)換。從 DOM 解析數(shù)據(jù)是一個(gè)非常常見的錯(cuò)誤開始出現(xiàn)的地方。假設(shè)您有一個(gè)包含數(shù)字的文本框，並且您想讀取它。或者，它可能只是某個(gè) HTML 元素中的屬性，它甚至不必是用戶輸入。

var text = 'Hello types';

// 錯(cuò)誤！不要這樣做！
text = 1;

由於您可以從 DOM 獲取的值通常是字符串，因此在讀取它們時(shí)進(jìn)行類型轉(zhuǎn)換非常重要。在某種程度上，您可以將其視為模塊的“邊緣”。數(shù)據(jù)通過讀取它的函數(shù)進(jìn)入您的 JavaScript 模塊，因此它必須將數(shù)據(jù)轉(zhuǎn)換為正確的格式。通過在模塊邊緣進(jìn)行類型轉(zhuǎn)換，我們確保內(nèi)部不必處理它。這在很大程度上減少了隱式類型強(qiáng)制轉(zhuǎn)換導(dǎo)致錯(cuò)誤的可能性。它還允許我們編寫更少的代碼，因?yàn)槲覀儾辉试S錯(cuò)誤的值從邊緣進(jìn)入模塊。

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}

typeof 和類型檢查

您應(yīng)該只將 typeof 用於驗(yàn)證，而不是根據(jù)類型分支邏輯。對(duì)此有一些例外，但這是一個(gè)很好的經(jīng)驗(yàn)法則。讓我們來看兩個(gè)例子：

function sum(a, b) {
  return a + b;
}

這是一個(gè)使用 typeof 進(jìn)行驗(yàn)證的示例。我們確保傳遞給函數(shù)的參數(shù)是正確的類型。但是，下面的示例顯示了根據(jù)類型分支邏輯的含義。

var a = [];
var b = a;

a.push('Hello');

不要這樣做。雖然有時(shí)可能需要這樣做，但這通常是設(shè)計(jì)不良的標(biāo)誌。如果您發(fā)現(xiàn)自己經(jīng)常執(zhí)行這種邏輯，那麼您可能應(yīng)該在代碼的早期將 value 轉(zhuǎn)換為正確的類型。如果您最終在代碼中使用了大量 typeof，這可能表示您可能需要轉(zhuǎn)換要比較的值。類型檢查通常會(huì)擴(kuò)散，這通常是關(guān)於類型的設(shè)計(jì)不良的標(biāo)誌。如前所述，您應(yīng)該嘗試在模塊邊緣進(jìn)行類型轉(zhuǎn)換，因?yàn)樗试S您避免 typeof 級(jí)聯(lián)。如果您儘早進(jìn)行轉(zhuǎn)換，則之後調(diào)用的任何函數(shù)都不必進(jìn)行類型檢查或類型轉(zhuǎn)換。這也適用於對(duì)象：如果您發(fā)現(xiàn)自己使用 instanceof 進(jìn)行大量檢查或檢查對(duì)像上是否存在屬性，則表示您可能應(yīng)該以不同的方式構(gòu)造數(shù)據(jù)。與 typeof 相同的規(guī)則也適用於 instanceof：您應(yīng)該嘗試避免它，因?yàn)樗赡苁窃O(shè)計(jì)不良的標(biāo)誌。但是，有一種情況是不可避免的：

var text = 'Hello types';

// 錯(cuò)誤！不要這樣做！
text = 1;

如果您的代碼需要對(duì)異常類型進(jìn)行特定處理，instanceof 通常是一個(gè)不錯(cuò)的選擇，因?yàn)?JavaScript catch 不允許像其他一些語(yǔ)言那樣按類型區(qū)分。在大多數(shù)其他情況下，您應(yīng)該嘗試避免 instanceof。

結(jié)論

正如我們所發(fā)現(xiàn)的，JavaScript 的弱類型為我們帶來了極大的自由，但我們也必須謹(jǐn)慎行事。否則，我們將最終陷入一個(gè)類型混亂的局面，沒有任何意義。通過確保我們的代碼遵循一致類型規(guī)則，我們可以避免很多麻煩。當(dāng)我們知道類型時(shí)，更容易推斷我們的代碼。我們不必在代碼中構(gòu)建許多類型檢查來防止錯(cuò)誤。如果您沒有使用強(qiáng)類型語(yǔ)言，這似乎很困難，但在您需要調(diào)試或維護(hù)代碼時(shí)，它會(huì)得到很大的回報(bào)。有關(guān)該主題的更多信息，我建議您查看 TypeScript。它是一種類似於 JavaScript 的語(yǔ)言，但它為該語(yǔ)言添加了更強(qiáng)的類型語(yǔ)義。它還有一個(gè)編譯器，當(dāng)您嘗試執(zhí)行一些愚蠢的操作（例如混合和匹配類型）時(shí)，它會(huì)吐出錯(cuò)誤。

關(guān)於 JavaScript 中強(qiáng)類型語(yǔ)言的常見問題解答 (FAQ)

強(qiáng)類型語(yǔ)言和弱類型語(yǔ)言有什麼區(qū)別？

強(qiáng)類型語(yǔ)言是指變量綁定到特定數(shù)據(jù)類型的語(yǔ)言，任何與該類型不一致的操作都會(huì)導(dǎo)致錯(cuò)誤。示例包括 Java 和 C 。另一方面，像 JavaScript 這樣的弱類型語(yǔ)言允許變量保存任何類型的數(shù)據(jù)，並且在必要時(shí)會(huì)自動(dòng)進(jìn)行類型轉(zhuǎn)換。如果處理不當(dāng)，這種靈活性可能會(huì)導(dǎo)致意想不到的結(jié)果。

如何在 JavaScript 中強(qiáng)制執(zhí)行強(qiáng)類型？

JavaScript 本身是一種弱類型語(yǔ)言，但您可以使用 TypeScript（JavaScript 的靜態(tài)類型超集）來強(qiáng)制執(zhí)行強(qiáng)類型。 TypeScript 為 JavaScript 添加了靜態(tài)類型，允許在編譯時(shí)進(jìn)行類型檢查。這有助於在開發(fā)過程的早期發(fā)現(xiàn)錯(cuò)誤。 “嚴(yán)格模式”是 JavaScript 中的另一個(gè)方法，它通過為不安全的動(dòng)作拋出錯(cuò)誤來使語(yǔ)言的行為更像強(qiáng)類型語(yǔ)言。

使用強(qiáng)類型語(yǔ)言的好處是什麼？

強(qiáng)類型語(yǔ)言提供了一些好處。它們可以幫助在編譯時(shí)而不是運(yùn)行時(shí)捕獲錯(cuò)誤，這可以節(jié)省大量調(diào)試時(shí)間。它們還使代碼更具自文檔性，因?yàn)樽兞康臄?shù)據(jù)類型清楚地表明了它們的使用方式。此外，它們可以使代碼更可預(yù)測(cè)且更容易推斷，因?yàn)樗鼈兛梢苑乐挂馔獾念愋娃D(zhuǎn)換。

我可以將 JavaScript 用作強(qiáng)類型語(yǔ)言嗎？

雖然 JavaScript 默認(rèn)情況下不是強(qiáng)類型語(yǔ)言，但您可以使用 TypeScript 或 Flow 等工具來強(qiáng)制執(zhí)行強(qiáng)類型。這些工具為 JavaScript 添加了靜態(tài)類型，允許在編譯時(shí)進(jìn)行類型檢查。這有助於在開發(fā)過程的早期發(fā)現(xiàn)錯(cuò)誤。但是，需要注意的是，這些工具不會(huì)改變 JavaScript 的底層性質(zhì)；它們只是在它之上提供了一層類型安全性。

什麼是 TypeScript，它與 JavaScript 的關(guān)係如何？

TypeScript 是由 Microsoft 開發(fā)的 JavaScript 靜態(tài)類型超集。它為 JavaScript 添加了靜態(tài)類型，允許在編譯時(shí)進(jìn)行類型檢查。這有助於在開發(fā)過程的早期發(fā)現(xiàn)錯(cuò)誤。 TypeScript 代碼被轉(zhuǎn)換為 JavaScript，這意味著它可以在任何 JavaScript 運(yùn)行的地方運(yùn)行。它與 JavaScript 完全兼容，可以使用 JavaScript 的所有功能。

使用強(qiáng)類型語(yǔ)言的缺點(diǎn)是什麼？

雖然強(qiáng)類型語(yǔ)言提供了許多好處，但它們也有一些缺點(diǎn)。它們可能更冗長(zhǎng)，需要更多代碼才能完成與弱類型語(yǔ)言相同的任務(wù)。它們還需要一個(gè)編譯步驟，這可能會(huì)減慢開發(fā)過程。此外，它們可能不太靈活，並且對(duì)於某些任務(wù)（例如處理動(dòng)態(tài)數(shù)據(jù)）更難使用。

JavaScript 中的“嚴(yán)格模式”是如何工作的？

“嚴(yán)格模式”是 JavaScript 中的一項(xiàng)功能，它使語(yǔ)言的行為更像強(qiáng)類型語(yǔ)言。它會(huì)為不安全的動(dòng)作拋出錯(cuò)誤，例如為只讀屬性賦值或在聲明之前使用變量。這有助於在開發(fā)過程的早期發(fā)現(xiàn)錯(cuò)誤。要啟用“嚴(yán)格模式”，只需在 JavaScript 文件或函數(shù)的頂部添加“use strict；”一行即可。

什麼是 JavaScript 中的類型強(qiáng)制？

類型強(qiáng)制是 JavaScript 中的一項(xiàng)功能，其中語(yǔ)言在必要時(shí)會(huì)自動(dòng)將一種數(shù)據(jù)類型轉(zhuǎn)換為另一種數(shù)據(jù)類型。例如，如果您嘗試添加數(shù)字和字符串，JavaScript 將在執(zhí)行加法之前將數(shù)字轉(zhuǎn)換為字符串。雖然這很方便，但如果處理不當(dāng)，它也可能導(dǎo)致意想不到的結(jié)果。

如何避免 JavaScript 中的類型強(qiáng)制？

避免 JavaScript 中類型強(qiáng)制的一種方法是使用“嚴(yán)格模式”，它會(huì)為不安全的動(dòng)作拋出錯(cuò)誤。另一種方法是使用“===”運(yùn)算符而不是“==”運(yùn)算符進(jìn)行比較，因?yàn)榍罢卟粓?zhí)行類型強(qiáng)制。此外，您可以使用 TypeScript 或 Flow 等工具為 JavaScript 添加靜態(tài)類型，這有助於在編譯時(shí)捕獲與類型相關(guān)的錯(cuò)誤。

強(qiáng)類型語(yǔ)言在 JavaScript 中的未來如何？

強(qiáng)類型語(yǔ)言在 JavaScript 中的使用可能會(huì)在未來增加，因?yàn)樗鼈兲峁┝嗽S多好處，例如儘早捕獲錯(cuò)誤並使代碼更可預(yù)測(cè)。 TypeScript 和 Flow 等工具越來越流行，並且正在開發(fā)新的工具和功能以使 JavaScript 更具類型安全性。但是，JavaScript 的靈活性和動(dòng)態(tài)性將使其繼續(xù)成為許多開發(fā)人員的首選。

以上是JS中強(qiáng)烈打字的語(yǔ)言借用技術(shù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！