每位 Web 開發者都應該知道的 7 個 JavaScript 基礎知識

• 原文地址：7 JavaScript Fundamentals Every Web Developer Should Know
• 原文做者：Cristian Salcescu
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Hyde Song
• 校對者：PassionPenguin、greycodee

在本文中，咱們將討論我認爲 JavaScript 最重要、最獨特的一些特性。

一、函數是獨立的行爲單元

函數是基本單位，但這裏重要的一點是，函數是獨立的！在 Java 或 C# 等其餘語言中，函數必須在類內聲明，但在 JavaScript 中不是這樣的。

函數能夠在全局中被定義，也能夠在模塊裏定義爲可重用的單位。

二、對象是屬性的動態集合

對象實際上只是屬性的集合。在其餘語言中，它們被稱爲 Map、HashMap 或 HashTable。

對象是動態的，即一旦建立，就能夠添加、編輯或刪除屬性。

下面是一個使用字面量語法定義的簡單對象。它有兩個屬性：

const game = {
  title : 'Settlers',
  developer: 'Ubisoft'
}
複製代碼

三、對象繼承自其餘對象

若是你曾經使用的語言是相似於 Java 或 C# 等基於 class 的語言，你可能習慣於從其餘 class 繼承 class。可是，JavaScript 不是這樣的。

對象繼承自稱爲 prototypes 的對象。

如前所述，在這種語言中，對象是屬性的集合。當建立一個對象時，他有一個名爲 __proto__ 的隱藏屬性，它引用其餘對象。這個被引用的對象稱爲 prototype。

下面是一個建立空對象的例子（能夠說，沒有屬性的對象）：

const obj = {};
複製代碼

即便 obj 看起來是空的沒有任何屬性，它實際上也是有一個隱藏屬性 __proto__ 的：

obj.__proto__ === Object.prototype;
//true
複製代碼

在這類對象上，咱們能夠訪問尚未定義的方法，例如 toString 方法，即便咱們尚未定義這樣的方法。這怎麼可能呢？

此方法繼承自 Object.prototype。當嘗試訪問該方法時，JS 引擎首先嚐試在當前對象上查找該方法，而後再查找其原型上的屬性。

不要被 class 關鍵字誤導了。class 只是原型系統的語法糖，幫助來自基於 class 語言的開發者熟悉 JavaScript。

四、函數就是值

在 JavaScript 中，函數就是值。就像其餘值同樣，函數能夠賦值給變量：

const sum = function(x,y){ return x + y }
複製代碼

這在其餘編程語言中是作不到的。

與其餘值同樣，函數能夠傳遞給不一樣的函數或被函數返回。下面是一個函數返回另外一個函數的示例：

function startsWith(text){
  return function(name){
    return name.startsWith(text);
  }
}

const games = ['Fornite', 'Overwatch', 'Valorant'];
const newGames = games.filter(startsWith('Fo'));
console.log(newGames);
//["Fornite"]
複製代碼

在同一個示例中，咱們能夠看到 startsWith 函數返回的函數是如何做爲參數發送到 filter 數組方法的。

五、函數能夠閉包

函數內部能夠定義函數。內部函數能夠引用其餘函數的變量。

並且，外部函數執行後，內部函數能夠引用外部函數的變量。下面是關於這方面的例子；

function createCounter(){
  let x = 0;
  return function(){
    x = x + 1;
    return x;
  }
}

const count = createCounter();
console.log(count());//1
console.log(count());//2
console.log(count());//3
複製代碼

count 函數能夠從 createCounter 父函數訪問 x 變量，即便在執行以後也是如此。count 就是閉包函數。

六、基本數據類型被視爲對象

JavaScript 把基本類型看成對象，從而給人一種錯覺。實際上，基本類型並非對象. 基本類型不是屬性的集合。

然而，咱們能夠在基本類型上調用方法。好比，咱們能夠在字符串上調用 toUpperCase 方法：

const upperText = 'Minecraft'.toUpperCase();
console.log(upperText);
//'MINECRAFT'
複製代碼

像 Minecraft 這樣的簡單文本是基本類型，自身沒有任何方法。不過 JavaScript 會使用內置的 String 構造函數將其轉換爲對象，而後咱們就可以對新建立的對象執行 toUpperCase 方法。

經過在底層把基本類型轉換爲包裝對象，JavaScript 容許你調用方法，從而視它們爲對象。

七、JavaScript 是一種單線程語言

JavaScript 單線程的。這意味着在特定時間只執行一條語句。

在主線程中，兩個函數不能同時執行。

你也許據說過像 web workers 這種並行執行函數的方式，可是 workers 不會和主線程共享數據。它們只經過信息傳遞來通訊 —— 什麼都不是共享的。

這就容易理解了，咱們只須要注意讓函數執行更快就行了。耗費長時間去執行一個函數會讓頁面無響應。

謝謝閱讀。編碼快樂!

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。