JavaScript的类的实现

简介:

工厂方式

对象的属性可以在对象创建后定义,所以我们常常写如下的代码。

   1: var oProduct=new Object;
   2: oProduct.name="IPhone";
   3: oProduct.color="black";
   4: oProduct.screen=3.5;
   5: oProduct.showColor=function(){
   6:     alert(this.color);
   7: };

但这只能创建一个实例,我们如何创建多个实例呢?

   1: function createProduct(){
   2:     var oProduct=new Object;
   3:     oProduct.name=""IPhone";
   4:     oProduct.coloer="black";
   5:     oProduct.screen=3.5;
   6:     oProduct.showColor=function(){
   7:         alert(this.color);
   8:     };
   9:     
  10:     return oProduct;
  11: };
  12:  
  13: var oProductA=createProduct();
  14: var oProductB=createProduct();

当然,上面的createProduct函数可以接收参数,从而让不同的对象具有不同的属性。但是,上面的每个对象都有自己的showColor函数,实际上他们可以同一个函数。我们可以改为如下。
   1: function showColor()
   2: {
   3:     alert(this.color);
   4: }
   5: 然后,createProduct里的showColoer改为oProduct.showColor=showColoer

上面的代码问题是函数看起来不像对象的方法。

构造函数方式

   1: function  Product(sName,sColor,nScreen){
   2:     this.name=sName;
   3:     this.color=sColor;
   4:     this.screen=nScreen;
   5:     this.showColor=function(){
   6:            alert(this.color);
   7:     };
   8: }
   9: var oProductA=new Product("IPhone","black","3.5");
  10: var oProductB=new Product("Palm","Golden","3.5");

同样,共享函数问题,可以向工厂方法一样改进。

原型方法

   1: function Product(){};
   2: Product.prototype.name="IPhone";
   3: Product.prototype.color="Black";
   4: Product.prototype.screen="3.5";
   5: Product.prototype.showColor=function(){
   6:     alert(this.color);
   7: };
   8:  
   9: var oProductA=new Product();
  10: var oProductB=new Product();

原型方法的问题,是不能接受参数,原型方法定义的属性和方法我的理解是想C#里的静态属性和静态方法。

混合构造函数和原型方式

   1: function Product(sName,sColor,nScreen){
   2:     this.name="IPhone";
   3:     this.color="Black";
   4:     this.screen="3.5";
   5:     this.Factories=new Array{"IBM","DELL"};
   6: };
   7: Product.prototype.showColor=function(){
   8:     alert(this.color);
   9: };
  10:  
  11: var oProductA=new Product("IPhone","black",3.5);
  12: var oProductB=new Product("Palm","Golden",4);
  13:  
  14: oProductA.Factories.push("HP");
  15: alert(oProductA.Factories); //outputs: IBM,DELL,HP
  16: alert(oProductB.Factories); //outputs: IBM,DELL

动态原型方法

   1: function Product(sName,sColor,nScreen){
   2:     this.name="IPhone";
   3:     this.color="Black";
   4:     this.screen="3.5";
   5:     this.Factories=new Array{"IBM","DELL"};
   6:     if(typeof Car._initialized=="undefined"){
   7:           Product.prototype.showColor=function(){
   8:                 alert(this.color);
   9:           };      
  10:     }    
  11: };
  12:  
  13: var oProductA=new Product("IPhone","black",3.5);
  14: var oProductB=new Product("Palm","Golden",4);
  15:  
  16: oProductA.Factories.push("HP");
  17: alert(oProductA.Factories); //outputs: IBM,DELL,HP
  18: alert(oProductB.Factories); //outputs: IBM,DELL

混合工厂方法

   1: function  Product(sName,sColor,nScreen){
   2:     var oProduct=new Object;
   3:     oProduct.name=sName;
   4:     oProduct.color=sColor;
   5:     oProduct.screen=nScreen;
   6:     oProduct.showColor=function(){
   7:         alert(this.color);
   8:     };
   9:     
  10:     return oProduct;
  11: }
  12:  
  13: var oProductA=new Product(new Product("IPhone","black","3.5");

通过上面的分析,本人更喜欢使用动态原型方法

本文转自敏捷的水博客园博客,原文链接http://www.cnblogs.com/cnblogsfans/archive/2009/06/18/1506218.html如需转载请自行联系原作者


王德水

相关文章
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
19 0
|
1月前
uni-app 65egg.js聊天类chat.js封装(二)
uni-app 65egg.js聊天类chat.js封装(二)
25 1
|
5月前
|
JavaScript 前端开发 Java
javascript实现像java、c#之类的sleep暂停的函数功能
javascript实现像java、c#之类的sleep暂停的函数功能
41 0
|
1月前
uni-app 66聊天类chat.js封装(三)
uni-app 66聊天类chat.js封装(三)
27 6
|
1月前
uni-app 64聊天类chat.js封装(一)
uni-app 64聊天类chat.js封装(一)
22 2
|
2月前
|
JavaScript 索引
js之数组,对象,类数组对象
js之数组,对象,类数组对象
|
3月前
|
JSON JavaScript 前端开发
【面试题】JS判断两个数组相等的4类方法
【面试题】JS判断两个数组相等的4类方法
|
4月前
|
缓存 JavaScript 前端开发
从0开始学习JavaScript--JavaScript中的集合类
JavaScript中的集合类是处理数据的关键,涵盖了数组、Set、Map等多种数据结构。本文将深入研究这些集合类的创建、操作,以及实际应用场景,并通过丰富的示例代码,帮助大家更全面地了解和应用这些概念。
|
4月前
|
存储 JavaScript 前端开发
对象和类:JS是一种基于对象的语言,可以创建和使用自定义对象。ES6引入了类的概念,使得面向对象编程更加方便。
对象和类:JS是一种基于对象的语言,可以创建和使用自定义对象。ES6引入了类的概念,使得面向对象编程更加方便。
25 0