[转]JavaScript面向对象的特性

如果你使用JavaScript编程,你或许会怀疑它是否包含了面向对象(OO)的结构。实际上,JavaScript的确支持面向对象的架构――在某种程度上。本文将通过一个可扩展向量图形(SVG)的实例来说明JavaScript的OO结构。

 

我如何在类中定义方法和属性?

 

OO开发的一个基本方面是类及其相应的方法和/或属性的使用。JavaScript通过function关键字支持类(及其属性)的使用。下面的代码定义了一个叫做Figure的JavaScript类:
function Figure() {
this.centerX=0;
this.centerY=0;
this.area=0;
this.transform = transform; // methods are defined like this
function transform(moveX,moveY,angle) {
this.centerX += moveX;
this.centerY += moveY;
} }

这个Figure类有三个属性:centerX,centerY,和area。另外,它还有一个方法叫做transform()。前三行是这个类的构造器。
但是它看起来不像一个类
你会想Figure()看起来不像一个类,而更像一个JavaScript的函数。那么为什么Figure()定义的是个类?

严格的说,Figure()函数没有定义一个类,但是它仿造了一个。它实际上创建了一个对象,在括号里的代码使这个对象的构造器。JavaScript的对象支持是很基础的,它并不区分类和对象。
这就引到了问题为什么Figure()函数创建的是一个对象。对象是可以有属性和方法的。基本上,因为Figure()函数同时包含了属性和方法,它就是个对象。在JavaScript里,所有的函数即是对象又是可调用的代码块。这不像它听起来的那样容易被误解。要创建一个Figure()类/对象,你只用使用以下句法:
MyFigure = new Figure();
你也可以把Figure()函数当作代码块调用,就像这样:
figValue = Figure();
变量figValue没有被定义是因为代码块Figure()没有返回任何值。如果你把return(this.area)加到函数的最后一行,figValue就会有个值0。所以figValue是个类型数字,MyFigure是对象 Rectangle的实例。
为什么所有的变量前面都一个“this”?

这个关键字this表示这是对象的实例变量,可以使用MyFigure.centerX从对象外部访问。要让变量成为私有变量,去掉前缀this就行了。this.transform = transform这一行让方法成为公用方法。这个方法通过MyFigure.transform(100,100,0)调用。

这些类有层次之分吗?

另一个好问题的是JavaScript的类是否有层次之分。回答是肯定有。我们来仔细看看是怎么做到分层的。我们可以定义一个Rectangle子类,并把Figure作为父类:

function Rectangle(startX, startY, endX, endY) {
this.width = endX - startX;
this.height = endY - startY;
this.centerX = (endX + startX)/2;
this.centerY = (endY + startY)/2;
this.computeArea = computeArea;
function computeArea() {
this.area = this.width*this.height;
} }
Rectangle.prototype = new Figure();

Rectangle对象是用4个自变量创建的,前四行是构造器。 Rectangle类包含了一个方法: computeArea()。最后一行Rectangle.prototype = new Figure();,把Rectangle类定义为从Figure类继承来的子类。
然我来解释一下prototype(原型)。每个对象构造器都有prototype属性;这是用来给所有的对象增加新属性和方法的。这就是为什么原型被用来实现继承:child.prototype = new parent();。通过原型,父对象的所有属性和方法都被添加到子对象上。
要注意this.centerX,this.centerY,和area是Rectangle类中所使用的属性,但是它们是 Figure父类的属性。和Rectangle类相似,Circle类可以被定义成Figure类的原型。这种父子关系可以按你需要来定义深度;你可以创建另一个Rectangle的子类。
我如何创建一个类的实例?

在JavaScript里创建一个类的实例很容易:
rect = new Rectangle(100,100,900,800);
这就创建了Rectangle类型的一个对象。Rectangle的构造器在属性width, height, centerX, 和centerY中填入了值。rect.area属性的值是零(0)。使用这个命令就能调用area方法:
rect.computeArea();
rect.area的值现在是560,000。要调用transform方法使用:
rect.transform(100,200,0);

父和子对象的属性可以像这样访问到:
var ar = rect.area;
var wi = rect.width;

我能超越属性和方法吗?

就像你在Java中的一样,你可以超越属性和方法。在子类中定义的属性或者方法可以超越同名的父类的属性和方法。
和全局变量互动
JavaScript也支持全局变量的使用。在以下代码段中测试一下g_area变量的范围:
<HTML>
<SCRIPT>
var g_area = 20;
function Figure() {

this.area=g_area;

}
function Rectangle(){ … }
Rectangle.prototype = new Figure();
function test(){
g_area = 40;
rect = new Rectangle();
alert(rect.area);
}
</SCRIPT>
<BODY onLoad = 'test()'/>
</BODY>
</HTML>
rect.area的值是20(不是你预计的40),这是因为Rectangle对象是Figure对象的原型,这种关系在test()被调用以前就被定义了。要使用g_area的新值,你需要用以下的方法:

