Of Stack

js object oriented notation

  • 2020-12-22 17:32:56
  • OfStack

This paper summarizes several common js object-oriented writing methods, shared for your reference, the specific content is as follows
1. Factory mode 


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. Write in a more formal way 


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 writing 


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

4. It's a little different, but it's the same as the first one 


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;

Commonly used for the first and third, the third method of extension of small instances 


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

It is necessary to pay attention to the pointing problem of this. The following is a little introduction about this, hoping to be helpful to you.
1 started using dynamic prototyping to create custom objects in js, and this also worked well.
This method starts with "this." for creating and using variables within an object.
For example, object ContactModel has three attributes, crtnewFriendListLen,crtNewFriendList, and crtFindedUserID
And 4 methods requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
Inside this variable, if you want to access your own properties, put "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;
 };
}

But the problem in the requestFindUser (), if use this. Numerical crtFindedUserID to store the service side, so after the object is called requestAddContact () method, is can't get crtFindedUserID this value, alert shows still is in the initial value 1, the problem is out in the $. getJSON () callback method, at this time of this refers not ContactModel instance, but this method, so the solution is here in the callback method to get the ContectModel instance, Then assign a value to the instance property crtFindedUserID.
In the listening callback method to the view component inside the object, this also points to the body of the method being called back instead of the object itself. To access the properties of the object itself, you need to access an instance of the object instead of this.
Here is the standard way to write paragraph 1 of JS: 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> The new web page  1</title> 
<mce:script type=text/javascript><!-- 
 var person=function(name,age){// Define object constructors  
  this.name=name; 
  this.age=age; 
 } 
 person.prototype={ // Encapsulation method  
  getName:function(){ 
   alert(this.name); 
  }, 
  getAge:function(){ 
   alert(this.age); 
  } 
 } 
 
 function test(){// The statement calls  
  var man=new person('jack',12); 
  man.getName() 
  man.getAge() 
 } 
  
 var test2 ={ // Similar to static methods   Call directly: test2.te(); Can be  
  te:function(){ 
   alert(); 
  }, 
  te1:function(){ 
   alert(); 
  } 
 } 
// --></mce:script> 
</head> 
<body> 
 <input type=button onclick="test()"/> 
</body> 
</html>

I hope this article is helpful for you to learn javascript programming.

Related articles: