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 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
Element-UI+Vue模式使用总结
Jan 02 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
如何做到多笔资料的同步
2006/10/09 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
企业宣传策划方案
2014/05/29 职场文书
四风问题查摆材料
2014/08/25 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis