代码改变世界

JavaScript的类的实现

  敏捷的水  阅读(488)  评论(0编辑  收藏  举报

工厂方式

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

   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 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
历史上的今天:
2008-06-18 C#拾遗系列(7):自定义属性
点击右上角即可分享
微信分享提示