首頁 > 開發者 > JavaScript
js物件導向的寫法，js物件導向寫法
本文歸納了js物件導向的幾種常見寫法，分享給大家供大家參考，具體內容如下
1.工廠方式
var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj;}var c = new Circle();alert( c.area( 1.0 ) );
2.比較正規的寫法
function Circle(r) { this.r = r;}Circle.PI = 3.14159;Circle.prototype.area = function() { return Circle.PI * this.r * this.r;}var c = new Circle(1.0); alert(c.area());
3.json寫法
var Circle={ "PI":3.14159, "area":function(r){ return this.PI * r * r; }};alert( Circle.area(1.0) );
4.有點變化，但是實質和第一種一樣
var Circle=function(r){ this.r=r;}Circle.PI = 3.14159; Circle.prototype={ area:function(){ return this.r*this.r*Circle.PI; }}var obj=new Circle(1.0);alert(obj.area()
Circle.PI = 3.14159; 能夠放入屬性中寫成this.PI=3.14159;
常用為第一種和第三種，第三種寫法的擴充小執行個體
var show={ btn:$('.div1'), init:function(){ var that=this; alert(this); this.btn.click(function(){ that.change(); alert(this); }) }, change:function(){ this.btn.css({'background':'green'}); } } show.init();
需要注意的是this的指向問題，下面是關於this的一點點介紹，希望對大家有協助。
一開始採用動態原型方法在js中建立自訂的對象，this也用著很順的。
這種方法中對於在對象內部對變數的建立和使用都是用"this."開頭的。
比如：對象ContactModel,有三個屬性，crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四個方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在這個變數內部如要訪問自己的屬性，都要帶上"this."
var contactModel;...contactModel = new ContactModel();
function ContactModel(){ // this.contactList; this.crtnewFriendListLen; this.crtNewFriendList; this.crtFindedUserID = "-1"; if(typeof ContactModel._initialized == "undefined") { ContactModel.prototype.requestContactList = function() { } ContactModel.prototype.requestNewfriendList = function() { } ContactModel.prototype.requestFindUser = function(userID) { $.getJSON(mainUrl + "User/getuserinfo",{"uid":userID},function(resultObj) { // this.crtFindedUserID = userID contactModel.crtFindedUserID = userID; uiManager.contectAddPage.receiveFindUserResult(resultObj); }); } ContactModel.prototype.requestAddContact = function(remark) { alert(this.crtFindedUserID); } ContactModel._initialized = true; };}
但這時問題出現了，在requestFindUser ()內，若用this.crtFindedUserID來儲存服務端傳來的數值，那麼在之後此對象被調用了requestAddContact()方法後，是拿不到crtFindedUserID這個值的，alert裡顯示的依然會是初始值-1,問題就出在$.getJSON()的回調方法內，此時的this指的不是ContactModel的執行個體，而是此方法體，所以這裡的解決辦法就是在這個回調方法內拿到ContectModel的執行個體，然後給這個執行個體的屬性crtFindedUserID賦值。
在對象內部對視圖組件的監聽回調方法裡，this指向的也不是對象本身，同樣還是這個被回調的方法體，這時若要訪問對象本身的屬性，就要拿到此對象的執行個體來訪問，而不是用this.
下面是一段JS物件導向的標準寫法：
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>建立網頁 1</title> <mce:script type=text/javascript><!-- var person=function(name,age){//定義物件建構方法 this.name=name; this.age=age; } person.prototype={ //封裝方法 getName:function(){ alert(this.name); }, getAge:function(){ alert(this.age); } } function test(){//聲明調用 var man=new person('jack',12); man.getName() man.getAge() } var test2 ={ //類似靜態方法 調用直接：test2.te();即可 te:function(){ alert(); }, te1:function(){ alert(); } } // --></mce:script> </head> <body> <input type=button onclick="test()"/> </body> </html>
希望本文所述對大家學習javascript程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
