JavaScript 中的對象、原型和類
JavaScript 基於簡單的面向對象編程模型，對像是語言的基本部分。幾乎一切 在 JavaScript 中是一個對象。與 Java 等其他面向對象的編程語言不同，JavaScript 對象非常靈活 .
對象
對像是稱為屬性的鍵值對的集合。屬性的鍵是字符串或符號（也稱為 屬性名稱 ) 和 value 可以是任何東西。有多種方法可以在 JavaScript 中創建對象。最簡單和最流行的方法是使用 object literal 語法：
const user = {
fisrtName: 'John',
lastName: 'Doe',
age: 29
};
也可以使用 new 操作符 創建對象 . new 關鍵字可以與內置的 Object 一起使用 構造函數或用戶自定義構造函數：
// in-built constructor function
const user = new Object();
user.fisrtName = 'John';
user.lastName = 'Doe';
user.age = 29;
// user-defined constructor function
function User(fisrtName, lastName, age) {
this.fisrtName = fisrtName;
this.lastName = lastName;
this.age = age;
};
const user = new User('John', 'Doe', 29);
屬性的值也可以是函數。這樣的屬性稱為方法：
const user = {
fisrtName: 'John',
lastName: 'Doe',
age: 29,
fullName: function () {
return `${this.fisrtName} ${this.lastName}`;
}
};
屬性值可以使用點 (. ) 表示法和方括號 ([] ) 表示法：
// dot notation
console.log(user.fullName()); // John Doe
console.log(user.age); // 29
// square bracket notation - does not work for methods
console.log(user['fisrtName']); // John
您可以通過為現有對象分配值來向現有對象添加新屬性：
user.country = 'United States';
// method can also be added
user.ageRange = function() {
return `${this.age - 5}-${this.age + 5}`;
}
要從對像中刪除屬性，請使用 delete 運營商：
delete user.age;
要遍歷對象的所有鍵，我們可以使用 for...in 循環：
for (const key in user) {
console.log(user[key]);
}
對象字面量語法只能用於創建單個對象。要創建多個相同類型的對象，必須使用對象構造函數：
function Animal(name, icon) {
this.name = name;
this.icon = icon;
};
const rabbit = new Animal('Rabbit','🐰');
const cat = new Animal('Cat','🐱');
我們不能直接為對象構造函數賦值以添加新的屬性和方法。必須在對象構造函數內部添加新屬性：
Animal.color = 'Red'; // wrong way
// correct way
function Animal(name, icon, color) {
// ...
this.color = color;
};
原型
JavaScript 中的所有對像都從另一個稱為原型的對象繼承屬性和方法。 prototype property 允許我們向現有的對象構造函數添加新的屬性和方法。新屬性在指定類型的所有實例之間共享，而不僅僅是對象的一個實例。
讓我們為 Animal 類型的所有對象添加新屬性 通過原型：
// add property
Animal.prototype.color = 'White';
// add method
Animal.prototype.meow = function() {
if(this.name === 'Cat') {
return `${this.name} can meow!`;
} else {
return `${this.name} cannot meow!`;
}
}
現在上面的cat 和 rabbit 對象具有屬性 color 和方法 meow() 因為 prototype Animal 有他們：
console.log(cat.color); // White
console.log(rabbit.meow()); // Rabbit cannot meow!
console.log(cat.meow()); // Cat can meow!
如果你想訪問共享的prototype 屬性通過特定類型的實例，有一個__proto__ 可用的財產。通過這個屬性，你可以修改已有的原型屬性，甚至添加新的屬性。自 prototype 屬性在所有實例之間共享，對一個實例的 prototype 進行更改 屬性或方法將反映在所有實例中：
cat.__proto__.color = 'Black';
cat.__proto__.eatMeat = true;
console.log(rabbit.color); // Black
console.log(rabbit.eatMeat); // true
與對像類似，prototype 可以使用 delete 刪除屬性或方法 運營商：
delete cat.__proto__.eatMeat;
// OR
delete Animal.prototype.eatMeat;
console.log(rabbit.eatMeat); // undefined
正如我們在上面看到的，prototype 屬性是 JavaScript 中對象基礎的核心部分。對此屬性所做的任何更改都會影響該特定對像類型的所有實例。
類
類的概念是在 ES6 (ECMA2015) 的 JavaScript 中引入的。在面向對象的編程範式中，類是創建具有屬性和方法的對象的藍圖，同時封裝了用戶的實現細節。但是，JavaScript 中不存在真類的概念。
JavaScript 類只不過是現有基於原型的繼承和構造函數的語法糖。讓我們看一個例子：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
return `👋 ${this.name}!`;
}
}
現在如果我們想創建一個 Person 的新實例 類，我們必須使用 new 運營商：
const bill = new Person('Bill', 25);
console.log(bill.sayHi()); // 👋 Bill!
當我們創建 Person 的對象時 類，類構造函數執行以下操作：
- 創建一個名為
Person的新函數 並將構造函數中聲明的所有屬性複製到其中（name和age)。 - 添加類的所有方法，如
sayHi(), 到Person.prototype財產。
之後，當我們調用對象的任何方法時，都取自 prototype 財產。查看這篇文章以了解有關 JavaScript 類的更多信息。
總結
對像是 JavaScript 語言的重要組成部分。 JavaScript 中幾乎所有東西都是對象。
- 對像是鍵值屬性的集合。可以使用對象字面量語法或對象構造函數語法來創建對象。
- 每當在 JavaScript 中創建新函數時，JavaScript 引擎都會自動附加一個
prototype財產給它。對此屬性所做的更改在特定對像類型的所有實例之間共享。這是向現有對象構造函數添加新屬性的好方法。 - ES6 為 JavaScript 帶來了類，這不過是一種利用原型功能編寫構造函數的新方法。
如果你想了解更多關於對象的知識，這裡有一個深入的 MDN 指南，它解釋瞭如何使用對象、屬性和方法。
