一個小實例理解js 原型和繼承


導語1:一個構造函數的原型對象,其實就是這個構造函數的一個屬性而已,屬性名叫prototype,值是一個對象,對象中有一些屬性和方法,所以每個構造函數的實例對象都擁有這些屬性和方法的使用權。

導語2:構造函數需要用 new 操作符來調用,它本身沒有任何意義,只有實例化后才有生命,當然你也可以把它當普通函數使用,那this就是指向window了(意義不大)。

導語3:對於構造函數實例化出一個對象經歷了什么?

     我們看下面這個例子:

 

這個例子充分說明了,大佬們創造出構造函數這種東西,是有特殊用處的,本身沒什么意義,在實例化后瞬間有了生命。

 

好了有這些准備工作后,我們開始寫一個構造函數+原型用法

廢話不多說直接上代碼!!!

1,這個例子中有個構造函數,名字叫GetElem,參數期望傳入的是一個元素的id,可以獲取這個id的元素;

2,實例化一個叫domOne的對象,它傳入一個實參為:“old”;所以它可以獲取這個id為old的元素

3,在構造函數的原型上定義一個方法叫:changeInner 作用是如果傳入了實參就用實參來改變元素的內容

4,在構造函數的原型上定義一個方法叫:on作用是根據事件類型和對應函數干一些事情;

domOne這個實例化對象中並沒有這兩個方法,但是沒關系,它的原型對象上擁有啊!!!所以可以直接用;

您一定會問為何不直接把方法寫在構造函數中不就省事了?原因是這樣的話,每實例化一個對象都要在實例化過程中創建這些方法,

如果實例化太多就消耗性能,而放在原型對象上就只需要做一次。這也是構造函數+原型優於工廠模式的方面。

 

 最后一張圖:

 方法可以鏈接起來寫的原因是  在每個方法中  return this (this指向的是實例對象,當然可以繼續調用它可以調用的方法啦!!!)

 

 

 

 

 

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM