归纳下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 相关文章推荐
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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计算两个路径的相对路径
2013/06/14 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php通过各种函数判断0和空
2020/07/04 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python快排算法详解
2019/03/04 Python
python getpass实现密文实例详解
2019/09/24 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
Java语言的优势
2015/01/10 面试题
幼儿园消防安全制度
2014/01/26 职场文书
会计学自我鉴定
2014/02/06 职场文书
阳光体育活动总结
2014/04/30 职场文书
特此通知格式
2015/04/27 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