Js組件的一些寫法


首先看下Prototype里的寫法: 

var Class = { 
create: function() { 
return function() { this.init.apply(this, arguments); } 
} 
} 
var A = Class.create(); 
A.prototype = { 
init: function(msg) { 
this.msg = msg; 
}, 
fn: function() { 
alert(this.msg); 
} 
} 
var a = new A("myMsg"); 
a.fn(); 

如果你不喜歡上面這一大堆Class.create之類的,你也可以這樣:

function A() { } //var A = function(){} 
A.prototype = { 
init: function(msg) { 
this.msg = msg; 
}, 
fn: function() { 
alert(this.msg); 
} 
} 
var a = new A(); 
a.init("myMsg"); 
a.fn(); 

當然,也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。總之你會發現這樣調用很麻煩,並且參數是固定對應好的。 
你如果既不願搞一大堆Class.create,也不願調用不方便,那就把Prototype里的var Class = {...} 和 var A = Class.create();合並起來。得到: 

function A() { 
this.init.apply(this, arguments); 
} 
A.prototype = { 
init: function(msg) { 
this.msg = msg; 
}, 
fn: function() { 
alert(this.msg); 
} 
} 
var a = new A("myMsg"); 
a.fn(); 

看上去干凈了許多,但是如果你的庫里有很多組件,則每個組件都要寫一遍this.init.apply(this, arguments); 如果用Class.create的話,則只要寫一個Class,然后每個組件執行下Class.create()即可。當然,每個組件都寫一遍this.init.apply(this, arguments);也沒啥不好的,還是看個人喜好了。另外寫原型方法是合在一起還是分開來寫也是個人喜好,出於封裝的角度,合一起好,但是分開有時候顯的更清晰。譬如A.prototype.init=function(msg){...} A.prototype.fn=function(){...} 

然后還有人喜歡這樣去寫組件: 

var A = function(msg) { 
this.msg = msg; 
var _this = this; 
var privateFn1 = function() { 
alert(_this.msg); 
} 
var privateFn2 = function() { 
alert(_this.msg); 
} 
return { fn1: privateFn1, fn2: privateFn2 }; 
} 
var a = new A("myMsg"); 
a.fn1(); 

這邊一定要把A構造的對象this放到臨時變量_this中哦,因為運行時,privateFn1的函數體內this實際是{fn1:...,fn2:...}這樣的匿名對象,你可以用this.hasOwnProperty("fn1")去測試。this是在運行時才有意義的一個東西。另外這種方法每個對象都會有privateFn1 和 privateFn2的副本,這種方法不太好。 


免責聲明!

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



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