JavaScript 對象基礎知識

在本文中，我們将介紹基本的 JavaScript 對象文法，并重新審視我們在課程前面已經看到的一些 JavaScript 功能，重申您已經處理過的許多功能都是對象這一事實。

先決條件：	基本的計算機知識，對HTML和CSS的基本了解，熟悉JavaScript基礎知識（請參閱第一步和建構塊）。
目的：	了解在 JavaScript 中使用對象的基礎知識：建立對象、通路和修改對象屬性以及使用構造函數。

對象基礎知識

對象是相關資料和/或功能的集合。這些通常由幾個變量和函數組成（當它們位于對象内部時，稱為屬性和方法）。讓我們通過一個示例來了解它們的外觀。

首先，建立我們的oojs.html檔案的本地副本。這包含很少 - 一個<腳本>元素，供我們将源代碼寫入其中。我們将以此為基礎來探索基本對象文法。在使用此示例時，您應該打開開發人員工具 JavaScript 控制台，并準備好鍵入某些指令。

與JavaScript中的許多事情一樣，建立對象通常從定義和初始化變量開始。嘗試在檔案中已有的 JavaScript 代碼下方輸入以下行，然後儲存并重新整理：

const person = {};

複制到剪貼闆

現在打開浏覽器的 JavaScript 控制台，進入它，然後按 /。您應獲得類似于以下行之一的結果：

person

EnterReturn

[object Object]
Object { }
{ }

複制到剪貼闆

恭喜，您剛剛建立了第一個對象。工作完成！但這是一個空的物體，是以我們不能真正用它做很多事情。讓我們更新檔案中的 JavaScript 對象，如下所示：

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  bio: function() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

複制到剪貼闆

儲存并重新整理後，請嘗試在浏覽器 devtools 上的 JavaScript 控制台中輸入以下一些内容：

person.name
person.name[0]
person.age
person.bio()
person.introduceSelf()

複制到剪貼闆

現在，您的對象中已經有了一些資料和功能，現在可以使用一些漂亮的簡單文法通路它們！

這到底是怎麼回事呢？好吧，一個對象由多個成員組成，每個成員都有一個名稱（例如和更高版本），以及一個值（例如和）。每個名稱/值對必須用逗号分隔，每種情況下的名稱和值都用冒号分隔。文法始終遵循以下模式：

name

age

['Bob', 'Smith']

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

複制到剪貼闆

對象成員的值幾乎可以是任何東西 - 在我們的人對象中，我們有一個數字，一個數組和兩個函數。前兩項是資料項，稱為對象的屬性。最後兩項是允許對象對該資料執行某些操作的函數，稱為對象的方法。

當對象的成員是函數時，有一個更簡單的文法。而不是我們可以寫.喜歡這個：

bio: function()

bio()

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

複制到剪貼闆

從現在開始，我們将使用這種較短的文法。

像這樣的對象被稱為對象文字 - 我們已經從字面上寫出了對象内容，因為我們來建立它。這與從類執行個體化的對象相比是不同的，我們稍後将介紹這些對象。

當您想要以某種方式傳輸一系列結構化的相關資料項時，例如，向伺服器發送要放入資料庫的請求時，使用對象文本建立對象是很常見的。發送單個對象比單獨發送多個項目要高效得多，并且當您想要按名稱辨別單個項目時，它比數組更容易使用。

點表示法

在上面，您使用點表示法通路了對象的屬性和方法。對象名稱（人）充當命名空間 - 必須首先輸入它才能通路對象内的任何内容。接下來，你寫一個點，然後寫一個你想通路的項——這可以是一個簡單的屬性的名稱，一個數組屬性的一個項目，或者是對對象的某個方法的調用，例如：

person.age
person.bio()

複制到剪貼闆

對象作為對象屬性

對象屬性本身可以是對象。例如，嘗試将成員從

name

name: ['Bob', 'Smith'],

複制到剪貼闆

自

name : {
  first: 'Bob',
  last: 'Smith'
},

複制到剪貼闆

要通路這些項目，您隻需将額外的步驟連結到末尾，并用另一個點。在 JS 控制台中嘗試以下操作：

person.name.first
person.name.last

複制到剪貼闆

如果這樣做，則還需要周遊方法代碼并更改

name[0]
name[1]

複制到剪貼闆

自

name.first
name.last

複制到剪貼闆

否則，您的方法将不再有效。

括号表示法

還有另一種通路對象屬性的方法 — 使用括号表示法。而不是使用這些：

person.age
person.name.first

複制到剪貼闆

您可以使用

person['age']
person['name']['first']

複制到剪貼闆

這看起來與您通路數組中項目的方式非常相似，并且基本上是相同的 - 您使用的是與每個成員的值關聯的名稱，而不是使用索引号來選擇項目。難怪對象有時被稱為關聯數組 - 它們将字元串映射到值的方式與數組将數字映射到值的方式相同。

設定對象成員

到目前為止，我們隻研究了檢索（或擷取）對象成員 - 您還可以通過聲明要設定的成員（使用點或括号表示法）來設定（更新）對象成員的值，如下所示：

person.age = 45;
person['name']['last'] = 'Cratchit';

複制到剪貼闆

嘗試輸入上面的行，然後再次讓成員檢視他們是如何變化的，如下所示：

person.age
person['name']['last']

複制到剪貼闆

設定成員不僅僅停留在更新現有屬性和方法的值上;您還可以建立全新的成員。在 JS 控制台中嘗試以下操作：

person['eyes'] = 'hazel';
person.farewell = function() {
  console.log('Bye everybody!');
}

複制到剪貼闆

您現在可以測試您的新成員：

person['eyes']
person.farewell()

