首頁 > web前端 > js教程 > 了解 JavaScript 中的原型繼承:初學者指南

了解 JavaScript 中的原型繼承:初學者指南

DDD
發布: 2024-12-14 13:40:12
原創
759 人瀏覽過

Understanding Prototypical Inheritance in JavaScript: A Beginner

JavaScript 是一種強大的動態語言,具有物件導向程式設計 (OOP) 範例。與許多其他 OOP 語言(例如 Java 或 C )不同,JavaScript 不使用經典繼承。相反,它採用原型繼承,既靈活又獨特。

在本部落格中,我們將深入探討原型繼承的概念,探索它的工作原理,並查看實際範例以更好地理解其強大功能。

什麼是原型繼承?

原型繼承允許 JavaScript 物件透過原型鏈共享屬性和方法。每個 JavaScript 物件都有一個到另一個物件的內部鏈接,稱為原型。如果在物件本身上找不到屬性或方法,JavaScript 會在原型鏈中尋找它。

這種機制允許物件「繼承」其他物件的行為,使其成為 JavaScript 物件導向功能的基石。

關鍵術語

1.原型:
另一個物件繼承屬性的物件。

2.原型:
物件原型的內部引用(或連結)。

3.Object.prototype:
所有 JavaScript 物件間接繼承的頂層原型。

4.原型鏈:
JavaScript 遍歷原型的層次結構來尋找屬性或方法。

原型繼承是如何運作的?

這是一個說明原型繼承實際操作的範例:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

登入後複製
登入後複製

說明

  1. 狗物件使用 Object.create() 方法從動物物件繼承屬性和方法。
  2. 當存取dog.eats時,JavaScript首先檢查dog上是否直接存在eats屬性。如果沒有,它會在動物原型中尋找屬性。

建立原型

使用 Object.create() 方法

Object.create() 是設定原型繼承最簡單的方法。

const vehicle = {
  wheels: 4,
  drive() {
    console.log("Vehicle drives");
  },
};

const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"

登入後複製

使用建構子

在引入 ES6 類別之前,建構子是建立繼承物件的主要方式。

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

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

const john = new Person("John");
john.greet(); // "Hello, my name is John"

登入後複製

這裡,Person 建構函式使用 Person.prototype 設定原型。透過 new Person() 建立的物件繼承 Person.prototype 上定義的方法。

使用 ES6 類別

ES6 中引入了類別語法,使繼承更加直觀,同時仍利用底層的原型鏈。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // "Buddy barks"

登入後複製

儘管這看起來像是經典繼承,但它仍然是基於 JavaScript 的原型繼承。

正在運作的原型鏈

讓我們想像一下原型鍊是如何運作的:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

登入後複製
登入後複製

原型鏈:

  • 子對象:sayHi()
  • 父物件(原型):greet()
  • Object.prototype(基本原型):類似 toString() 的方法

如果在其中任何一個中都找不到方法或屬性,JavaScript 將傳回未定義。

原型繼承的好處

1.記憶體效率:
共享方法和屬性儲存在原型上,不會在實例之間重複。

2.動態繼承:
您可以在運行時修改原型,所有繼承物件都會反映變更。

3.靈活的結構:
物件可以直接從其他物件繼承,而不需要嚴格的類別層次結構。

限制

1.原型鏈性能:
長原型鏈會減慢屬性查找速度。

2.初學者的困惑:
理解 proto、prototype 和 Object.create() 可能會讓人不知所措。

3.缺乏私人領域:
在 ES6 之前,私有屬性很難使用原型來實現。

結論

原型繼承是 JavaScript OOP 模型的基石,提供靈活性和動態行為。無論您使用 Object.create()、建構函數或 ES6 類,理解原型鏈都是編寫有效且高效的 JavaScript 程式碼的關鍵。

有了這些知識,您現在可以探索高級主題,例如混入、原型操作以及經典繼承和原型繼承之間的區別。

編碼愉快! ?

以上是了解 JavaScript 中的原型繼承:初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板