js面向对象的写法


Posted in Javascript onFebruary 19, 2016

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

Javascript 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
jquery text()要注意啦
Oct 30 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JS将unicode码转中文方法
May 08 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 #Javascript
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
javascript下使用Promise封装FileReader
Feb 19 #Javascript
javascript每日必学之循环
Feb 19 #Javascript
jQuery实现简单的DIV拖动效果
Feb 19 #Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 #Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 #Javascript
You might like
php如何调用webservice应用介绍
2012/11/24 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
js对象数组按属性快速排序
2011/01/31 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
使用Python进行目录的对比方法
2018/11/01 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
《长征》教学反思
2014/04/27 职场文书
叶问观后感
2015/06/15 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL