温馨提示×

JavaScript原型链如何理解

小樊
82
2024-10-31 05:22:48
栏目: 编程语言

JavaScript 原型链是一种实现对象间继承的机制。它主要涉及到两个核心概念:原型对象(prototype)和原型链。下面我们详细了解一下原型链。

  1. 原型对象(prototype): 在 JavaScript 中,每个函数都具有一个特殊属性,叫做原型对象(prototype)。原型对象包含一个指针,称为[[Prototype]],这个指针指向其父原型对象。当试图访问一个对象的属性时,如果该对象内部不存在这个属性,那么 JavaScript 引擎会沿着原型链向上查找,直到找到该属性或到达原型链的顶端(null)。

  2. 原型链: 原型链是由多个原型对象组成的链式结构。当一个对象的原型对象(prototype)不是 null 时,它指向另一个原型对象,如此循环往复,直到原型对象为 null。这就是原型链的基本概念。

这里有一个简单的例子来说明原型链的工作原理:

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

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

function Student(name, age, course) {
  Person.call(this, name, age);
  this.course = course;
}

// 设置 Student 的原型对象为 Person 的实例,形成原型链
Student.prototype = Object.create(Person.prototype);

// 修正 Student 的构造函数指向
Student.prototype.constructor = Student;

Student.prototype.sayCourse = function() {
  console.log("I am learning " + this.course);
};

const student1 = new Student("Tom", 20, "JavaScript");
student1.sayHello(); // 输出 "Hello, my name is Tom"
student1.sayCourse(); // 输出 "I am learning JavaScript"

在这个例子中,我们定义了两个构造函数:Person 和 Student。我们通过设置 Student 的原型对象为 Person 的实例,使得 Student 可以继承 Person 的属性和方法。这样,当我们创建一个新的 Student 实例并调用 sayHello 方法时,JavaScript 引擎会在原型链上查找 sayHello 方法,最终找到并执行它。

0