反思原型鏈

一、原型鏈基礎

JavaScript的原型鏈是一種從對象到另一個對象的委託關係。它在一個對象的屬性找不到時,會沿著原型鏈往上找指定名稱的屬性或方法。我們來看一個例子:

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

Animal.prototype.getName = function(){
  return this.name;
}

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

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

var dog = new Dog('Henry');
console.log(dog.getName()); //輸出:Henry

在此代碼中,我們定義了Animal和Dog兩個構造函數,並且讓Dog的原型指向Animal的實例。當我們調用dog.getName()時,JavaScript引擎會在dog對象上查找getName方法,沒有找到時會沿著原型鏈往上找Animal.prototype上的getName方法。

二、改變原型鏈

在上一個例子中,我們讓Dog的原型指向了Animal的實例,在Dog.prototype上定義getName方法。這種方式同樣有一些問題:

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

Animal.prototype.getName = function(){
  return this.name;
}

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

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.getName = function(){
  return 'My name is ' + this.name;
}

var dog = new Dog('Henry');
console.log(dog.getName()); //輸出:My name is Henry

var animal = new Animal('Oscar');
console.log(animal.getName()); //輸出:Oscar

在此代碼中,我們在Dog.prototype上定義了一個新的getName方法,這會影響到它的父對象Animal.prototype上的getName方法,而且animal對象也會受到影響。

為了避免這種相互污染的問題,我們可以使用Object.create()方法,創建一個新的對象作為原型,並將其賦值給Dog.prototype。

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

Animal.prototype.getName = function(){
  return this.name;
}

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

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.getName = function(){
  return 'My name is ' + this.name;
}

var dog = new Dog('Henry');
console.log(dog.getName()); //輸出:My name is Henry

var animal = new Animal('Oscar');
console.log(animal.getName()); //輸出:Oscar

三、繼承的多種方式

除了使用原型鏈實現繼承之外,我們還可以使用其他幾種方式:構造函數、組合繼承、寄生構造函數和組合繼承。

1. 構造函數

構造函數是最基本的一種繼承方式。它有一些局限性,例如無法訪問父對象的屬性和方法,但在一些情況下,由於其簡單易用,還是有著很大的用武之地。

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

function Dog(name, type){
  this.type = type;
  this.getType = function(){
    return this.type;
  }

  Animal.call(this, name);
}

var dog = new Dog('Henry', 'Poodle');
console.log(dog.getName()); //輸出:Henry
console.log(dog.getType()); //輸出:Poodle

2. 組合繼承

組合繼承是指同時採用構造函數和原型鏈的繼承方式。使用該方法,可以避免構造函數和原型鏈各自的局限性和缺陷。

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

Animal.prototype.getName = function(){
  return this.name;
}

function Dog(name, type){
  this.type = type;

  Animal.call(this, name);
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.getType = function(){
  return this.type;
}

var dog = new Dog('Henry', 'Poodle');
console.log(dog.getName()); //輸出:Henry
console.log(dog.getType()); //輸出:Poodle

3. 寄生構造函數

寄生構造函數是指在另一個構造函數的基礎上增加一些方法或屬性,從而達到繼承的目的。與傳統的構造函數繼承相比,寄生構造函數繼承的優勢在於可以使用閉包,對屬性和方法進行封裝,從而達到不污染父對象的目的。

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

Animal.prototype.getName = function(){
  return this.name;
}

function Dog(name, type){
  var self = new Animal(name);

  self.type = type;
  self.getType = function(){
    return this.type;
  }

  return self;
}

var dog = new Dog('Henry', 'Poodle');
console.log(dog.getName()); //輸出:Henry
console.log(dog.getType()); //輸出:Poodle

4. 組合繼承

寄生組合繼承也是一種很好的繼承方式,它通過借用構造函數繼承父對象的屬性和方法,和通過原型鏈繼承父對象的原型,達到繼承的目的。

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

Animal.prototype.getName = function(){
  return this.name;
}

function Dog(name, type){
  Animal.call(this, name);
  this.type = type;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.getType = function(){
  return this.type;
}

var dog = new Dog('Henry', 'Poodle');
console.log(dog.getName()); //輸出:Henry
console.log(dog.getType()); //輸出:Poodle

原創文章,作者:TEFJL,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/368435.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
TEFJL的頭像TEFJL
上一篇 2025-04-12 01:13
下一篇 2025-04-12 01:13

相關推薦

  • 谷歌Axure插件——提高原型設計效率的利器

    一、快速製作自定義組件 1、Axure自帶的組件庫雖然豐富,但在某些情況下我們需要自己設計一些特殊的組件,而谷歌Axure插件提供了一個輕鬆快捷的方式。 以設計一個自定義開關組件為…

    編程 2025-04-22
  • 深入解析JavaScript原型鏈面試題

    JavaScript 是一種弱類型、基於原型的編程語言。原型是 JavaScript 的一項非常重要的特性,也是面試中經常考察的知識點。JS 原型鏈是基於原型的面向對象編程的基石,…

    編程 2025-03-12
  • 原型與原型鏈

    一、什麼是原型 在JavaScript中,每個對象都有一個指向另一個對象的引用,叫做原型。原型是JavaScript中一個比較重要的概念。 通過使用構造函數創建的對象,會自動擁有一…

    編程 2025-02-24
  • 原型模式的應用場景

    一、單例模式的應用場景 單例模式是一種常見的設計模式,其應用場景也非常廣泛。單例模式通常只允許一個實例存在,可以用於創建全局唯一的對象。在使用原型模式實現單例模式時,先創建一個原型…

    編程 2025-02-17
  • js原型鏈編程,js原型鏈概念

    本文目錄一覽: 1、javascript 原型,原型鏈是什麼?有什麼特點 2、js原型和原型鏈的理解是什麼? 3、js原型鏈和繼承的理解 4、談談對原型鏈的理解 JS原型鏈怎麼理解…

    編程 2025-01-09
  • java桌面應用程序原型,軟體開發 原型

    本文目錄一覽: 1、Java原型模式 2、Java適合開發桌面應用程序嗎? 3、JAVA 怎麼把程序做成 桌面應用程序 Java原型模式 不用例子,如果你的某個類在整個工程中只需要…

    編程 2024-12-15
  • 原型網路:從概念到應用

    一、什麼是原型網路 原型網路(Prototypical Network)是一種深度學習中用於學習表示空間的神經網路,由於能夠處理較小的數據集而被廣泛應用於圖像分類、目標識別等領域。…

    編程 2024-12-12
  • 軟體原型設計詳解

    一、軟體原型設計工具 軟體原型設計是實現產品設計的重要步驟,而軟體原型設計工具就是我們能夠使用的工具。 目前市面上存在很多軟體原型設計工具,比較常見的有: Axure RP Ske…

    編程 2024-11-25
  • c語言中c=a\u003e3,C語言中,函數可以用原型說明,也可用簡單說明

    本文目錄一覽: 1、c語言中 c=”a”是什麼意思 2、在c語言中char choose=0是什麼意思 3、C語言中 c=’a’, …

    編程 2024-11-08
  • c語言strcmp原型,c語言strcpy函數原型

    本文目錄一覽: 1、strcmp原理 2、C語言中strcmp函數怎麼用啊 3、C語言編程strcmp函數的問題 4、C語言 strcmp(“how”,&#…

    編程 2024-11-05

發表回復

登錄後才能評論