Javascript object-oriented scripting _ javascript tips-js tutorial

This article mainly introduces four common js object-oriented methods, as well as related content about this, interested friends can refer to this article to summarize several common js object-oriented methods and share them with you 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

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

4. A little changed, 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; this. PI = 3.14159 can be written into attributes;

It is commonly used as an extended small instance in the first, third, and third formats.

var show={  btn:$('.p1'),  init:function(){   var that=this;   alert(this);   this.btn.click(function(){     that.change();     alert(this);    })     },  change:function(){   this.btn.css({'background':'green'});  } } show.init();

Note that this points to the problem. below isA little introduction to thisTo help you.
At the beginning, we used the dynamic prototype method to create custom objects in js. this is also very smooth.
In this method, the creation and use of variables inside the object start with "this.
For example, the object ContactModel hasThree attributes, CrtnewFriendListLen, crtNewFriendList, crtFindedUserID
AndFour MethodsRequestContactList (), requestNewfriendList (), requestFindUser (), requestAddContact ()
If you want to access your own attributes in this variable, you must include "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; };}

However, the problem occurs. In requestFindUser (), if this. crtFindedUserID is used to store the value sent from the server. After this object is called the requestAddContact () method, the value of crtFindedUserID cannot be obtained, alert still displays the initial value-1, and the problem lies in $. in the callback method of getJSON (), this is not the ContactModel instance, but the method body. Therefore, the solution here is to get the ContectModel instance in the callback method, assign a value to the crtFindedUserID attribute of the instance.
In the listener callback method of the view component inside the object, this is not the object itself, but also the method body to be called back. To access the attributes of the object, instead of using this.
Below is a sectionJS object-oriented standard writing:

 
  Create web page 1 
 
  
       

I hope this article will help you learn about javascript programming.