首頁 > web前端 > 前端問答 > javascript怎麼實作繼承?多種方式淺析

javascript怎麼實作繼承?多種方式淺析

PHPz
發布: 2023-04-24 11:40:44
原創
735 人瀏覽過

在說 JavaScript 的繼承前,我們需要先來了解什麼是類別。在常見的程式語言中,例如 Java、C 、C# 等,類別是用於封裝資料和方法的程式結構,可以透過實例化來建立對象,從而實現程式碼的複用和抽象。

但是在 JavaScript 中,類別的定義和使用方式與其他語言略有不同。 JavaScript 的類別是基於物件的,物件在語言的中心地位。 JavaScript 沒有那麼複雜的類別繼承體系,所有的類別都是可以進行繼承的,也就是說,除了一些特定的內建對象,如 Math、Date 等,JavaScript 中的大部分物件都可以充當基底類別。

在 JavaScript 中,繼承有以下幾種方式:

  1. 原型鏈繼承:
##原型鏈繼承是 JavaScript 最基本的繼承方式。利用原型(prototype)實作父類別的函數和屬性繼承。簡單來說,子類別的原型指向父類別的實例,從而實現繼承。這樣就可以在父類別的基礎上擴展,增加新的屬性和方法。

例如:

function Animal() {
  this.species = "动物";
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();  // 将 Cat 的原型对象指向 Animal 的实例

var cat1 = new Cat('小红', '黑色');
console.log(cat1.species);  // 输出 "动物"
登入後複製
    借用建構子繼承:
#借用建構子繼承,也叫做經典繼承或盜用建構子繼承,是指在子類別的建構子中呼叫父類別的建構函數,從而實現繼承。這種方式與原型鏈繼承不同,它可以繼承父類別的屬性,實現了屬性的獨立性。

例如:

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

function Cat(name, color) {
  Animal.call(this, name, color);  // 在 Cat 类的构造函数中调用 Animal 类的构造函数
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
登入後複製
    組合繼承:
#組合繼承是指將原型鏈繼承和借用建構函式繼承結合起來使用,這樣就可以同時繼承父類別的屬性和方法,且可以使用父類別的屬性和方法。

例如:

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
}

function Cat(name, color) {
  Animal.call(this, name, color);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
登入後複製
    寄生式繼承:
#寄生式繼承是指建立一個僅用於封裝繼承過程的函數,在該函數中以某種方式增強對象,最終返回這個對象。這個物件可以作為子類別的原型對象,從而實現繼承。

例如:

function Animal(name) {
  var obj = {
    name: name,
    eat: function() {
      console.log('我是一只动物,我可以吃东西!');
    }
  };
  return obj;
}

function Cat(name, color) {
  var animal = Animal.call(this, name);
  animal.color = color;
  return animal;
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
登入後複製
    寄生式組合繼承:
#寄生式組合繼承是指在組合繼承的基礎上,透過寄生式繼承來優化物件的繼承效能。可以透過建立繼承父類別原型的新物件來實現繼承,避免了呼叫父類別建構子時初始化物件的缺陷。

例如:

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

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
};

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
登入後複製
綜上所述,JavaScript 的繼承可以透過多種方式來實現,在實際開發中需要根據特定的場景和需求來選擇適合的方式。

以上是javascript怎麼實作繼承?多種方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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