function test() {
g_area = 40;
Rectangle.prototype = new Figure();
rect = new Rectangle();
alert(rect.area);
}

对于所有的Rectangle的新实例,这将改变area属性的值。或者,你可以使用这种方法:function test() {
g_area = 40;
rect = new Rectangle();
Rectangle.prototype.area = g_area;
alert(rect.area);
}

这将改变Rectangle所有现存的以及新实例的area属性的值。
结论

为了效仿OO开发,JavaScript提供了必需的继承、封装和超越属性,尽管它不支持接口和方法的过载。如果你是刚接触到OO开发,用它试试。OO概念允许开发者将一组数据和相关操作集中入一个对象。这在管理浏览器事件和管理浏览器内SVG图时很有用

转载于:https://www.cnblogs.com/frogbag/archive/2007/03/13/673066.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

命令行获取docker远程仓库镜像列表

命令行获取docker远程仓库镜像列表 获取思路 通过curl获取镜像tag的json串,解析后得到${image}:${tag}的格式 curl获取示例 # curl [:-s] ${API}/${image}/tags curl https://registry.hub.docker.com/v1/repositories/nginx/tags 获取脚本docker-search docker-search.sh #!/b…

如何使用VisualVM监视服务器上的多个JVM

在上一篇文章中&#xff0c;我向您展示了如何使用单个管理员服务器和多个托管服务器启动WebLogic Server。 这些启动之后&#xff0c;您如何检查它们的健康状况&#xff1f; 您可以使用管理员的/ console网络应用。 但是&#xff0c;所有默认的Oracle / Open JDK 6附带的另一个…

java isight zmf_isight集成catia和abaqus,nastran流程详解

isight集成catia和abaqus,nastran流程详解CAD软件中参数化建模&#xff0c;导入有限元软件中计算各个工况&#xff0c;isight根据计算结果调整模型参数&#xff0c;反复迭代计算的过程是尺寸优化的典型问题~下面将比较详解叙述菜鸟新手是如何成功用isight集成catia和abaqus流程…

KindEditor编辑器, 利用ajax动态切换编辑器内容

// 后台成功返回数据后的js处理 KindEditor.remove(#content_id); // 先移除之前创建的编辑器 var editor KindEditor.create(#content_id, { // 再重新创建编辑器     themeType: simple,     resizeType: 1,     urlType: domain,   // 将图片保存为绝对路径…

排序算法 JavaScript

一、冒泡排序 算法介绍&#xff1a; 1.比较相邻的两个元素,如果前一个比后一个大&#xff0c;则交换位置。 2.第一轮把最大的元素放到了最后面。 3.由于每次排序最后一个都是最大的&#xff0c;所以之后按照步骤1排序最后一个元素不用比较。 function bubble_sort(arr){var swa…

[你必须知道的.NET] 第一回:恩怨情仇:is和as

发布日期&#xff1a;2007.4.7 作者&#xff1a;Anytao ©2007 Anytao.com 转贴请注明出处&#xff0c;留此信息。 本文将介绍以下内容&#xff1a; • 类型转换 • is/as操作符小议 1. 引言 类型安全是.NET设计之初重点考虑的内容之一&#xff0c;对于程序设计者来说&…

USACO 6.3 章节 你对搜索和剪枝一无所知QAQ

emmm........很久很久以前 把6.2过了 所以emmmmmm 直接跳过 &#xff0c;从6.1到6.3吧 Fence Rails 题目大意 N<50个数A1,A2... 1023个数,每个数数值<128,B 问 A 们能拆分成多少个B,求最多的个数 样例 解释 A: 3030 4018193 501516172 2524 B: 15 (ok) 16 (ok) 17 (ok) 1…

在基于Spring的Web应用程序中使用Http Session

在基于Spring的Web应用程序中拥有和使用Http会话有多种方法。 这是基于最近项目经验的总结。 方法1 只需在需要的HttpSession中注入即可。 Service public class ShoppingCartService {Autowired private HttpSession httpSession;... }尽管令人惊讶&#xff0c;但由于上述服…

获取当前鼠标的位置以及组件的位置

总结&#xff1a; div如果要触发鼠标事件要加上css样式cusor:pointer。 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

