归纳下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关于select的相关操作说明
Jan 13 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
js实现简单模态框实例
Nov 16 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php自动加载方式集合
2016/04/04 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
javascript数组去掉重复
2011/05/12 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python选择排序算法的实现代码
2013/11/21 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
对python3新增的byte类型详解
2018/12/04 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python实现两个文件夹的同步
2019/08/29 Python
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
个人授权委托书
2014/04/03 职场文书
校庆标语集锦
2014/06/25 职场文书
税务会计岗位职责
2015/04/02 职场文书
刑事附带民事代理词
2015/05/25 职场文书
人代会简报
2015/07/21 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python