js object-oriented writing method_javascript skills-JS Tutorial-php.cn

js object-oriented writing method_javascript skills

WBOY

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

Original

1552 people have browsed it

This article summarizes several common ways of writing object-oriented js and shares it with everyone for your reference. The specific content is as follows
1.Factory method

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

Copy after login

2. More formal writing

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

Copy after login

3.json writing method

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

Copy after login

4. There are some changes, but the essence is 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()

Copy after login

Circle.PI = 3.14159; can be put into the attribute and written as this.PI=3.14159;

Commonly used are the first and third ways, and an extended example of the third way of writing

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

Copy after login

What needs to be noted is the pointing problem of this. Here is a little introduction about this. I hope it will be helpful to everyone.
At the beginning, the dynamic prototype method was used to create custom objects in js, and this was also used very smoothly.
In this method, the creation and use of variables within the object begin with "this.".
For example: the object ContactModel has three attributes , crtnewFriendListLen, crtNewFriendList, crtFindedUserID
and four methods requestContactList(), requestNewfriendList(), requestFindUser(), requestAddContact()
If you want to access your own properties inside this variable, you must bring "this."

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

Copy after login

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

Copy after login

But a problem arises at this time. In requestFindUser (), if this.crtFindedUserID is used to store the value sent from the server, then after the requestAddContact() method is called on this object, the crtFindedUserID cannot be obtained. value, the initial value displayed in alert will still be -1. The problem lies in the callback method of $.getJSON(). At this time, this refers not to the instance of ContactModel, but to the method body, so the solution here is The way is to get the instance of ContactModel in this callback method, and then assign a value to the attribute crtFindedUserID of this instance.
In the listening callback method of the view component inside the object, this does not point to the object itself, but also the body of the method being called back. At this time, if you want to access the properties of the object itself, you must get an instance of this object to access. Instead of using this.
The following is a standard writing method for JS object-oriented :

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

Copy after login

I hope this article will be helpful to everyone in learning javascript programming.