谷歌推大语言模型VideoPoet:文本图片皆可生成视频和音频

Google Research最近发布了一款名为VideoPoet的大型语言模型&#xff08;LLM&#xff09;&#xff0c;旨在解决当前视频生成领域的挑战。该领域近年来涌现出许多视频生成模型&#xff0c;但在生成连贯的大运动时仍存在瓶颈。现有领先模型要么生成较小的运动&#xff0c;要么在生…

java scala 获取类_在Scala 2.10中获取java.lang.Class [T]的Scala类型

您可以像这样实现您的方法&#xff1a;def getType[T](clazz: Class[T])(implicit runtimeMirror: ru.Mirror) runtimeMirror.classSymbol(clazz).toType然后像这样调用它&#xff1a;implicit val mirror ru.runtimeMirror(getClass.getClassLoader)getType(classOf[String])…

解决ios8下coreData没有NSPersistentContainer的问题

用Xcode8.1默认创建ios app的时候&#xff0c;使用coreData的话&#xff0c;要10.0以上的版本才行。因为NSPersistentContainer只有10.0以上的版本才有&#xff0c;10.0以下的版本是没有的&#xff0c;那怎么办呢&#xff1f;有办法&#xff0c;专为8.0版本加写的INSPersistent…

spring 与 guice 的区别好玩的好法(转)

看下边对于不同社会形态下一个人&#xff08;java对象&#xff0c;调用者&#xff09;需要一把斧子&#xff08;java对象&#xff0c;被调用者&#xff09;的例子&#xff1a;&#xff08;1&#xff09;原始社会时&#xff0c;劳动社会基本没有分工&#xff0c;需要斧子的人&am…

PyCon大会Python主题演讲摘要

PyCon 是全国际最大的以 Python 编程言语 为主题的技能大会。大会由 Python 社区组织&#xff0c;每年举行一次。在大会上&#xff0c;来自国际各地的 Python 用户与中心开发者齐聚一堂&#xff0c;共同同享 Python 国际的新鲜事、Python 言语的应用案例、运用技巧等等内容。 I…

欢迎使用Java 8之前要重温的10个JDK 7功能

Java 8发布已经快一个月了&#xff0c;我敢肯定&#xff0c;大家都在探索JDK 8的新功能。但是&#xff0c;在您完全研究Java 8之前&#xff0c;是时候重新审视Java 7上引入的一些很棒的功能了。记住&#xff0c;Java 6并没有什么功能&#xff0c;它只与JVM的更改和性能有关&…

java版本号管理_微服务项目中如何管理依赖版本号?

本文是微服务项目代码组织形式三部曲中的第三篇&#xff0c;也是最后一篇&#xff0c;通过这三篇文章&#xff0c;相信大家对于如果组织微服务中的代码已经有了一个基本认知&#xff0c;前面两篇分别是&#xff1a;第三篇相对来说要简单一些&#xff0c;本来没打算写&#xff0…

React之函数中的this指向

我们都知道在React中使用函数时&#xff0c;有两种写法&#xff0c;一是回调函数&#xff0c;二是直接调用&#xff0c;但需要在构造函数中绑定this&#xff0c;只有这样&#xff0c;函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管是在本组件的元素上调…

对于刚开始使用该软件,应该在熟悉基本的markdown语法的基础上,再进行快捷键的使用!...

一级标题 # 空格 编写内容 二级标题 ## 空格 编写内容 有序内容 1.Tab 无序内容 -Tab 代码块 print("hello wrold") typora快捷键 ctrl1一级标题 添加图片 表格 CtrlT 姓名年龄职业谢国宏20IT文字加粗 24期的小伙伴们你们好 文字斜体 你好 又粗又斜 粗斜* 3**2 -- 幂…

struct和byte[]相互转换(用Marshal类实现)

转自[DotNet笔记]相当于序列化与反序列化&#xff0c;但是不用借助外部文件1、struct转换为byte[] 1staticbyte[] StructToBytes(objectstructObj) 2{ 3 int size Marshal.SizeOf(structObj); 4 IntPtr buffer Marshal.AllocHGlobal(size); 5 …

Get-CrmSetting返回Unable to connect to the remote server的解决办法

摘要: 微软动态CRM专家罗勇 &#xff0c;回复302或者20190125可方便获取本文&#xff0c;同时可以在第一间得到我发布的最新博文信息&#xff0c;follow me&#xff01;我的网站是 www.luoyong.me 。 在Dynamics 365部署管理器所在的服务器上执行Get-CrmSetting&#xff0c;最近…