快捷導(dǎo)航

JavaScript六種常見的繼承方法分享

更新時間：2023年09月19日 10:31:26 作者：筱小琦

繼承是面向?qū)ο缶幊讨械囊粋€重要概念,它允許一個對象（子類或派生類）獲取另一個對象（父類或基類）的屬性和方法,在 JavaScript 中,有多種方式可以實現(xiàn)繼承,本文將給大家介紹六種常見的JavaScript繼承方法,需要的朋友可以參考下

繼承是面向?qū)ο缶幊讨械囊粋€重要概念，它允許一個對象（子類或派生類）獲取另一個對象（父類或基類）的屬性和方法。在 JavaScript 中，有多種方式可以實現(xiàn)繼承。以下是六種常見的 JavaScript 繼承方法以及詳細(xì)介紹：

原型鏈繼承（Prototype Inheritance）：

這是 JavaScript 中最基本的繼承方式。它通過將子類的原型對象指向父類的實例來實現(xiàn)繼承。這意味著子類繼承了父類的屬性和方法，但也可能會有一些潛在的問題，比如所有子類的實例共享父類屬性，導(dǎo)致意外的行為。

function Parent() {
  this.name = 'Parent'
}
Parent.prototype.sayHello = function () {
  console.log(`Hello, I'm ${this.name}`)
}
function Child() {
  this.name = 'Child'
}
Child.prototype = new Parent()
const child = new Child()
child.sayHello() // 輸出 "Hello, I'm Child"

構(gòu)造函數(shù)繼承（Constructor Inheritance）：

這種繼承方式通過在子類構(gòu)造函數(shù)中調(diào)用父類構(gòu)造函數(shù)來實現(xiàn)。這樣可以避免原型鏈繼承中的共享屬性問題，但父類的方法不會被繼承到子類的原型中。

function Parent() {
this.name = 'Parent';
}
function Child() {
Parent.call(this);
this.name = 'Child';
}
const child = new Child();
console.log(child.name); // 輸出 "Child"

組合繼承（Combination Inheritance）：

這是將原型鏈繼承和構(gòu)造函數(shù)繼承結(jié)合的一種方式。它使用原型鏈繼承來繼承方法，使用構(gòu)造函數(shù)繼承來繼承屬性。但這種方法會調(diào)用兩次父類構(gòu)造函數(shù)，可能會導(dǎo)致性能問題。

function Parent() {
this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
}
function Child() {
Parent.call(this);
this.name = 'Child';
}
Child.prototype = new Parent();
const child = new Child();
child.sayHello(); // 輸出 "Hello, I'm Child"

原型式繼承（Prototype-based Inheritance）：

這種繼承方式使用一個已有的對象作為模板來創(chuàng)建新對象，新對象可以繼承模板對象的屬性和方法。但需要注意的是，修改子對象的屬性也會影響到模板對象。

const parent = {
name: 'Parent',
sayHello: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
const child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // 輸出 "Hello, I'm Child"
```js

寄生式繼承（Parasitic Inheritance）：

這種方式類似于原型式繼承，但在創(chuàng)建新對象時可以添加額外的屬性和方法，這些額外的屬性和方法可以根據(jù)需要進(jìn)行定制。

function createChild(parent) {
const child = Object.create(parent);
child.name = 'Child';
child.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
return child;
}
const parent = {
name: 'Parent'
};
const child = createChild(parent);
child.sayHello(); // 輸出 "Hello, I'm Child"

ES6 類繼承（Class Inheritance）：

ES6 引入了 class 關(guān)鍵字，使面向?qū)ο缶幊谈雍啙?。可以使?extends 關(guān)鍵字實現(xiàn)類的繼承，子類可以繼承父類的屬性和方法。

class Parent {
constructor() {
this.name = 'Parent';
}
sayHello() {
console.log(`Hello, I'm ${this.name}`);
}
}
class Child extends Parent {
constructor() {
super();
this.name = 'Child';
}
}
const child = new Child();
child.sayHello(); // 輸出 "Hello, I'm Child"

學(xué)習(xí)這些繼承模式的關(guān)鍵在于理解它們的核心概念，否則當(dāng)你在編寫代碼時遇到書本上的示例時，可能會感到為什么不直接采用更簡單的繼承方式呢？以原型式繼承為例，它通過復(fù)制內(nèi)部對象的一個副本來實現(xiàn)繼承。這種方式不僅可以繼承內(nèi)部對象的屬性，還能夠自由調(diào)用其中包含的函數(shù)、對象，以及從源內(nèi)部對象返回的內(nèi)容。你可以添加屬性，修改參數(shù)，從而定制化原型對象，而這些新增的屬性不會相互影響。

以上就是JavaScript六種常見的繼承方法分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript繼承方法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: