归纳下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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Django实现图片文字同时提交的方法
2015/05/26 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
护士个人自我鉴定
2014/03/24 职场文书
申报优秀教师材料
2014/12/16 职场文书
警示教育片观后感
2015/06/17 职场文书
学风建设主题班会
2015/08/17 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Java设计模式之代理模式
2022/04/22 Java/Android