`
tiandirensoon
  • 浏览: 591671 次
文章分类
社区版块
存档分类
最新评论

以一个最简单的例子把OO的JavaScript说明白

 
阅读更多

OO的JavaScript并不高深,麻烦就麻烦在google出来的国人介绍文章经常罗罗嗦嗦,而且之间的说法还各有不同,摆在一起就让人看了头大。
这里重拾简单主义,以一个最简单的例子把OO Javascript说明白。

1.一个颇为精简的例子

只需理解三个关键字:
第一个是function ,JS世界里Class的定义用"function",function里面的内容就是构造函数的内容。

第二个是this指针,代表调用这个函数的对象。

第三个是prototype,用它来定义成员函数, 比较规范和保险。

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area()
function Circle(radius)
{
this.r = radius;
}
Circle.PI = 3.14159;
Circle.prototype.area = function( ) {return Circle.PI * this.r * this.r;}
//使用Circle类
var c = new Circle(1.0);
alert(c.area());
另外成员函数定义还可以写成这样:
function compute_area(){return Circle.PI * this.r * this.r;}
Circle.prototype.area=compute_area;

2.继承

注意两点
1.定义继承关系 ChildCircle.prototype=new Circle(0); 其中0是占位用的
2.调用父类的构造函数
this.base=Circle;
this.base(radius);

//定义ChildCircle子类
function ChildCircle(radius)
{
this.base=Circle;
this.base(radius);
}

ChildCircle.prototype=new Circle(0);
function Circle_max(a,b)
{
if (a.r > b.r) return a;

else return b;
}
ChildCircle.max = Circle_max;
//使用ChildCircle子类
var c = new ChildCircle(1);
vard = new ChildCircle(2);
var bigger = d.max(c,d);
alert(bigger.area());

3.var式定义
JS还支持一种var Circle={raidus:1.0,PI:3.1415}的形式,语法就如CSS的定义。
因此如果Circle只有一个实例,下面的定义方式更简洁:

var newCircle=
{
r:1.0,
PI:3.1415,
area: function(){ return this.PI * this.r * this.r;}
};
alert(newCircle.area());
BTW.吃饱了撑着可以看看Rails带的OO Javascript库--Prototype
其实,Javascript现在的语法真的不适合那么别扭的写成OO模式....
分享到:
评论

相关推荐

    JavaScript_oo:javascript面向对象

    JavaScript-oo类类(Class)定义了一件事物的抽象特点。通常来说,类定义了事物的属性和它可以做到的(它的行为)。举例来说,“狗”这个类会包含狗的一切基础特征,即所有“狗”都共有的特征或行为,例如它的孕育、...

    C#例子代码 A0012_OO_AutoProp

    C#例子代码 A0012_OO_AutoPropC#例子代码 A0012_OO_AutoPropC#例子代码 A0012_OO_AutoPropC#例子代码 A0012_OO_AutoPropC#例子代码 A0012_OO_AutoPropC#例子代码 A0012_OO_AutoPropC#例子代码 A0012_OO_AutoPropC#...

    C#例子代码 A0013_OO_Constructor

    C#例子代码 A0013_OO_ConstructorC#例子代码 A0013_OO_ConstructorC#例子代码 A0013_OO_ConstructorC#例子代码 A0013_OO_ConstructorC#例子代码 A0013_OO_ConstructorC#例子代码 A0013_OO_ConstructorC#例子代码 A...

    【JavaScript源代码】JavaScript实现简单的轮播图效果.docx

    JavaScript实现简单的轮播图效果  轮播图:在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。这些图片就都是轮播图,这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里面...

    maelstrom:OO JavaScript GameEngine 和示例游戏

    基于示例游戏的简单 OO JavaScript Canvas 游戏引擎 这是一个演示:http: (方向键移动,空格键射击) 去做 在第一级负载上添加 invuln 从引擎中删除 .init,找出更好的方法来做到这一点,因为它很混乱 重构demo...

    C#例子代码 A0011_OO_Mul_Interface

    C#例子代码 A0011_OO_Mul_InterfaceC#例子代码 A0011_OO_Mul_InterfaceC#例子代码 A0011_OO_Mul_InterfaceC#例子代码 A0011_OO_Mul_InterfaceC#例子代码 A0011_OO_Mul_InterfaceC#例子代码 A0011_OO_Mul_InterfaceC#...

    oojs:面向对象 javascript 库的强大功能

    OOjs 是一个用于处理对象的 JavaScript 库。 主要功能包括继承、mixin 和用于处理对象的实用程序。 /* Example */ ( function ( oo ) { function Animal ( ) { } function Magic ( ) { } function Unicorn ( )...

    ABAP oo的8个理由

    ABAP oo的8个理由 电子书 很多关于ABAP OO方面的文章要么过于抽象,要么举的例子过于简单对于实际应用无关痛痒。本篇文章力图通过简单而又切合实际的例子通过面向过程和面向对象两种模式的比较来说明OO的优点。

    JavaScript面向对象编程指南(第2版)

    , 本书全面地覆盖了JavaScript语言的OO特性,同时兼顾基础知识,对初学者来说,是难得的JavaScript佳作。读者不需要具备任何的JavaScript基础知识及项目经验,通过学习这本书,将会在面试有关JavaScript程序设计的...

    encapsulate:JavaScript OO系统

    Encapsulate是一个用于JavaScript的紧凑的OO系统,它允许您结合使用特征(对象或提供成员的函数)和其他实例化器(您可能将其称为继承)来轻松创建对象实例化器(您可能将它们称为类)。 封装类似于在许多方面和...

    Professional JavaScript for Web Developers英文版

    This book is aimed at three groups of readers: Experienced object-oriented programming developers looking to learn JavaScript as it relates to traditional OO languages such as Java and C++; Web ...

    JavaScript.Object.Programming.148421

    What are and how to use OO principles in JavaScript How to use Constructors with JavaScript and more Audience This book is for both intermediate and advanced JavaScript and Web development ...

    OO in JavaScript

    这是一篇深入探讨JavaScript对象模型的文章。 JavaScript是基于原型的语言,她的弱类型成为她缺点的同时也使得她非常灵活。作者对JavaScript的原型的应用使读者对面向对象的机制有了新的认识。对于想深入了解...

    javascript面向对象技术基础

    javascript面向对象技术基础

    【JavaScript源代码】JavaScript中的几种继承方法示例.docx

     这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型。js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型。原型对象上有一个...

    【JavaScript源代码】JavaScriptTypeScript 实现并发请求控制的示例代码.docx

    JavaScriptTypeScript 实现并发请求控制的示例代码  假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制  利用 setTimeout 实行简单模仿一个请求  let ...

    javascript 封装技术

    全面介绍如何用OO方式封装Javascript,高手必看。

    实战OO 用例 建模

    实战OO_用例建模 实战OO_用例建模 实战OO_用例建模

    【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx

    原生JavaScript实现简单五子棋游戏  本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面 注释都很明确了,大家好好学习。 <!DOCTYPE ...

    OO4O(Oracle Objects for OLE C++ Class Library)

    Visual C++, Visual Basic For Applications (VBA), and IIS Active Server Pages (VBScript and JavaScript). OO4O consists of an in-process COM Automation Server, the C++ class library, and the Oracle ...

Global site tag (gtag.js) - Google Analytics