js kemahiran menulis kaedah_javascript berorientasikan objek-tutorial js-php.cn

js kemahiran menulis kaedah_javascript berorientasikan objek

WBOY

Lepaskan： 2016-05-16 15:14:50

asal

1513 orang telah melayarinya

Artikel ini meringkaskan beberapa cara biasa untuk menulis js berorientasikan objek dan berkongsi dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut
1.Kaedah kilang

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 ) );

Salin selepas log masuk

2. Penulisan yang lebih formal

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());

Salin selepas log masuk

kaedah penulisan 3.json

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

Salin selepas log masuk

4. Ada sedikit perubahan, tetapi intipatinya sama seperti yang pertama

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()

Salin selepas log masuk

Circle.PI = 3.14159; boleh dimasukkan ke dalam atribut dan ditulis seperti ini.PI=3.14159;

Lazim digunakan ialah cara pertama dan ketiga, dan contoh lanjutan cara penulisan ketiga

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();

Salin selepas log masuk

Apa yang perlu diberi perhatian ialah masalah yang menonjol ini sedikit pengenalan tentang ini Saya harap ia akan membantu semua orang.
Pada mulanya, kaedah prototaip dinamik digunakan untuk mencipta objek tersuai dalam js, dan ini juga digunakan dengan sangat lancar.
Dalam kaedah ini, penciptaan dan penggunaan pembolehubah dalam objek bermula dengan "ini.".
Contohnya: objek ContactModel mempunyai tiga atribut , crtnewFriendListLen, crtNewFriendList, crtFindedUserID
dan empat kaedah requestContactList(), requestNewfriendList(), requestFindUser(), requestAddContact()
Jika anda ingin mengakses sifat anda sendiri dalam pembolehubah ini, anda mesti membawa "ini."

var contactModel;
...
contactModel = new ContactModel();

Salin selepas log masuk

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;
 };
}

Salin selepas log masuk

Tetapi masalah timbul pada masa ini Dalam requestFindUser (), jika this.crtFindedUserID digunakan untuk menyimpan nilai yang dihantar daripada pelayan, maka selepas kaedah requestAddContact() dipanggil pada objek ini, crtFindedUserID tidak boleh diperolehi. nilai, nilai awal yang dipaparkan dalam makluman masih akan menjadi -1 Masalahnya terletak pada kaedah panggil balik $.getJSON(). di sini ialah Caranya ialah untuk mendapatkan contoh ContactModel dalam kaedah panggil balik ini, dan kemudian berikan nilai kepada atribut crtFindedUserID bagi contoh ini.
Dalam kaedah panggil balik mendengar komponen paparan di dalam objek, ini tidak menunjuk kepada objek itu sendiri, tetapi juga badan kaedah yang dipanggil semula Pada masa ini, jika anda ingin mengakses sifat objek itu sendiri, anda mesti mendapatkan contoh objek ini untuk mengakses dan bukannya menggunakan ini.
Berikut ialah kaedah penulisan standard untuk JS berorientasikan objek :

<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>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.