归纳下js面向对象的几种常见写法总结


Posted in Javascript onAugust 24, 2016

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 

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的指向问题

以上这篇归纳下js面向对象的几种常见写法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 #Javascript
js友好的时间返回函数
Aug 24 #Javascript
JS转换HTML转义符的方法
Aug 24 #Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 #Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 #Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 #Javascript
AngularJS下对数组的对比分析
Aug 24 #Javascript
You might like
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
python显示天气预报
2014/03/02 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
django+mysql的使用示例
2018/11/23 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python Matplotlib模块的使用
2020/09/16 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
大学生优秀团员事迹材料
2014/01/30 职场文书
建筑投标担保书
2014/05/20 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
二手车转让协议书
2015/01/29 职场文书
公司地址变更通知
2015/04/25 职场文书
放飞理想主题班会
2015/08/14 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle