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.