JavaScript 原型：对象如何查找属性和赋值

2023-11-28 23:29:04

JavaScript 中的原型是一种强大的机制，它允许对象从其他对象中继承属性和方法。这可以简化代码并促进重用。了解原型的工作原理对于编写健壮且可维护的 JavaScript 代码至关重要。

原型

JavaScript 中的每个对象都有一个称为原型（prototype）的内部属性。原型本身也是一个对象，它包含对象可以访问的属性和方法的集合。当对象需要查找属性或方法时，它会首先检查自己的属性。如果它没有找到所需的属性，它就会沿着原型链向上查找，直到找到该属性或到达最顶层的原型（Object.prototype）。

属性查找

当对象试图访问属性时，会发生属性查找。如果属性存在于对象本身的属性中，它将被立即返回。否则，JavaScript 将沿原型链向上查找，直到找到该属性或到达 Object.prototype。

例如，考虑以下代码：

const person = {
  name: 'John',
};

console.log(person.name); // John
console.log(person.age); // undefined

在此示例中，person 对象具有一个名为 name 的属性，因此在第一次 console.log() 调用中可以访问该属性。但是，person 对象没有名为 age 的属性，因此 JavaScript 会沿着原型链向上查找，最终在 Object.prototype 中找到 age 属性，返回 undefined。

属性赋值

当对象试图向其自身或其原型链中的某处分配属性时，就会发生属性赋值。如果属性存在于对象本身的属性中，它将被直接分配。否则，JavaScript 将沿着原型链向上查找，直到找到该属性或到达 Object.prototype。

例如，考虑以下代码：

person.age = 30;

console.log(person.age); // 30
console.log(person.prototype.age); // undefined

在此示例中，person 对象没有名为 age 的属性，因此 JavaScript 会沿着原型链向上查找。但是，它不会在任何原型中找到 age 属性，所以它会将其分配给 person 对象本身。

继承

原型还用于 JavaScript 中的继承。通过设置对象的原型属性，可以使该对象继承另一个对象的属性和方法。

例如，考虑以下代码：

const animal = {
  eat() {
    console.log('Eating...');
  },
};

const dog = Object.create(animal);

dog.bark() {
  console.log('Barking...');
};

dog.eat(); // Eating...
dog.bark(); // Barking...