归纳下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示例
Aug 29 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue路由传参三种基本方式详解
Dec 09 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取整数函数常用的四种方法小结
2012/07/05 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
请解释流与文件有什么不同
2016/07/29 面试题
外贸业务员岗位职责
2013/11/24 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
家具商场的活动方案
2014/08/16 职场文书
考察邀请函范文
2015/01/31 职场文书
武当山导游词
2015/02/03 职场文书
单身证明格式样本
2015/06/15 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL