慎用 somefunction.prototype 分析
// code from jb51.net
function Person(name) {
this.Name = name;
}
Person.prototype.SayHello = function() {
alert('Hello, ' + this.Name);
}
Person.prototype.SayBye = function() {
alert('Goodbye, ' + this.Name);
}
不過,有的時(shí)候,為了書寫以及維護(hù)的方便,我們會(huì)把公有方法的聲明寫到一個(gè)對(duì)象里,然后賦值給 Person.prototype,例如:
// code from jb51.net
function Person(name) {
this.Name = name;
}
Person.prototype = {
SayHello: function() {
alert('Hello, ' + this.Name);
},
SayBye: function() {
alert('Goodbye, ' + this.Name);
}
}
使用這種方式,在這個(gè)類具有大量公有方法的時(shí)候,就不需要維護(hù)許多的 Person 標(biāo)識(shí)符,如果某一天這個(gè)類的名字需要改變,那么要改的地方只有兩個(gè),一個(gè)是 function 的聲明,一個(gè)是 prototype 前面的標(biāo)識(shí)符,如果是使用前一種方式的話,那么有多少個(gè)公有方法,就需要維護(hù) N+1 個(gè)標(biāo)識(shí)符了,雖然可以使用查找替換,但是從穩(wěn)定上來說,查找替換可能會(huì)引起一些錯(cuò)誤,這增加了維護(hù)的成本。
這種方式雖然給我們的維護(hù)增加了便利,但也引發(fā)了另外一個(gè)隱藏的問題,就是類的 constructor 屬性丟失的問題。
// code from jb51.net
function Person1(name) {
this.Name = name;
}
Person1.prototype.SayHello = function() {
alert('Hello, ' + this.Name);
}
Person1.prototype.SayBye = function() {
alert('Goodbye, ' + this.Name);
}
// code from jb51.net
function Person2(name) {
this.Name = name;
}
Person2.prototype = {
SayHello: function() {
alert('Hello, ' + this.Name);
},
SayBye: function() {
alert('Goodbye, ' + this.Name);
}
}
alert(new Person1('Bill').constructor);
alert(new Person2('Steve').constructor);
運(yùn)行上面的測試代碼我們可以發(fā)現(xiàn),Person1 的 constructor 屬性為 Person1 類的構(gòu)造函數(shù),但是 Person2 的 constructor 屬性卻是 Object,那么在需要使用 constructor 屬性來判斷對(duì)象類型的時(shí)候,就會(huì)出現(xiàn)問題。
因此,在寫 JavaScript 類的時(shí)候,如果不需要使用 constructor 屬性來獲取對(duì)象的類型,那么個(gè)人比較傾向于使用第二種寫法,但是如果需要使用 constructor 屬性以實(shí)現(xiàn)自己的反射機(jī)制或 GetType 函數(shù)等等,那么就要使用第一種寫法。
當(dāng)然,如果在實(shí)現(xiàn)自己反射機(jī)制或 GetType 函數(shù)時(shí)并不依賴 constructor 屬性,那么兩種寫法都是可以的了,例如額外維護(hù)一個(gè)成員變量,用于標(biāo)識(shí)自身的類型等。也可以使用一些現(xiàn)成的JS框架,有一些框架已經(jīng)實(shí)現(xiàn)了JS中類的實(shí)現(xiàn)等,例如 js.class,這就看個(gè)人需要進(jìn)行取舍了。
相關(guān)文章
在layui中使用form表單監(jiān)聽ajax異步驗(yàn)證注冊(cè)的實(shí)例
今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽ajax異步驗(yàn)證注冊(cè)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例
這篇文章主要介紹了微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例,具有一定的參考價(jià)值有興趣的可以了解一下。2016-12-12JavaScript最完整的深淺拷貝實(shí)現(xiàn)方式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript最完整的深淺拷貝實(shí)現(xiàn)方式,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02js 實(shí)現(xiàn)無干擾陰影效果 簡單好用(附文件下載)
js實(shí)現(xiàn)無干擾陰影效果,簡單好用,需要的朋友可以參考下。2009-12-12微信小程序 仿美團(tuán)分類菜單 swiper分類菜單
本文主要介紹了微信小程序仿美團(tuán)分類菜單(swiper分類菜單)的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04JS實(shí)現(xiàn)的用來對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同
這篇文章主要介紹了JS實(shí)現(xiàn)的用來對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同,本文代碼為特殊需要而寫,需要的朋友可以參考下2014-09-09js中通過split函數(shù)分割字符串成數(shù)組小例子
分割字符串成數(shù)組的方法有很多,不過使用最多的還是split函數(shù),接下來為大家介紹下它的具體使用方法,感興趣的朋友可以參考下2013-09-09JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03