层层递进，逐级溯源：js 函数高级之原型与原型链（二）

前端

2024-01-26 19:35:29

原型链：JavaScript 中强大的继承机制

了解原型属性

在上一篇文章中，我们探讨了 JavaScript 函数的原型属性，它是理解函数行为的关键。今天，我们将深入研究原型链的概念，它是 JavaScript 中一种强大的机制，用于在对象之间建立关系并实现继承。

什么是原型链？

原型链是一个链式结构，它允许对象访问和继承其他对象的属性和方法。每个对象都有一个名为 __proto__ 的内部属性，它指向该对象的原型对象。原型对象本身也是一个对象，也有一个 __proto__ 属性，依此类推。

访问原型链

要访问一个对象的原型链，可以使用 __proto__ 属性。例如：

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

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

const person = new Person('John');

console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

在这个例子中，person 对象的 __proto__ 属性指向 Person.prototype 对象，Person.prototype 对象的 __proto__ 属性指向 Object.prototype 对象，Object.prototype 对象的 __proto__ 属性指向 null。这就是 person 对象的原型链。

原型链与继承

原型链的主要目的是实现继承。在 JavaScript 中，继承是通过原型链实现的。当一个对象被创建时，它会继承其原型对象的所有属性和方法。例如：

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const employee = new Employee('Jane', 100000);

console.log(employee.__proto__ === Employee.prototype); // true
console.log(Employee.prototype.__proto__ === Person.prototype); // true
console.log(employee.name); // Jane
console.log(employee.salary); // 100000
employee.greet(); // Hello, my name is Jane!