归纳下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 年月日联动实现核心代码
Dec 21 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
详解javascript new的运行机制
Jan 26 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Python序列化基础知识(json/pickle)
2017/10/19 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python读取Excel表格文件的方法
2019/09/02 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
安全检查验收制度
2014/01/12 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
诚信贷款承诺书
2014/05/30 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android