归纳下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 获取网页标题代码实例
Jan 22 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
javascript的函数作用域
Nov 12 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 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/03/18 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python中count函数简单的实例讲解
2020/02/06 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
职业技术学校毕业生推荐信
2013/12/03 职场文书
出生证明格式
2015/06/15 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
一条 SQL 语句执行过程
2022/03/17 MySQL