归纳下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 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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 一个页面执行时间类代码
2010/03/05 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
PDO::errorInfo讲解
2019/01/28 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python字典改变value值方法总结
2019/06/21 Python
简单了解python变量的作用域
2019/07/30 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
婚前财产公证书
2014/04/10 职场文书
信访工作经验交流材料
2014/05/23 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
三方股东合作协议书
2014/10/28 职场文书
中考学习决心书
2015/02/04 职场文书
地道战观后感2000字
2015/06/04 职场文书
黑白记忆观后感
2015/06/18 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android