快捷導航

一文帶你理解JS中的原型和原型鏈

更新時間：2023年07月31日 11:56:46 作者：風衣怒馬少年郎

在學習JavaScript中的繼承機制時,我們常常會遇到原型和原型鏈這兩個概念,在初學階段,不理解這些概念很容易陷入迷茫,甚至會導致學習 JS 的路程變得曲折,本文將介紹JavaScript原型和原型鏈的概念、設(shè)計思想以及相關(guān)的使用方法,需要的朋友可以參考下

什么是原型？

JavaScript 是一門基于對象的語言，每個對象都有一個原型（prototype），原型是一個對象或 null 值，它定義了該對象所具有的屬性和方法。當讀取一個對象的屬性或執(zhí)行一個對象的方法時，如果當前對象本身沒有這個屬性或方法，那么 JavaScript 就會從該對象的原型中查找這個屬性或方法，并遞歸查找到其原型鏈上的所有對象，直到找到該屬性或方法為止。

在 JavaScript 中，每個函數(shù)對象都有一個 prototype 屬性，該屬性指向該函數(shù)的原型對象。當使用 new 操作符創(chuàng)建一個對象時，該對象的原型就被設(shè)置為構(gòu)造函數(shù)的 prototype 屬性的值。例如：

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

什么是原型鏈？

JavaScript 的對象之間不是完全獨立的關(guān)系，它們之間是通過原型鏈（prototype chain）相互關(guān)聯(lián)的。原型鏈指的是對象之間的一種繼承關(guān)系，每個對象都有一個原型對象，而原型對象也可能有自己的原型，這樣一直遞歸下去，就形成了原型鏈。

當讀取一個對象的屬性或執(zhí)行一個對象的方法時，如果該對象本身沒有這個屬性或方法，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

在上面的例子中，我們定義了兩個構(gòu)造函數(shù) Person 和 Student，并通過 Student.prototype = Object.create(Person.prototype); 實現(xiàn)了 Student 對象繼承自 Person 對象的屬性和方法。當我們調(diào)用 student1.sayHello() 方法時，JavaScript 沿著該對象的原型鏈向上查找，找到了 Person.prototype 中的 sayHello() 方法。當我們調(diào)用 student1.study() 方法時，則直接在 Student.prototype 中查找到了該方法。