JavaScript 面向对象编程（2） 定义类

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript 面向对象编程（2） 定义类，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4530字，纯文字阅读大概需要7分钟。

内容图文

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(); 
 
关于私有成员，共有成员以及静态成员，类的继承，抽象类，虚方法，类的反射等实现方法，以后还会坚持写下去。不过我觉得需要说一下的是，我打算写的是JavaScript面向对象的基础实现，如果需要深入的学习建议参考李战老哥的“甘露模型”。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的JavaScript 面向对象编程（2） 定义类全部内容，希望文章能够帮你解决JavaScript 面向对象编程（2） 定义类所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端