你不知道的JavaScript—探索 JavaScript 對象與原型
作者：小白Coding日志
JavaScript 對象和原型是該語言的核心特性之一，通過本文的介紹，我們深入探討了 JavaScript 對象和原型的概念、創建、訪問與修改、原型鏈、原型繼承以及實際應用。
你好，我是小白Coding日志，一個熱愛技術的程序員。在這里，我分享自己在編程和技術世界中的學習心得和體會。希望我的文章能夠給你帶來一些靈感和幫助。歡迎來到我的博客，一起在技術的世界里探索前行吧！
JavaScript 是一種強大而靈活的腳本語言，其核心特性之一是對象與原型。理解 JavaScript 對象和原型的工作原理對于成為一名優秀的 JavaScript 開發者至關重要。
JavaScript 對象：一切皆對象
在 JavaScript 中，幾乎一切都是對象。對象是一種復合值，它可以包含屬性和方法。屬性是鍵值對，其中鍵是字符串，值可以是任何數據類型。方法是與對象相關聯的函數。
對象的創建
對象可以通過對象字面量、構造函數、Object.create() 方法等方式創建。
// 對象字面量
let person = {
name: 'Alice',
age: 30,
greet: function() {
console.log('Hello, my name is ' + this.name);
}
};
// 構造函數
function Person(name, age) {
this.name = name;
this.age = age;
}
let person1 = new Person('Bob', 25);
// Object.create()
let person2 = Object.create(person);
person2.name = 'Charlie';
person2.age = 20;對象的訪問與修改
對象的屬性可以通過點符號或方括號訪問和修改。
console.log(person.name); // 輸出 'Alice'
person.age = 35; // 修改 age 屬性的值為 35JavaScript 原型：共享屬性和方法
JavaScript 是一種基于原型的語言，每個對象都有一個原型。原型是對象的基礎，它包含對象共享的屬性和方法。當對象訪問一個屬性或方法時，如果對象本身沒有這個屬性或方法，它會沿著原型鏈向上查找，直到找到為止。
原型鏈
原型鏈是一種對象之間關系的表示，它是由對象的原型構成的鏈式結構。當我們訪問一個對象的屬性或方法時，JavaScript 引擎會沿著原型鏈依次查找，直到找到對應的屬性或方法為止。
console.log(person.__proto__); // 輸出對象的原型
console.log(person.__proto__.__proto__); // 輸出原型的原型，直到 Object.prototype原型繼承
JavaScript 中的原型繼承是一種基于原型鏈的繼承方式。子對象可以通過原型鏈繼承父對象的屬性和方法。
// 父對象構造函數
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log('My name is ' + this.name);
};
// 子對象構造函數
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
let dog = new Dog('Buddy', 'Golden Retriever');
dog.sayName(); // 輸出 'My name is Buddy'實際應用：使用對象和原型進行模塊化和繼承
JavaScript 對象和原型的概念為模塊化和繼承提供了強大的支持。通過合理地組織對象和利用原型鏈，我們可以編寫可維護、可擴展的代碼。
模塊化
let module = {
data: [],
add: function(item) {
this.data.push(item);
},
remove: function(index) {
this.data.splice(index, 1);
}
};
module.add('apple');
module.add('banana');
module.remove(0);
console.log(module.data); // 輸出 ['banana']繼承
// 父對象構造函數
function Shape() {
this.color = 'red';
}
Shape.prototype.getColor = function() {
return this.color;
};
// 子對象構造函數
function Circle(radius) {
Shape.call(this);
this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
Circle.prototype.getArea = function() {
return Math.PI * this.radius * this.radius;
};
let circle = new Circle(5);
console.log(circle.getColor()); // 輸出 'red'
console.log(circle.getArea()); // 輸出 78.53981633974483總結
JavaScript 對象和原型是該語言的核心特性之一，通過本文的介紹，我們深入探討了 JavaScript 對象和原型的概念、創建、訪問與修改、原型鏈、原型繼承以及實際應用。
責任編輯：武曉燕
來源：
小白Coding日志
