溫馨提示×

JavaScript原型鏈如何理解

小樊
82
2024-10-31 05:22:48
欄目: 編程語言

JavaScript 原型鏈是一種實現(xiàn)對象間繼承的機制。它主要涉及到兩個核心概念：原型對象（prototype）和原型鏈。下面我們詳細了解一下原型鏈。

  1. 原型對象（prototype）： 在 JavaScript 中，每個函數(shù)都具有一個特殊屬性，叫做原型對象（prototype）。原型對象包含一個指針，稱為[[Prototype]]，這個指針指向其父原型對象。當試圖訪問一個對象的屬性時，如果該對象內(nèi)部不存在這個屬性，那么 JavaScript 引擎會沿著原型鏈向上查找，直到找到該屬性或到達原型鏈的頂端（null）。

  2. 原型鏈： 原型鏈是由多個原型對象組成的鏈式結(jié)構(gòu)。當一個對象的原型對象（prototype）不是 null 時，它指向另一個原型對象，如此循環(huán)往復，直到原型對象為 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 的構(gòu)造函數(shù)指向
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"

在這個例子中，我們定義了兩個構(gòu)造函數(shù)：Person 和 Student。我們通過設置 Student 的原型對象為 Person 的實例，使得 Student 可以繼承 Person 的屬性和方法。這樣，當我們創(chuàng)建一個新的 Student 實例并調(diào)用 sayHello 方法時，JavaScript 引擎會在原型鏈上查找 sayHello 方法，最終找到并執(zhí)行它。

0 踩