Rumah >hujung hadapan web >tutorial js >js kemahiran menulis kaedah_javascript berorientasikan objek

js kemahiran menulis kaedah_javascript berorientasikan objek

WBOYasal: 2016-05-16 15:14:501523semak imbas

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

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

kaedah penulisan 3.json

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

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

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

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

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

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery+PHP+MySQL mencapai kotak drop-down lata tanpa had effect_jqueryArtikel seterusnya：jQuery+PHP+MySQL mencapai kotak drop-down lata tanpa had effect_jquery

Artikel berkaitan

Lihat lagi