归纳下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 相关文章推荐
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
基于Angularjs实现分页功能
May 30 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
layui导航栏实现代码
May 19 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
微信小程序 获取javascript 里的数据
Aug 17 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
JQuery animate动画应用示例
May 14 jQuery
javascript实现雪花飘落效果
Aug 19 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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中将数组转成XML格式的实现代码
2011/08/08 PHP
yii操作cookie实例简介
2014/07/09 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
js中日期的加减法
2015/05/06 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
彻底解决Python包下载慢问题
2020/11/15 Python
html5 标签
2009/07/16 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
应届护士推荐信
2013/11/16 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
规划编制实施方案
2014/03/15 职场文书
公司委托书怎么写
2014/08/02 职场文书
暑期学习心得体会
2014/09/02 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
公务员年终个人总结
2015/02/12 职场文书
成事在人观后感
2015/06/16 职场文书
redis限流的实际应用
2021/04/24 Redis
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL