js面向对象的写法

本文归纳了js面向对象的几种常见写法，分享给大家供大家参考，具体内容如下
1.工厂方式

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.比较正规的写法

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

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

4.有点变化，但是实质和第一种一样

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;
常用为第一种和第三种，第三种写法的扩展小实例

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（）;

需要注意的是this的指向问题，下面是关于this的一点点介绍，希望对大家有帮助。
一开始采用动态原型方法在js中创建自定义的对象，this也用着很顺的。
这种方法中对于在对象内部对变量的创建和使用都是用"this."开头的。
比如：对象ContactModel,有三个属性，crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四个方法requestContactList（）,requestNewfriendList（）,requestFindUser（）,requestAddContact（）
在这个变量内部如要访问自己的属性，都要带上"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 = userIDcontactModel.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> <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>

希望本文所述对大家学习javascript程序设计有所帮助。