JavaScript面向对象编程
发布日期:2021-06-30 19:27:13
浏览次数:3
分类:技术文章
本文共 6340 字,大约阅读时间需要 21 分钟。
自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升。JavaScript最基本的使用,以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。 1. 用JavaScript实现类 JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下: function myClass() { //此处相当于构造函数}
这里 myClass就是一个类。其实可以把它看成类的构造函数。至于非构造函数的部分,以后会详细描述。 2. 如何获得一个类的实例 实现了类就应该可以获得类的实例,JavaScript提供了一个方法可以获得对象实例。即 new操作符。其实JavaScript中,类和函数是同一个概念,当用new操作一个函数时就返回一个对象。如下: var obj1 = new myClass();
3. 对象的成员的引用 在JavaScript中引用一个类的属性或方法的方法有以下三种。 1> 点号操作符 这是一种最普遍的引用方式,就不累赘。即如下形式: 对象名.属性名;对象名.方法名;
2> 方括号引用 JavaScript中允许用方括号引用对象的成员。如下: 对象名[ " 属性名 " ];对象名[ " 方法名 " ];
这里方括号内是代表属性或方法名的字符串,不一定是字符串常量。也可以使用变量。这样就可以使用变量传递属性或方法名。为编程带来了方便。在某些情况下,代码中不能确定要调用那个属性或方法时,就可以采用这种方式。否则,如果使用点号操作符,还需要使用条件判断来调用属性或方法。 另外,使用方括号引用的属性和方法名还可以以数字开头,或者出现空格,而使用点号引用的属性和方法名则遵循标示符的规则。但一般不提倡使用非标示符的命名方法。 3> 使用eval函数 如果不希望使用变量传递变量或方法名,又不想使用条件判断,那么eval函数是一个好的选择。eval接收一个字符串类型的参数,然后将这个字符串作为代码在上下文中执行,返回执行的结果。这里正是利用了eval的这一功能。如下: alert(eval( " 对象名. " + element.value));
4. 对对象属性,方法的添加、修改和删除操作 JavaScript中,在生成对象之后还可以为对象动态添加、修改和删除属性和方法,这与其它面向对象的语言是不同的。 1> 添加属性和方法 先创建一个对象,空对象创建后没有任何属性和方法,然而我们可以在代码中创建。 var obj1 = new Object(); // 添加属性 obj1.ID = 1 ;obj1.Name = " johnson " ; // 添加方法 obj1.showMessage = function() { alert("ID: " + this.ID + ", Name: " + this.Name);}
2> 修改属性与方法 与添加属性和方法类似,例如接着上面的例子: // 修改属性 obj1.ID = 2 ;obj1.Name = " Amanda " ; // 修改方法 obj1.showMessage = function() { alert("ID: " + this.ID");}
3> 删除属性与方法 直接将要删除的属性或方法赋值为undefined即可: obj1.ID = 1;obj1.Name = undefined;obj1.showMessage = undefined;
5. 创建无类型对象。 注意属性用“,”间隔而不是“;”间隔! var obj1 = {} ; var obj2 = { ID: 1, Name: "Johnson", showMessage: function() { alert("ID: " + this.ID + "Name: " + this.Name); }}
这里定义了两个无类型的对象,obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID, Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。 用这种方式创建属性方法时,也可以用字符串定义属性方法的名字。如: var obj2 = { "ID" : 1, "Name": "Johnson"}
6. prototype 每个函数对象都具有一个子对象prototype,因为函数也可以表示类,所以prototype表示一个类的成员的集合。当new 一个对象时,prototype对象的成员都会被实例化成对象的成员。先看一个例子: function myClass() { } myClass.prototype.ID = 1 ;myClass.prototype.Name = " johnson " ;myClass.prototype.showMessage = function () { alert("ID: " + this.ID + "Name: " + this.Name);} var obj1 = new myClass();obj1.showMessage();
使用prototype对象创建类有一个好处。如果将所有的成员直接写在类的声明中,如下: function myClass() { //添加属性 this.ID = 1; this.Name = "johnson"; //添加方法 this.showMessage = function() { alert("ID: " + this.ID + ", Name: " + this.Name); }} var obj1 = new myClass(); var obj2 = new myClass();
在上面的代码中,定义了一个类myClass,在类中直接定义了两个属性和一个方法。然后实例化了两个对象,这里的两个属性和一个方法,每创建一次myClass对象都会被创建一次,浪费了内存空间。而用prototype以后就可以解决这个问题,每new一个函数时,其prototype对象的成员都会自动赋给这个对象,当new多个对象时不会重复创建。 由于prototype的初始化发生在函数体执行之前,用以下代码可以证明: function myClass() { //此处相当于构造函数 this.ID = 1; this.Name1 = this.Name; this.showMessage();} myClass.prototype.Name = " johnson " ;myClass.prototype.showMessage = function () { alert("ID: " + this.ID + ", Name: " + this.Name);} var obj1 = new myClass();
执行以上代码可以发现当new这个类型的对象时,即弹出了对话框。 最后只得一提的是,prototype有一个方法,在面向对象的设计中用得到。即:constructor属性,是对构造函数的调用,这里的构造函数即上文提到的类的声明里的代码。如: function myClass() { //此处相当于构造函数 alert("this is in constructor");} myClass.prototype.constructor(); var obj1 = new myClass();
执行以上代码你会发现对话框弹出了两次。由此可见,prototype可专门用于设计类的成员,实际上在JavaScript面向对象的设计中,很多时候都会用到prototype。 JavaScript没有类的概念,需要通过函数来实现类的定义。先通过一个例子说明: function myClass() { var id = 1; var name = "johnson"; //properties this.ID = id; this.Name = name; //method this.showMessage = function() { alert("ID: " + this.ID + ", Name: " + this.Name); }} var obj1 = new myClass(); var obj2 = new myClass();
function的定义实际上相当于类的构造函数,最后两句是创建这个类的实例。先分析第一句: var obj1 = new myClass(); 当用new创建类的实例时,解释器首先会创建一个空的对象。然后运行这个myClass函数,并将this指针指向这个类的实例。当碰到 this.ID = id;和 this.Name = name;及 this.showMessage = function(){...}时,便会创建这两个属性,和这个方法,并把变量id,name的值一级函数的定义赋给这两个属性及这个函数对象(shwoMessage)。这个过程相当于初始化这个对象,类似于C# 中的构造函数。最后new返回这个对象。再看第二句: var obj2 = new myClass(); 执行过程与上一句代码相同,即创建一个空对象,然后执行myClass这个函数,定义两个属性和一个方法。 从上面的分析中可以看到,上面这种实现类的方式,即在函数的定义中定义类的属性方法。存在着弊端。如果需要创建两个或更多这个类的实例时,上文是两个,这些属性会被重复的创建多次。 那么如何避免这种情况呢?上一篇中也曾提到过用prototype。prototype和它的名字一样是一个原型,每一个function都有一个子对象prototype,它其实表示这个function对象的成员的集合,由于这里我们使用function实现类的,所以可以说prototype其实就是便是类的成员的集合。prototype定义的属性和方法执行在函数的构造体执行之前,所以当new一个对象之前,其实prototype的成员已经执行过了。先看一个例子: function myClass() { //构造函数} myClass.prototype = { ID: 1, Name: "johnson", showMessage: function() { alert("ID: " + this.ID + ", Name: " + this.Name); }} var obj1 = new myClass(); var obj2 = new myClass();
类的结构还是和前面的例子相同,只不过这里是利用了prototype来实现。还是先看最后两句,前面说过,prototype是执行在函数构造体之前,即执行到 var obj1 = new myClass();之前,这个类已经有了ID,Name属性和showMessage方法。执行者一句时执行过程如下,注意和前一个例子比较:首先还是创建一个空的对象,并把this指针指向这个对象。然后将函数的prototype对象的所有成员都赋给这个对象(注意没有再创建这些成员)。然后执行函数体。最后new返回这个对象。执行下一句时:同样执行此过程,不会重复创建这些成员。 上面的代码还只是一个例子,在实际的项目中,可能出现的是类中有大量的成员,同时可能需要创建大量的实例。这是prototype就会显示其优越性了。另外上面的代码中使用了大括号语法定义了prototype的成员,这样看起来代码更清晰。这是一种比较推荐的类的设计模式。当然在众多的项目中,可能还会发现更好的模式,我们也希望能有更优化的JavaScript的编程模式不断推陈出新,也希望随着时间的推移,各主流浏览器也对JavaScript的解析都标准,统一。 上面说过prototype定义的成员是发生在构造体之前,可以证明一下,在上面的例子中,构造体是空的,在构造函数中加入一句 alert( this .Name);,当执行到 var obj1 = new myClass();时,会看到弹出对话框,显示正确的属性值。 写了这段文字之后承蒙多为兄弟的点评,收获匪浅。对上面的例子进一步讨论,如下代码: function subClass() { } subClass.prototype = { Name: "sub"} function myClass() { //构造函数} myClass.prototype = { ID: 1, Name: "johnson", SubObj: new subClass(), showMessage: function() { alert("ID: " + this.ID + ", Name: " + this.Name + "SubObj.Name:" + this.SubObj.Name); }} var obj1 = new myClass();obj1.SubObj.Name = " XXX " ;obj1.showMessage(); var obj2 = new myClass();obj2.showMessage();
这里在myClass中定义了一个引用类型,其类型是我们自定义的一个subClass类,这个子类中有一个Name属性。由于prototype对象是共享的,按照我们上面的分析:在执行 var obj1 = new myClass();时,会把myClass的prototype中的成员复制给这个obj1实例。但这里SubObj是一个引用类型,在执行到 var obj2 = new myClass();时,prototype中的ID,Name成员会复制到obj2中,但SubObj这个属性不会复制过去,而是引用了prototype中的SubObj,所以因为上一句修改了obj1.Subobj.Name的值,所以在用new生成obj2实例时,引用到了修改后的值。 所以借用prototype定义类时,依然需要将属性定义在构造体中,而将方法定义在该构造体的原型上。如下: function myClass(id, name) { this.ID = id; this.Name = name;} myClass.prototype = { showMessage: function() { alert("ID: " + this.ID + ", Name: " + this.Name); }, showMessage2: function() { alert("Method2"); }} var obj1 = new myClass( 1 , " johnson " );obj1.showMessage();obj1.Name = " John " ;obj1.showMessage(); var obj2 = new myClass( 2 , " Amanda " );obj2.showMessage();
转载地址:https://linuxstyle.blog.csdn.net/article/details/6890695 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年04月22日 17时54分05秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【NLP学习笔记】词共现矩阵
2019-04-30
【NLP学习笔记】NLP基础知识框架图
2019-04-30
【工具和环境】Linux下安装pycharm
2019-04-30
【工具与环境】Windows下安装Sublime Text 3
2019-04-30
【工具与环境】Excel中批量插入行
2019-04-30
【学习笔记】对vanilla的一些个人理解
2019-04-30
“学硕” VS “专硕”
2019-04-30
【NLP学习笔记】知识图谱阅读笔记及其心得
2019-04-30
【工具使用】新版CSDN-markdown编辑器使用指南
2019-04-30
《知识图谱》阅读笔记(六)
2019-04-30
【NLP学习笔记】中文分词(Word Segmentation,WS)
2019-04-30
【NLP学习笔记】词性标注(Part-of-speech Tagging, POS)
2019-04-30
《知识图谱》阅读笔记(七)
2019-04-30
《知识图谱》阅读笔记(九)
2019-04-30
【超越白皮书7】你需要知道关于ETH2.0的几个事实
2019-04-30
超越白皮书8:穿云而过的闪电网络
2019-04-30
AMM做市无常损失对冲分析系列(一)—— 损益及期权对冲模型构建
2019-04-30
JS中document对象和window对象有什么区别
2019-04-30
【python练习题】遍历1
2019-04-30