詳解一個小實例理解js原型和繼承
導語1:一個構造函數(shù)的原型對象,其實就是這個構造函數(shù)的一個屬性而已,屬性名叫prototype,值是一個對象,對象中有一些屬性和方法,所以每個構造函數(shù)的實例對象都擁有這些屬性和方法的使用權。
導語2:構造函數(shù)需要用 new 操作符來調用,它本身沒有任何意義,只有實例化后才有生命,當然你也可以把它當普通函數(shù)使用,那this就是指向window了(意義不大)。
導語3:對于構造函數(shù)實例化出一個對象經(jīng)歷了什么?
我們看下面這個例子:

這個例子充分說明了,大佬們創(chuàng)造出構造函數(shù)這種東西,是有特殊用處的,本身沒什么意義,在實例化后瞬間有了生命。
好了有這些準備工作后,我們開始寫一個構造函數(shù)+原型用法
廢話不多說直接上代碼?。?!

1,這個例子中有個構造函數(shù),名字叫GetElem,參數(shù)期望傳入的是一個元素的id,可以獲取這個id的元素;
2,實例化一個叫domOne的對象,它傳入一個實參為:“old”;所以它可以獲取這個id為old的元素
3,在構造函數(shù)的原型上定義一個方法叫:changeInner 作用是如果傳入了實參就用實參來改變元素的內容
4,在構造函數(shù)的原型上定義一個方法叫:on作用是根據(jù)事件類型和對應函數(shù)干一些事情;
domOne這個實例化對象中并沒有這兩個方法,但是沒關系,它的原型對象上擁有?。。?!所以可以直接用;
您一定會問為何不直接把方法寫在構造函數(shù)中不就省事了?原因是這樣的話,每實例化一個對象都要在實例化過程中創(chuàng)建這些方法,
如果實例化太多就消耗性能,而放在原型對象上就只需要做一次。這也是構造函數(shù)+原型優(yōu)于工廠模式的方面。
最后一張圖:

方法可以鏈接起來寫的原因是 在每個方法中 return this (this指向的是實例對象,當然可以繼續(xù)調用它可以調用的方法啦?。。?
以上所述是小編給大家介紹的js原型和繼承詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JS中call(),apply(),bind()函數(shù)的區(qū)別與用法詳解
這篇文章主要介紹了JS中call(),apply(),bind()函數(shù)的高級用法詳解,需要的朋友可以參考下2022-12-12
利用JavaScript將普通數(shù)字轉換為帶有千分位分隔符格式的多種實現(xiàn)方法
如何利用 JavaScript 將普通數(shù)字轉換為帶有千分位分隔符的格式,我們將介紹多種方法,包括使用內置的 toLocaleString() 方法、Intl.NumberFormat 對象以及自定義函數(shù)來實現(xiàn)數(shù)字格式化,需要的朋友可以參考下2023-12-12
詳解設置Webstorm 利用babel將ES6自動轉碼成ES5
這篇文章主要介紹了詳解設置Webstorm 利用babel將ES6自動轉碼成ES5,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12

