詳解一個(gè)小實(shí)例理解js原型和繼承

導(dǎo)語1：一個(gè)構(gòu)造函數(shù)的原型對(duì)象，其實(shí)就是這個(gè)構(gòu)造函數(shù)的一個(gè)屬性而已，屬性名叫prototype,值是一個(gè)對(duì)象，對(duì)象中有一些屬性和方法，所以每個(gè)構(gòu)造函數(shù)的實(shí)例對(duì)象都擁有這些屬性和方法的使用權(quán)。

導(dǎo)語2：構(gòu)造函數(shù)需要用 new 操作符來調(diào)用，它本身沒有任何意義，只有實(shí)例化后才有生命，當(dāng)然你也可以把它當(dāng)普通函數(shù)使用，那this就是指向window了（意義不大）。

導(dǎo)語3：對(duì)于構(gòu)造函數(shù)實(shí)例化出一個(gè)對(duì)象經(jīng)歷了什么？

我們看下面這個(gè)例子：

這個(gè)例子充分說明了，大佬們創(chuàng)造出構(gòu)造函數(shù)這種東西，是有特殊用處的，本身沒什么意義，在實(shí)例化后瞬間有了生命。

 好了有這些準(zhǔn)備工作后，我們開始寫一個(gè)構(gòu)造函數(shù)+原型用法

廢話不多說直接上代碼?。?！

1，這個(gè)例子中有個(gè)構(gòu)造函數(shù)，名字叫GetElem,參數(shù)期望傳入的是一個(gè)元素的id,可以獲取這個(gè)id的元素；

2，實(shí)例化一個(gè)叫domOne的對(duì)象，它傳入一個(gè)實(shí)參為：“old”;所以它可以獲取這個(gè)id為old的元素

3，在構(gòu)造函數(shù)的原型上定義一個(gè)方法叫：changeInner 作用是如果傳入了實(shí)參就用實(shí)參來改變?cè)氐膬?nèi)容

4，在構(gòu)造函數(shù)的原型上定義一個(gè)方法叫：on作用是根據(jù)事件類型和對(duì)應(yīng)函數(shù)干一些事情；

domOne這個(gè)實(shí)例化對(duì)象中并沒有這兩個(gè)方法，但是沒關(guān)系，它的原型對(duì)象上擁有啊?。?！所以可以直接用；

您一定會(huì)問為何不直接把方法寫在構(gòu)造函數(shù)中不就省事了？原因是這樣的話，每實(shí)例化一個(gè)對(duì)象都要在實(shí)例化過程中創(chuàng)建這些方法，

如果實(shí)例化太多就消耗性能，而放在原型對(duì)象上就只需要做一次。這也是構(gòu)造函數(shù)+原型優(yōu)于工廠模式的方面。

 最后一張圖：

方法可以鏈接起來寫的原因是  在每個(gè)方法中  return this (this指向的是實(shí)例對(duì)象，當(dāng)然可以繼續(xù)調(diào)用它可以調(diào)用的方法啦！！！)

以上所述是小編給大家介紹的js原型和繼承詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！