3.1 原型概念
原型是 JavaScript 中的一个关键概念，使对象可以从其他对象继承属性和方法。不同于许多其他编程语言，通过类来实现继承，JavaScript 是基于原型的。现在我们来看一下什么是原型，它们是如何工作的以及如何使用它们。
JavaScript 中的原型——是一个对象，其他对象可以从它继承属性和方法。JavaScript 中的每个对象都有一个隐藏链接到另一个对象——即隐藏属性 [[Prototype]]，指向它的原型。
这个原型可以有自己的原型，形成原型链（prototype chain）。通过这条链，对象的属性和方法可以被继承。这允许对象共享功能并创建对象的层次结构。
属性 proto
在 JavaScript 中，每个对象都有一个 __proto__ 属性，指向其原型。当属性和方法在对象本身中找不到时，会使用该属性进行查找。
在这个例子中，对象 child 从对象 parent 继承了方法 greet()：
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = {
__proto__: parent
};
child.greet(); // 输出: Hello from parent
3.2 创建和使用原型
1. Object.create()
方法 Object.create() 允许创建一个具有指定原型的新对象。
例子：
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.greet(); // 输出: Hello from parent
2. 向原型添加属性和方法
可以向原型添加属性和方法，以便继承它的所有对象都可以访问这些属性和方法。
在这个例子中，方法 speak() 被添加到原型 animal，并且对对象 dog 可用：
const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // 输出: Buddy makes a noise.
3. 修改对象的原型
可以使用方法 Object.setPrototypeOf() 修改对象的原型。
在这个例子中，对象 duck 的原型从 animal 改为 bird：
const animal = {
speak() {
console.log('Animal speaks');
}
};
const bird = {
fly() {
console.log('Bird flies');
}
};
const duck = {
__proto__: animal,
quack() {
console.log('Duck quacks');
}
};
Object.setPrototypeOf(duck, bird);
duck.fly(); // 输出: Bird flies
duck.quack(); // 输出: Duck quacks
3.3 使用原型
1. 检查对象的原型
方法 Object.getPrototypeOf() 允许获取对象的原型。
例子：
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // 输出: true
2. 检查对象是否属于原型
操作符 instanceof 用于检查对象是否是某个构造函数或原型的实例。
例子：
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john instanceof Person); // 输出: true
3. 遍历对象及其原型的属性
可以使用 for...in 循环来遍历对象及其原型的属性，该循环列举所有可枚举属性。
例子：
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
for (let key in child) {
console.log(key);
}
// 输出:
// name
// greet
要仅遍历对象的自身属性，可以使用 Object.keys() 方法或 for...of 循环搭配 Object.entries() 方法。
例子：
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
console.log(Object.keys(child)); // 输出: ['name']
for (const [key, value] of Object.entries(child)) {
console.log(key, value);
}
// 输出:
// name Child
GO TO FULL VERSION