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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
使用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脚本数据库功能详解(下)
2006/10/09 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
python web基础之加载静态文件实例
2018/03/20 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
python实现简单的学生管理系统
2021/02/22 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
人力资源经理自我评价
2014/01/04 职场文书
医学生职业规划范文
2014/01/05 职场文书
中学教师教育感言
2014/02/21 职场文书
个人投资计划书
2014/05/01 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
旷课检讨书500字
2014/10/14 职场文书
主持人开场白台词
2015/05/29 职场文书
党小组评议意见
2015/06/02 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
一文搞懂php的垃圾回收机制
2021/06/18 PHP
OpenCV实现反阈值二值化
2021/11/17 Java/Android
电频谱管理的原则是什么
2022/02/18 无线电