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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
微信小程序实现签到弹窗动画
Sep 21 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 图片上传类代码
2009/07/17 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP6新特性分析
2016/03/03 PHP
php生成mysql的数据字典
2016/07/07 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
Python 多进程和数据传递的理解
2017/10/09 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python新手学习函数默认参数设置
2020/06/03 Python
python/golang 删除链表中的元素
2020/09/14 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
大一学生职业生涯规划
2014/03/11 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
法人任命书范本
2014/06/04 职场文书
社会工作专业求职信
2014/07/15 职场文书
1000字打架检讨书
2014/11/03 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书