归纳下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中匿名函数,函数直接量和闭包
May 08 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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中去掉字符串首尾空格的方法
2012/05/19 PHP
php创建sprite
2014/02/11 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php获取系统变量方法小结
2015/05/29 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
图片完美缩放
2006/09/07 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python os.access()用法实例
2019/02/18 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python Tensor和Array对比分析
2020/01/08 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
举例讲解Python装饰器
2020/12/24 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
美国汽车交易网站:Edmunds
2016/08/17 全球购物
大学校园生活自我鉴定
2014/01/13 职场文书
商场租赁意向书
2014/07/30 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书