快捷導(dǎo)航

js面向?qū)ο蟮膶?xiě)法

更新時(shí)間：2016年02月19日 16:45:55 投稿：lijiao

這篇文章主要介紹了四種js面向?qū)ο蟮某Ｒ?jiàn)寫(xiě)法，還介紹了有關(guān)this的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下

本文歸納了js面向?qū)ο蟮膸追N常見(jiàn)寫(xiě)法，分享給大家供大家參考，具體內(nèi)容如下
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.比較正規(guī)的寫(xiě)法

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寫(xiě)法

var Circle={
 "PI":3.14159,
 "area":function(r){
   return this.PI * r * r;
  }
};
alert( Circle.area(1.0) );

4.有點(diǎn)變化，但是實(shí)質(zhì)和第一種一樣

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; 能夠放入屬性中寫(xiě)成this.PI=3.14159;

常用為第一種和第三種，第三種寫(xiě)法的擴(kuò)展小實(shí)例

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的指向問(wèn)題，下面是關(guān)于this的一點(diǎn)點(diǎn)介紹，希望對(duì)大家有幫助。
一開(kāi)始采用動(dòng)態(tài)原型方法在js中創(chuàng)建自定義的對(duì)象，this也用著很順的。
這種方法中對(duì)于在對(duì)象內(nèi)部對(duì)變量的創(chuàng)建和使用都是用"this."開(kāi)頭的。
比如：對(duì)象ContactModel,有三個(gè)屬性，crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四個(gè)方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在這個(gè)變量?jī)?nèi)部如要訪問(wèn)自己的屬性，都要帶上"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;
 };
}

但這時(shí)問(wèn)題出現(xiàn)了，在requestFindUser ()內(nèi)，若用this.crtFindedUserID來(lái)存儲(chǔ)服務(wù)端傳來(lái)的數(shù)值，那么在之后此對(duì)象被調(diào)用了requestAddContact()方法后，是拿不到crtFindedUserID這個(gè)值的，alert里顯示的依然會(huì)是初始值-1,問(wèn)題就出在$.getJSON()的回調(diào)方法內(nèi)，此時(shí)的this指的不是ContactModel的實(shí)例，而是此方法體，所以這里的解決辦法就是在這個(gè)回調(diào)方法內(nèi)拿到ContectModel的實(shí)例，然后給這個(gè)實(shí)例的屬性crtFindedUserID賦值。
在對(duì)象內(nèi)部對(duì)視圖組件的監(jiān)聽(tīng)回調(diào)方法里，this指向的也不是對(duì)象本身，同樣還是這個(gè)被回調(diào)的方法體，這時(shí)若要訪問(wèn)對(duì)象本身的屬性，就要拿到此對(duì)象的實(shí)例來(lái)訪問(wèn)，而不是用this.
下面是一段JS面向?qū)ο蟮臉?biāo)準(zhǔn)寫(xiě)法：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>新建網(wǎng)頁(yè) 1</title> 
<mce:script type=text/javascript><!-- 
 var person=function(name,age){//定義對(duì)象構(gòu)造方法 
  this.name=name; 
  this.age=age; 
 } 
 person.prototype={ //封裝方法 
  getName:function(){ 
   alert(this.name); 
  }, 
  getAge:function(){ 
   alert(this.age); 
  } 
 } 
 
 function test(){//聲明調(diào)用 
  var man=new person('jack',12); 
  man.getName() 
  man.getAge() 
 } 
  
 var test2 ={ //類似靜態(tài)方法 調(diào)用直接：test2.te();即可 
  te:function(){ 
   alert(); 
  }, 
  te1:function(){ 
   alert(); 
  } 
 } 
// --></mce:script> 
</head> 
<body> 
 <input type=button onclick="test()"/> 
</body> 
</html>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: