JavaScript 原型和原型链的个人理解

前端

2023-10-12 04:42:48

原型和原型链：JavaScript 继承的基石

JavaScript 是一个迷人的编程语言，它以其灵活性和强大的继承机制而著称。理解原型和原型链是解锁 JavaScript 继承之谜的关键。

什么是原型？

原型是包含其他对象共享的属性和方法的对象。每个对象都有一个原型，它指向另一个原型，如此循环往复，直到最终指向 null。这便是原型链。

原型链如何运作？

原型链是一系列通过 proto 属性连接的对象。当一个对象访问一个不存在的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法为止。

JavaScript 中的继承

JavaScript 中的继承是通过原型链实现的。当一个对象被创建时，它会从其原型继承属性和方法。如果该对象需要访问一个不存在的属性或方法，它会沿着原型链向上查找，直到找到该属性或方法为止。

proto 属性

proto 属性是一个隐藏属性，它指向生成该对象的构造函数的原型。我们可以使用 proto 属性来访问一个对象的原型。

示例：原型链的实际应用

以下代码示例展示了原型链在 JavaScript 中是如何运作的：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person1 = new Person('John');
const person2 = new Person('Jane');

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

person1.sayHello(); // Hello, my name is John.
person2.sayHello(); // Hello, my name is Jane.

在这个示例中，Person 函数创建了 Person 对象。Person.prototype 是 Person 对象的原型，它包含了所有 Person 对象共享的属性和方法。

person1 和 person2 是使用 new 运算符创建的 Person 对象。person1 和 person2 都具有一个 proto 属性，该属性指向 Person.prototype。这意味着 person1 和 person2 都可以访问 Person.prototype 中定义的属性和方法。

当我们调用 person1.sayHello() 和 person2.sayHello() 时，JavaScript 会沿着原型链向上查找 sayHello 方法，直到在 Person.prototype 中找到它。然后，JavaScript 会执行 sayHello 方法，并输出相应的消息。