归纳下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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
js验证账户名是否重复
2020/05/26 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python实现低通滤波器代码
2020/02/26 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python右对齐的实例方法
2020/07/05 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
求职信格式范文
2015/03/19 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
详解Python中的进程和线程
2021/06/23 Python