归纳下js面向对象的几种常见写法总结

//定义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面向对象的几种常见写法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-08-21

js面向对象的写法

本文归纳了js面向对象的几种常见写法,分享给大家供大家参考,具体内容如下 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

js实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤:               1.创建XMLHttp对象               2.发送请求:包括打开链接.发送请求               3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 <span style=&qu

JavaScript面向对象编写购物车功能

之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写. 接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为:                1.先定义好一个商品列表的数据形式和商品总数集,类似: var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type:

JavaScript之面向对象_动力节点Java学院整理

JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢? 当然不是.如果我们只使用Number.Array.string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力. JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念: 1.类:类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何

js面向对象实现canvas制作彩虹球喷枪效果

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵. 下面开始简单介绍代码: canvas画布: 复制代码 代码如下: <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas> 彩虹球的随机颜色是通过下面两个方法来实现的,在<js常用方法和一些封装(2

JS实现简单面向对象的颜色选择器实例

本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

js实现的简单radio背景颜色选择器代码

本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

原生js实现简单的焦点图效果实例

用到一些封装好的运动函数,主要是定时器 效果为图片和图片的描述定时自动更换. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } im

js实现可得到不同颜色值的颜色选择器实例

本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=position:absolute;left:0;top:0> <input id=kkk2 style=position:absolut

js实现简单实用的AJAX完整实例

本文实例讲述了js实现简单实用的AJAX的方法.分享给大家供大家参考,具体如下: //版权归属 WUJXPING //ajax 1.2 //更新2012-2-20 //1.异步数据加载可以进行加载方式get,post的设定 //2.异步同步模式的属性设定 //3.数据加载自动超时设置 //4.***数据加载事件的添加,通过事件可以进行服务器数据的实时处理 //5.增加回调函数中用户自定义参数this.e //6.增加ajax反复提交控制,只需将ajax对象定义为全局变量,每次提交都会进行等待上次

JS实现简单的天数计算器完整实例

本文实例讲述了JS实现简单的天数计算器.分享给大家供大家参考,具体如下: 刚学了JS,想做个计算两个日期之间相差天数的东西,因为本人总是要算距离XX还有多少天.. 开始用很笨的方法写了一个,写完百度了一下,发现用 Date() 的话 几行代码就可以搞定.自己看语法的时候一扫而过,觉得会了,其实是不会的,至少在该用它的时候都想不到他有这个功能,这就是掌握类库的重要性吧. 先放上写的很笨的那种方法: index.html <!DOCTYPE html> <html lang="en

js实现简单div拖拽功能实例

本文实例讲述了js实现简单div拖拽功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="

Node.js 实现简单的接口服务器的实例代码

通过Node.js来实现接口服务器的功能.主要特点为: 1) 增加接口不需要重启 2) 异步执行,但接口阅读的时候是同步的代码(从上而下),或者可以按需求并行,串行 这里只是抛出基本思路,所以使用GET,也没有加密之类的 首先启动监听端口,配置好访问规则.(通过识别特定URL ,动态执行相应的接口脚本) ----- |----HamstrerServlet | ------ command3G | ------ login.js //登录脚本(这里只是简单演示) | --- server.js

JS实现的RGB网页颜色在线取色器完整实例

本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me

js实现简单的省市县三级联动效果实例

本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县