web前端tips js繼承 借用建構函式繼承

2023-07-26 21:38:48 字數 1418 閱讀 6740

上篇文章給大家分享了 js繼承中的原型鏈繼承。

web前端tips:js繼承——原型鏈繼承。

在文章末尾,我提到了。

原型鏈的繼承,子類需要傳遞引數給父類的建構函式,就無法通過直接呼叫父類的建構函式來實現,需要通過中間的過程來傳遞引數。

那這篇文章,也就能解決這個傳參問題了。

又叫經典繼承,它通過在子類建構函式中呼叫父類建構函式來繼承父類的屬性和方法。

借用建構函式繼承的核心思想是,在子類建構函式中使用call()apply()方法呼叫父類建構函式,並將子類例項作為引數傳遞給父類建構函式。這樣就能夠在子類例項中建立父類的屬性,並且每個子類例項都有它們自己的屬性副本。

以下是借用建構函式繼承的基本步驟:

定義父類建構函式,設定父類的屬性和方法。

定義子類建構函式,使用parent.call(this, .在子類中呼叫父類建構函式,並傳遞子類特有的引數。

在子類建構函式中定義子類的屬性和方法。

// 1function parent(name) /2function child(name, age) /例項化var child = new child('我是 child', 666)child.name //我是 childchild.arr //1,2,3]child.age //666
通過以上步驟,我們就實現了簡單的借用建構函式繼承,也解決了原型鏈繼承傳參問題。

並且由於每個子類例項都有它們自己的屬性副本,所以對屬性修改是不會互相影響的:

var child1 = new child('我是 child1', 111)var child2 = new child('我是 child2', 222)child1.arr.push(4)child1.arr //1,2,3,4]child2.arr //1,2,3]
子類例項具有獨立的屬性,不會共享父類例項的屬性。

子類可以向父類建構函式傳遞引數。

無法繼承父類原型鏈上的方法和屬性,只能繼承父類建構函式中的屬性和方法。

function parent(name) parent.prototype.getarr = function() function child() 例項化var child = new child()child.getarr() uncaught typeerror: child.getarr is not a function
父類的方法無法復用,每個子類例項都會建立乙份方法的副本。

需要注意的是,借用建構函式繼承只是繼承了父類建構函式中的屬性和方法,並沒有真正實現完全的繼承。如果希望子類也能繼承父類的原型鏈上的方法和屬性,可以使用其他方式,如組合繼承、寄生組合繼承等。

牽手 持續為你分享各類知識和軟體 ,歡迎訪問、關注、討論 並留下你的小心心❤

web前端開發技術要如何應用於網站建設當中呢?

我們如果說要想掌握前端開發技術,那麼就需要對於前端開發形式以及應用進行把握。目前,已經有很多網頁設計中都用到b s結構框架。的使用者在瀏覽器使用中,一般都需要經歷三個主要步驟,首先,的使用者可以在瀏覽器頁面將自己要搜尋的關鍵詞輸入其中,點選查詢需要的資訊資料,然後再對於web進行url的訪問申請,此後,...

前端開發筆記(九)

字型 font family 字型樣式 設定傾斜 font style,值有 normal 正常 italic 斜體字 oblique 傾斜 後兩者顯示相近。字型字型大小 大小 font size,單位可用px em 百分比。字型字重 粗細 font weight,值有 normal 正常 bold...

從菜鳥到前端工程師 4個月學前端工作靠譜嗎?

你是乙個菜鳥程式設計師,並且計畫學習前端開發,成為一名前端工程師嗎?從乙個菜鳥小白到成為一名前端工程師,用4個月的時間,靠譜嗎?畢竟現在有的培訓班打著4個月就能學成就業的旗號招生,這樣能成功嗎?學習前端開發需要時間和努力。前端開發涉及html css和j ascript等技術,以及框架如react或...