js繼承的初步理解

2021-10-07 11:37:19 字數 2669 閱讀 5785

//這是乙個父類

function

father

(fathername)

}}

function

son1()

son1.prototype =

newfather

('父類');

//繼承了父類的所有屬性

let a1 =

newson1()

;let a2 =

newson1()

;console.

log(a1.fathername)

;//輸出:父類

console.

log(a1.sonname)

;//輸出:子類

console.

log(a1.fatherrole)

;//輸出:['a','b']

a1.fatherrole.

push

('c');

//改變a1物件中的fatherrole

console.

log(a1.fatherrole)

;//輸出:['a','b','c']

console.

log(a2.fatherrole)

;//輸出:['a','b','c']、此時 a2 物件也發生了改變

a1.eat()

;//彈出提示框

注:原型鏈繼承的缺點

1、父型別的屬性共享問題:子型別原型(父型別物件)中的屬性被所有的子型別的例項所共有,如果有個乙個例項去更改,則會很快反應的其他的例項上

2、向父型別的建構函式中傳遞引數問題:只有乙個地方用到了父型別的建構函式,son.prototype = new father();。只能在這個乙個位置傳遞引數,但是這個時候傳遞的引數,將來對子型別的所有的例項都有效

function

son2

(name)

let b1 =

newson2

('父類1');

let b2 =

newson2

('父類2');

console.

log(b1.fathername)

;//輸出:父類1

console.

log(b2.fathername)

;//輸出:父類2

console.

log(b1.sonname)

;//輸出:子類

console.

log(b2.sonname)

;//輸出:子類

b1.fatherrole.

push

('c');

//改變b1物件中的fatherrole

console.

log(b1.fatherrole)

;//輸出:['a','b','c']

console.

log(b2.fatherrole)

;//輸出:['a','b']

b1.eat()

;//報錯,找不到eat方法,因為son2本身中沒有這個方法

注:借用方式『繼承』的缺點

1、father的原型物件中的共享屬性和方法,son沒有辦法獲取。因為這個根本就不是真正的繼承

function

son3

(name)

son3.prototype =

newfather()

;let c1 =

newson3

('父類1');

let c2 =

newson3

('父類2');

console.

log(c1.fathername)

;//輸出:父類1

console.

log(c2.fathername)

;//輸出:父類2

console.

log(c1.sonname)

;//輸出:子類

console.

log(c2.sonname)

;//輸出:子類

c1.fatherrole.

push

('c');

//改變c1物件中的fatherrole

console.

log(c1.fatherrole)

;//輸出:['a','b','c']

console.

log(c2.fatherrole)

;//輸出:['a','b']

c1.eat()

;//彈出提示框

注:組合繼承

1、組合繼承是我們實際使用中最常用的一種繼承方式。

2、可能有個地方有些人會有疑問:son.prototype = new father( );這不照樣把父型別的屬性給放在子型別的原型中了嗎,還是會有共享問題呀。但是不要忘記了,我們在子型別的建構函式中借調了父型別的建構函式,也就是說,子型別的原型(也就是father的物件)中有的屬性,都會被子類物件中的屬性給覆蓋掉。就是這樣的

JS繼承的理解

function person name person.prototype.getname function function young age young.prototype newperson let young newyoung 22 控制台測試列印結果 將父類的例項作為子類的原型,這樣子類...

js 資料型別的初步理解

1 js中的型別 字串 數字 布林 陣列 物件 null undefined 基本資料型別 null undefined boolean number string console.log typeof 1 number console.log typeof a string console.log...

深入理解js繼承

var nam var man1 man1.name hkj man1.age 20 function man name,age var man2 man hkj 20 function man name,age var man3 new man3 hkj 20 vat man4 new man4 ...