js面向对象的写法
本文归纳了js面向对象的几种常见写法,分享给大家供大家参考,具体内容如下
1.工厂方式
varCircle=function(){ varobj=newObject(); obj.PI=3.14159; obj.area=function(r){ returnthis.PI*r*r; } returnobj; } varc=newCircle(); alert(c.area(1.0));
2.比较正规的写法
functionCircle(r){ this.r=r; } Circle.PI=3.14159; Circle.prototype.area=function(){ returnCircle.PI*this.r*this.r; } varc=newCircle(1.0); alert(c.area());
3.json写法
varCircle={ "PI":3.14159, "area":function(r){ returnthis.PI*r*r; } }; alert(Circle.area(1.0));
4.有点变化,但是实质和第一种一样
varCircle=function(r){ this.r=r; } Circle.PI=3.14159; Circle.prototype={ area:function(){ returnthis.r*this.r*Circle.PI; } } varobj=newCircle(1.0); alert(obj.area()
Circle.PI=3.14159;能够放入属性中写成this.PI=3.14159;
常用为第一种和第三种,第三种写法的扩展小实例
varshow={ btn:$('.div1'), init:function(){ varthat=this; alert(this); this.btn.click(function(){ that.change(); alert(this); }) }, change:function(){ this.btn.css({'background':'green'}); } } show.init();
需要注意的是this的指向问题,下面是关于this的一点点介绍,希望对大家有帮助。
一开始采用动态原型方法在js中创建自定义的对象,this也用着很顺的。
这种方法中对于在对象内部对变量的创建和使用都是用"this."开头的。
比如:对象ContactModel,有三个属性,crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四个方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在这个变量内部如要访问自己的属性,都要带上"this."
varcontactModel; ... contactModel=newContactModel();
functionContactModel() { //this.contactList; this.crtnewFriendListLen; this.crtNewFriendList; this.crtFindedUserID="-1"; if(typeofContactModel._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; }; }
但这时问题出现了,在requestFindUser()内,若用this.crtFindedUserID来存储服务端传来的数值,那么在之后此对象被调用了requestAddContact()方法后,是拿不到crtFindedUserID这个值的,alert里显示的依然会是初始值-1,问题就出在$.getJSON()的回调方法内,此时的this指的不是ContactModel的实例,而是此方法体,所以这里的解决办法就是在这个回调方法内拿到ContectModel的实例,然后给这个实例的属性crtFindedUserID赋值。
在对象内部对视图组件的监听回调方法里,this指向的也不是对象本身,同样还是这个被回调的方法体,这时若要访问对象本身的属性,就要拿到此对象的实例来访问,而不是用this.
下面是一段JS面向对象的标准写法:
<head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title>新建网页1</title> <mce:scripttype=text/javascript><!-- varperson=function(name,age){//定义对象构造方法 this.name=name; this.age=age; } person.prototype={//封装方法 getName:function(){ alert(this.name); }, getAge:function(){ alert(this.age); } } functiontest(){//声明调用 varman=newperson('jack',12); man.getName() man.getAge() } vartest2={//类似静态方法调用直接:test2.te();即可 te:function(){ alert(); }, te1:function(){ alert(); } } //--></mce:script> </head> <body> <inputtype=buttononclick="test()"/> </body> </html>
希望本文所述对大家学习javascript程序设计有所帮助。