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

關(guān)鍵要點：

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

JavaScript 類型系統(tǒng)

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

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

var a = [];
var b = a;

a.push('Hello');

當我們更改 a 時，變量 b 也會發(fā)生變化，因為它們都引用同一個數(shù)組。所有引用類型的工作方式都是如此。 JavaScript 不會強制執(zhí)行任何類型，這意味著任何變量都可以在任何時候保存任何數(shù)據(jù)類型。本文其餘部分將討論此方法的缺點，以及如何應用強制執(zhí)行類型的語言中的簡單技巧來編寫更好的 JavaScript 代碼。

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

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

變量中的類型

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

var a = [];
var b = a;

a.push('Hello');

上面的示例顯示了問題所在。此規(guī)則要求我們假裝此示例中的最後一行代碼會拋出錯誤，因為當我們第一次定義變量 text 時，我們賦予它字符串類型的 value，現(xiàn)在我們正在為其賦值一個數(shù)字。一致類型規(guī)則意味著我們不允許這樣更改變量的類型。當您的變量一致時，更容易推斷您的代碼。它尤其有助於更長的函數(shù)，在這些函數(shù)中，很容易忽略變量的來源。當在不遵守此規(guī)則的代碼庫中工作時，我意外地導致了許多錯誤，因為我看到聲明了一個變量，然後假設它會保持相同的類型——因為讓我們面對現(xiàn)實，這有意義，不是嗎？通常沒有理由將不同的類型分配給同一個變量。

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

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

var text = 'Hello types';

// 錯誤！不要這樣做！
text = 1;

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

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

  return a + b;
}

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

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

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

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

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

var a = [];
var b = a;

a.push('Hello');

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

var text = 'Hello types';

// 錯誤！不要這樣做！
text = 1;

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

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

  return a + b;
}

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

null 和 undefined 是特殊的

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

數(shù)組和 null

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

var a = [];
var b = a;

a.push('Hello');

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

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

讓我們更詳細地了解類型檢查和類型轉(zhuǎn)換。您應該何時進行類型檢查？您應該何時進行類型轉(zhuǎn)換？

類型轉(zhuǎn)換

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

var text = 'Hello types';

// 錯誤！不要這樣做！
text = 1;

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

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

  return a + b;
}

typeof 和類型檢查

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

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

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

var a = [];
var b = a;

a.push('Hello');

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

var text = 'Hello types';

// 錯誤！不要這樣做！
text = 1;

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

結(jié)論

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

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

強類型語言和弱類型語言有什麼區(qū)別？

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

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

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

使用強類型語言的好處是什麼？

強類型語言提供了一些好處。它們可以幫助在編譯時而不是運行時捕獲錯誤，這可以節(jié)省大量調(diào)試時間。它們還使代碼更具自文檔性，因為變量的數(shù)據(jù)類型清楚地表明了它們的使用方式。此外，它們可以使代碼更可預測且更容易推斷，因為它們可以防止意外的類型轉(zhuǎn)換。

我可以將 JavaScript 用作強類型語言嗎？

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

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

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

使用強類型語言的缺點是什麼？

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

JavaScript 中的“嚴格模式”是如何工作的？

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

什麼是 JavaScript 中的類型強制？

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

如何避免 JavaScript 中的類型強制？

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

強類型語言在 JavaScript 中的未來如何？

強類型語言在 JavaScript 中的使用可能會在未來增加，因為它們提供了許多好處，例如儘早捕獲錯誤並使代碼更可預測。 TypeScript 和 Flow 等工具越來越流行，並且正在開發(fā)新的工具和功能以使 JavaScript 更具類型安全性。但是，JavaScript 的靈活性和動態(tài)性將使其繼續(xù)成為許多開發(fā)人員的首選。

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