複制到剪貼闆

括号表示法的一個有用方面是，它不僅可以動态地設定成員值，還可以用于設定成員名稱。假設我們希望使用者能夠通過在兩個文本輸入中鍵入成員名稱和值，在其人員資料中存儲自定義值類型。我們可以得到這樣的值：

const myDataName = nameInput.value;
const myDataValue = nameValue.value;

複制到剪貼闆

然後，我們可以将此新成員名稱和值添加到對象中，如下所示：

person

person[myDataName] = myDataValue;

複制到剪貼闆

若要對此進行測試，請嘗試将以下行添加到代碼中，位于對象的右大括号下方：

person

const myDataName = 'height';
const myDataValue = '1.75m';
person[myDataName] = myDataValue;

複制到剪貼闆

現在嘗試儲存和重新整理，并在文本輸入中輸入以下内容：

person.height

複制到剪貼闆

使用點表示法無法使用上述方法向對象添加屬性，點表示法隻能接受文本成員名稱，而不能接受指向名稱的變量值。

什麼是“這個”？

您可能已經注意到我們的方法中有一些奇怪的東西。例如，看看這個：

introduceSelf() {
  console.log(`Hi! I'm ${this.name[0]}.`);
}

複制到剪貼闆

您可能想知道“這”是什麼。關鍵字是指正在其中編寫代碼的目前對象 — 是以在本例中等效于。那麼為什麼不直接寫呢？

this

this

person

person

好吧，當您隻需要建立單個對象文本時，它就不那麼有用了。但是，如果建立多個對象，則允許您對建立的每個對象使用相同的方法定義。

this

讓我們用一對簡化的 person 對象來說明我們的意思：

const person1 = {
  name: 'Chris',
  introduceSelf() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}

const person2 = {
  name: 'Deepti',
  introduceSelf() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}

複制到剪貼闆

在這種情況下，輸出“嗨！我是克裡斯。另一方面輸出“嗨！我是Deepti.“，即使該方法的代碼在每種情況下都完全相同。當您手動寫出對象文本時，這并不是很有用，但是當我們開始使用構造函數從單個對象定義建立多個對象時，這将是必不可少的，這就是下一節的主題。

person1.introduceSelf()

person2.introduceSelf()

構造函數簡介

當您隻需要建立一個對象時，使用對象文本是可以的，但是如果您必須建立多個對象，如上一節所述，則它們嚴重不足。我們必須為我們建立的每個對象寫出相同的代碼，如果我們想更改對象的某些屬性 - 例如添加屬性 - 那麼我們必須記住更新每個對象。

height

我們想要一種方法來定義對象的“形狀”——方法集和它可以擁有的屬性——然後建立任意數量的對象，隻需更新不同屬性的值。

這個的第一個版本隻是一個函數：

function createPerson(name) {
  const obj = {};
  obj.name = name;
  obj.introduceSelf = function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
  return obj;
}

複制到剪貼闆

此函數每次調用它時都會建立并傳回一個新對象。該對象将有兩個成員：

屬性 name
一種方法。 introduceSelf()

請注意，需要一個參數來設定屬性的值，但對于使用此函數建立的所有對象，該方法的值将是相同的。這是建立對象的一種非常常見的模式。

createPerson()

name

name

introduceSelf()

現在，我們可以根據需要建立任意數量的對象，重用定義：

const salva = createPerson('Salva');
salva.name;
salva.introduceSelf();

const frankie = createPerson('Frankie');
frankie.name;
frankie.introduceSelf();

複制到剪貼闆

這工作正常，但有點冗長：我們必須建立一個空對象，初始化它，然後傳回它。更好的方法是使用構造函數。構造函數隻是一個使用 new 關鍵字調用的函數。調用構造函數時，它将：

建立新對象
綁定到新對象，以便您可以在構造函數代碼中引用 this this
在構造函數中運作代碼
傳回新對象。

按照慣例，構造函數以大寫字母開頭，并以其建立的對象類型命名。是以，我們可以像這樣重寫我們的例子：

function Person(name) {
  this.name = name;
  this.introduceSelf = function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}

複制到剪貼闆

要作為構造函數調用，我們使用：

Person()

new

const salva = new Person('Salva');
salva.name;
salva.introduceSelf();

const frankie = new Person('Frankie');
frankie.name;
frankie.introduceSelf();

複制到剪貼闆

您一直在使用對象

當您浏覽這些示例時，您可能一直認為您一直在使用的點表示法非常熟悉。那是因為你在整個課程中一直在使用它！每次我們研究一個使用内置浏覽器API或JavaScript對象的示例時，我們一直在使用對象，因為這些功能是使用與我們在這裡看到的完全相同類型的對象結構建構的，盡管這些結構比我們自己的基本自定義示例更複雜。

是以，當您使用字元串方法時，例如：

myString.split(',');

複制到剪貼闆

您正在使用 String 對象上可用的方法。每次在代碼中建立字元串時，該字元串都會自動建立為的執行個體，是以具有幾個可用的常用方法和屬性。

String

當您使用如下行通路文檔對象模型時：

const myDiv = document.createElement('div');
const myVideo = document.querySelector('video');

複制到剪貼闆

您正在使用文檔對象上可用的方法。對于加載的每個網頁，都會建立一個名為的執行個體，該執行個體表示整個頁面的結構、内容和其他功能（如 URL）。同樣，這意味着它具有幾種可用的常用方法和屬性。

Document

document

const myNotification = new Notification('Hello!');

JavaScript 對象基礎知識

對象基礎知識

點表示法

對象作為對象屬性

括号表示法

設定對象成員

什麼是“這個”？

構造函數簡介

您一直在使用對象

總結

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條