js méthode d'écriture orientée objet_compétences javascript

Cet article résume plusieurs façons courantes d'écrire du js orienté objet et le partage avec vous pour votre référence. Le contenu spécifique est le suivant
. 1.Méthode d'usine

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. Une écriture plus formelle

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

Méthode d'écriture 3.json

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

4. Il y a quelques changements, mais l'essence est la même que le premier

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; peut être mis dans l'attribut et écrit comme ceci.PI=3.14159;

Les première et troisième manières sont couramment utilisées, ainsi qu'un exemple étendu de la troisième manière d'écrire

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

Ce qu'il faut noter, c'est le problème de pointage de ceci. Voici une petite introduction à ce sujet J'espère que cela sera utile à tout le monde.
Au début, la méthode du prototype dynamique était utilisée pour créer des objets personnalisés en js, et elle était également utilisée de manière très fluide.
Dans cette méthode, la création et l'utilisation de variables au sein de l'objet commencent par "this".
Par exemple : l'objet ContactModel a trois attributs , crtnewFriendListLen, crtNewFriendList, crtFindedUserID
et quatre méthodes requestContactList(), requestNewfriendList(), requestFindUser(), requestAddContact()
Si vous souhaitez accéder à vos propres propriétés à l'intérieur de cette variable, vous devez apporter "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;
 };
}

Mais un problème survient à ce moment-là. Dans requestFindUser(), si this.crtFindedUserID est utilisé pour stocker la valeur envoyée par le serveur, alors après l'appel de la méthode requestAddContact() sur cet objet, le crtFindedUserID ne peut pas être obtenu. valeur, la valeur initiale affichée dans alert sera toujours -1. Le problème réside dans la méthode de rappel de $.getJSON(). Pour le moment, cela ne fait pas référence à l'instance de ContactModel, mais au corps de la méthode, donc à la solution. voici le moyen d'obtenir l'instance de ContactModel dans cette méthode de rappel, puis d'attribuer une valeur à l'attribut crtFindedUserID de cette instance.
Dans la méthode de rappel d'écoute du composant de vue à l'intérieur de l'objet, cela ne pointe pas vers l'objet lui-même, mais également vers le corps de la méthode rappelé. À ce stade, si vous souhaitez accéder aux propriétés de l'objet lui-même, vous devez le faire. doit obtenir une instance de cet objet pour y accéder. Au lieu de l'utiliser.
Ce qui suit est une méthode d'écriture standard pour l'orientation objet 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>

J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.