归纳下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功能函数(2009-06-04更新)
Jun 04 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
canvas实现钟表效果
Feb 13 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
javascript实现倒计时提示框
Mar 02 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP.vs.JAVA
2016/04/29 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
pycharm安装图文教程
2017/05/02 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
共产党员公开承诺书范文
2014/03/28 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库