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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
原生js 秒表实现代码
Jul 24 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
vue中keep-alive的用法及问题描述
May 15 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python中类的一些方法分析
2014/09/25 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python变量访问权限控制详解
2019/06/29 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
安全标兵事迹材料
2014/08/17 职场文书
党支部审查意见
2015/06/02 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL