首頁 > web前端 > js教程 > 主體

JavaScript中建構函式中的繼承是如何運作的?

WBOY
發布: 2023-08-21 20:33:08
轉載
1336 人瀏覽過

JavaScript中建構函式中的繼承是如何運作的?

在本文中,我們將討論JavaScript中繼承的工作原理以及如何在JavaScript的建構函數中利用這種物件導向程式設計特性。

我們也會簡單介紹JavaScript中的原型物件。因此,對此有一些先前的了解將會非常感激。

在JavaScript中,繼承是一種機制,透過這個機制,一個物件可以從另一個物件繼承屬性和方法。這可以透過使用構造函數和原型屬性來實現。

在建立建構函式時,您可以使用原型屬性為建構函式的原型物件新增屬性和方法。然後,使用建構函式建立的任何物件都會繼承這些屬性和方法。

範例

讓我們透過以下範例來理解:

function Person(name, age) {
   this.name = name;
   this.age = age;
}
Person.prototype.getName = function() {
   return this.name;
};
登入後複製

在這個範例中,Person建構函式具有name和age屬性以及一個getName方法。使用Person建構函式建立的任何物件都會從原型繼承這些屬性和方法。

您也可以透過使用call或apply方法呼叫父建構函式並將this作為第一個參數傳遞來建立一個從現有建構函式繼承的新建構函式。

範例

以下是JavaScript中繼承工作的完整範例:

// Parent constructor function
function Person(name, age) {
   this.name = name;
   this.age = age;
}
// Adding a method to the prototype
Person.prototype.getName = function() {
   return this.name;
};
// Child constructor function
function Employee(name, age, company) {
   
   // Calling the parent constructor function
   Person.call(this, name, age);
   this.company = company;
}
// Setting the prototype of the child constructor function
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

// Adding a method to the child constructor function
Employee.prototype.getCompany = function() {
   return this.company;
};
const employee1 = new Employee("John", 25, "Google");
console.log(employee1.name); // "John"
console.log(employee1.age); // 25
console.log(employee1.getName()); // "John"
console.log(employee1.getCompany()); // "Google"
登入後複製

在這個例子中,我們有一個父建構子叫做Person,它接受一個名字和年齡參數,同時它有一個叫做getName()的方法,它被加到Person建構函數的原型中。然後我們有一個子建構子叫做Employee,它繼承了Person建構子的屬性和方法。 Employee建構函式接受一個額外的公司參數,同時它有一個叫做getCompany()的方法,它被加入到Employee建構函式的原型中。

所以,在JavaScript中,建構函式可以用來建立繼承自父對象的屬性和方法的對象,這可以透過向建構函式的原型物件新增屬性和方法,或是透過建立一個繼承自現有建構函數的新構造函數來實現。

以上是JavaScript中建構函式中的繼承是如何運作的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!