Home > Article > Web Front-end > js object-oriented writing method_javascript skills

js object-oriented writing method_javascript skills

WBOYOriginal: 2016-05-16 15:14:501510browse

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

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

3.json writing method

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

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

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

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

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery+PHP+MySQL achieves infinite cascading drop-down box effect_jqueryNext article：jQuery+PHP+MySQL achieves infinite cascading drop-down box effect_jquery

See more

js object-oriented writing method_javascript skills

Related articles