JavaScript面向對象——實現并理解JavaScript多繼承

多繼承：

說明：在JavaScript中繼承是依賴于原型prototype鏈實現的，只有一條原型鏈，理論上是不支持繼承多個父類的。但是！我們都知道JavaScript是及其靈活的，所以可以通過一些技巧來繼承多個對象的屬性即實現多繼承。

1：實現一個繼承單一對象屬性的函數：

function inherit(target, source) {for (var property in source) {target[property] = source[property]}return target}

注：這是一個淺復制的過程，修改復制出來的對象的引用類型值會改變原對象屬性值。

測試:

var book = {name: 'JavaScript深入淺出',types: ['JavaScript', 'language']}var anotherBook = {version: '2018'}// 繼承驗證inherit(anotherBook, book)console.log(anotherBook.name)console.log(anotherBook.types)console.log(anotherBook.version)// 復制過程是淺復制驗證anotherBook.types.push('C++程序設計')console.log(book.types)

運行結果：

2：對此函數進行改造，使其具備繼承多個對象屬性的功能

假設要實現一個inherits()函數，用于對象繼承以下三個對象的屬性，應該怎么寫？

var book1 = {name: 'JavaScript深入淺出',types: ['JavaScript', 'language']}var book2 = {price: '$3.7',belongs: '計算機科學與技術出版社'}var anotherBook = {version: '2018'}

解答：

var inherits = function (arguments) {var length = arguments.length, // 傳入對象的個數target = arguments[0], // 將第一個對象作為返回目標i = 1, // 第二個及之后的對象作為被繼承對象tempObj // 中間對象,用于緩存for (i; i < length; i++) {tempObj = arguments[i]for (var property in tempObj) {target[property] = tempObj[property]}}// 返回目標對象return target }

驗證：

// 多繼承實現驗證inherits(anotherBook, book1, book2)console.log(anotherBook)

結果：

3：將此函數寫在Object.prototype上，即可使用目標對象直接調用

思路：將目標對象改為調用此函數的對象，第一個傳入的對象就視作被繼承對象，不需返回target。

Object.prototype.inherits = function () {var length = arguments.length, // 傳入對象的個數i = 0, // 第1個及之后的對象作為被繼承對象tempObj // 中間對象,用于緩存for (i; i < length; i++) {tempObj = arguments[i]for (var property in tempObj) {this[property] = tempObj[property]}}}

驗證：

// 多繼承實現驗證anotherBook.inherits(book1, book2)console.log(anotherBook)

結果：

第100篇原創文章完結！！

雖然比較多水文，但每次寫完都感覺到有一絲絲的提高，重視每一次經驗總結。

（2018. 03. 18 - 星期天 - 廣州·天河）

總結

以上是生活随笔為你收集整理的JavaScript面向对象——多继承的实现与理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。