慎用 somefunction.prototype 分析
2024-05-06 14:15:11
供稿：網友
代碼如下:
// code from Vevb.com
function Person(name) {
this.Name = name;
}
Person.prototype.SayHello = function() {
alert('Hello, ' + this.Name);
}
Person.prototype.SayBye = function() {
alert('Goodbye, ' + this.Name);
}
不過，有的時候，為了書寫以及維護的方便，我們會把公有方法的聲明寫到一個對象里，然后賦值給 Person.prototype，例如：
代碼如下:
// code from Vevb.com
function Person(name) {
this.Name = name;
}
Person.prototype = {
SayHello: function() {
alert('Hello, ' + this.Name);
},
SayBye: function() {
alert('Goodbye, ' + this.Name);
}
}
使用這種方式，在這個類具有大量公有方法的時候，就不需要維護許多的 Person 標識符，如果某一天這個類的名字需要改變，那么要改的地方只有兩個，一個是 function 的聲明，一個是 prototype 前面的標識符，如果是使用前一種方式的話，那么有多少個公有方法，就需要維護 N+1 個標識符了，雖然可以使用查找替換，但是從穩定上來說，查找替換可能會引起一些錯誤，這增加了維護的成本。
這種方式雖然給我們的維護增加了便利，但也引發了另外一個隱藏的問題，就是類的 constructor 屬性丟失的問題。
代碼如下:
// code from Vevb.com
function Person1(name) {
this.Name = name;
}
Person1.prototype.SayHello = function() {
alert('Hello, ' + this.Name);
}
Person1.prototype.SayBye = function() {
alert('Goodbye, ' + this.Name);
}
// code from Vevb.com
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);
運行上面的測試代碼我們可以發現，Person1 的 constructor 屬性為 Person1 類的構造函數，但是 Person2 的 constructor 屬性卻是 Object，那么在需要使用 constructor 屬性來判斷對象類型的時候，就會出現問題。
因此，在寫 JavaScript 類的時候，如果不需要使用 constructor 屬性來獲取對象的類型，那么個人比較傾向于使用第二種寫法，但是如果需要使用 constructor 屬性以實現自己的反射機制或 GetType 函數等等，那么就要使用第一種寫法。
當然，如果在實現自己反射機制或 GetType 函數時并不依賴 constructor 屬性，那么兩種寫法都是可以的了，例如額外維護一個成員變量，用于標識自身的類型等。也可以使用一些現成的JS框架，有一些框架已經實現了JS中類的實現等，例如 js.class，這就看個人需要進行取舍了。
