一文带你理解JS中的原型和原型链

原型概念解析

JavaScript 属于基于对象的编程语言，所有对象均具备一个原型（prototype），该原型可以是对象或 null，用于定义对象的属性与方法。当访问对象自身不存在的属性或方法时，JavaScript 会沿原型链递归查找，直至找到目标或到达链顶。

JavaScript 中每个函数对象均拥有 prototype 属性，指向其原型对象。使用 new 操作符创建实例时，实例的原型被赋值为构造函数的 prototype 属性值。示例如下：

function Person(name) {
  this.name = name;
}
var person1 = new Person("李三");
// person1 的原型是 Person.prototype
console.log(person1.__proto__ === Person.prototype); // 输出：true

原型链机制概述

JavaScript 对象通过原型链（prototype chain）建立关联，而非完全孤立。原型链体现为一种继承关系：每个对象拥有原型，而原型本身也可能拥有更上层的原型，由此形成递归链条。

访问对象属性或方法时，若对象自身未定义，JavaScript 将沿原型链向上搜索，直至找到对应成员。若搜索至原型链顶端仍未找到，则返回 undefined。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};
function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}
// 继承了 Person 的属性和方法
Student.prototype = Object.create(Person.prototype);
// 在 Student.prototype 上添加自己的属性和方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying in grade ${this.grade}`);
};
var student1 = new Student("李三", 3);
student1.sayHello(); // 输出：Hello, my name is 李三
student1.study(); // 输出：李三 is studying in grade 3

前述示例中，定义了两个构造函数 Person 与 Student，并通过 Student.prototype = Object.create(Person.prototype); 使 Student 对象继承 Person 对象的属性与方法。调用 student1.sayHello() 时，JavaScript 沿原型链向上查找，定位到 Person.prototype 中的 sayHello() 方法。调用 student1.study() 时，则直接在 Student.prototype 中检索到该方法。

核心要点总结

本文阐述了 JavaScript 中原型与原型链的概念及应用方式。深入理解其设计思想，有助于掌握对象模型，进而编写更高质量的代码。

关于 JS 原型与原型链的讲解至此结束，如需了解更多相关内容，请查阅本站往期文章或继续浏览后续文章，感谢大家的支持！