JS 繼承的介紹與實現

2021-10-06 04:45:32 字數 3219 閱讀 9916

js 是一種物件導向的 弱型別的 解釋性的語言

弱型別 宣告變數的時候不需要註明資料型別

int a =

1;

float//(強型別)

var a=

1.2;

解釋性 解釋一句執行一句 編譯性 一次性全部翻譯完 然後再執行

物件導向 封裝 繼承 多型 (js語言沒有多型)

封裝 將乙個功能都放在乙個物件裡面 只需要向外界暴露乙個介面 需要使用的時候 直接調介面就可以了並不需要管底層是怎麼實現的

push //向陣列的最後新增乙個元素

var arr=[12

,23];

arr.

push(15

);

繼承:是指js物件之間的繼承 如果我們想讓乙個物件擁有另乙個物件的屬性或者方法 那麼就可以讓這個物件繼承另乙個物件

1.實現建構函式來實現繼承

實現方式:使用call等方法 是乙個物件的this指向另乙個物件 從而讓其擁有這個物件的屬性和方法

缺點:無法繼承父類原型上面的方法 對於子類不需要的方法 每次建立都會擁有 浪費記憶體空間

有很多建構函式的情況下,如果需要給所有的建構函式新增屬性 ,那麼就需要分別去加 就不便於維護

function

perent

(name,age)}

perent.prototype.

test

=function()

perent.prototype.type=

"人類"

;var p1=

newperent

("父親",36

);// function child(name,age,gender)

// var c1=new child("孩子",12);

function

child

(name,age)

var c2=

newchild

("amy",12

);console.

log(c2)

; //報錯

c2.work()

//執行了函式體

就是說只是把父親建構函式裡面的屬性和方法繼承了 但是父類原型裡面的方法繼承不了

建立的child物件並不需要work方法 但每次建立都會有 浪費空間

2.原型拷貝繼承(混入式繼承)

實現方式:使用for-in遍歷父類原型裡面的所有屬性 依次加入子類的原型中

缺點:原型中子類不需要的方法或者屬性也繼承過來了 占用記憶體空間

function

perent

(name,age)}

perent.prototype.

test

=function()

perent.prototype.type=

"人類"

;function

child

(name,age)

//原型物件拷貝

for(

var key in perent.prototype)

var c1=

newchild

("張三",12

);c1.

test()

; console.

log(c1.type)

;

3.原型鏈繼承

實現方法:利用原型鏈來實現繼承 父類的乙個例項化物件作為子類的原型

缺點:子類例項和父類例項的原型物件上有成員的共享問題

function

perent

(name,age)}

perent.prototype.

test

=function()

perent.prototype.type=

"人類"

;function

child

(name,age)

child.prototype=

newperent()

; console.

log(child.prototype.constructor)

;//重新替換原型之後 建構函式並不指向原建構函式 所以要將建構函式指向原函式

child.prototype.constructor=child;

child.prototype=

newperent()

;var c1=

newchild

("張三",12

);console.

log(c1.type)

; c1.

test()

;

為什麼不直接使用child.prototype=perent?

把父類的建構函式直接替換掉子類的原型會導致 父類建構函式的私有屬性發生變化

甚至有些成員 父類建構函式並不需要

child.prototype=perent;

child.prototype.

study

=function()

console.

dir(perent)

; perent.

study()

;

4.組合繼承(原型鏈 和call繼承組合)

function

father()

} father.prototype=

}function

son(age)

}//繼承父類原型中的成員

son.prototype=

newfather()

; son.prototype.constructor=son;

son.prototype.

sleep

=function()

var s1=

newson(12

);//這個是父類建構函式裡面的方法

s1.run();

//是父類原型裡面的方法

s1.eat();

console.

log(s1.type)

;//自己建構函式裡面的方法

s1.study()

;//自己的原型裡面的方法

s1.sleep()

;

js 繼承介紹

js中繼承的方式並不是明確的,這裡介紹常用的幾種 一 物件冒充 建構函式繫結 function monkey function magicmonkey 二 原型鏈 原理 使用prototype屬性,prototype物件是個模版,要例項化的物件都以這個模版為基礎,總而言之,prototype物件的任...

js繼承的實現

1 繼承第一種方式 物件冒充 function parent username function child username,password var parent new parent zhangsan var child new child lisi 123456 parent.hello c...

js繼承的實現

js繼承有5種實現方式 1 繼承第一種方式 物件冒充 function parent username function child username,password var parent new parent zhangsan var child new child lisi 123456 pa...