js面向对象的写法_javascript技巧-js教程-PHP中文网

js面向对象的写法_javascript技巧

php中文网

发布： 2016-05-16 15:14:50

原创

1339人浏览过

本文归纳了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 = 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> 
<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程序设计有所帮助。