面向对象的程序设计

JavaScript如何创建对象(常用模式)

一:工厂模式

       工厂就比如纺织业,你给他什么原材料,他就给你制作什么布料出来,我们如果每次单独创建对象,那么每创建一个都会再去把他的创建原理和过程都写一遍,可是他们有时候耦合度很高,就比如都是纺织对象,属性,功能什么的都大相径庭,我们为什么不给他们制造一个工厂,明确工厂的任务,然后需要使用这个工厂的时候就把原材料丢进去制造。这样让我们的代码看起来不那么冗余,而且思路异常清晰。

function creatCloth(cloth,money,count)
   {
	   var o = new Object();
	   o.cloth = cloth;
	   o.money = money;
       o.count = count;
	   o.day = function()
	   {
		   console.log('需要' + count/5 + '天')
	   }
	   return o;
   }
   var customer1 = creatCloth('纱布', 100, 50);
   console.log(customer1);//{cloth: "纱布", money: 100, count: 50, day: ƒ}
   customer1.day();//需要10天
   var customer2 = creatCloth('棉', 200, 60);
   console.log(customer2);//{cloth: "棉", money: 200, count: 60, day: ƒ}
   customer2.day();//需要12天

这种工厂模式就解决了创建对个相似对象的问题。可是不能让我们知道一个对象的类型。所以下面来给大家介绍另外一种模式,叫做构造函数模式。

二:构造函数模式

我们先修改我之前的代码,把他修改成

   function Cloth(cloth,money,count)
   {
	   this.cloth = cloth;
	   this.money = money;
       this.count = count;
	   this.day = function()
	   {
		   console.log('需要' + this.count/5 + '天')
	   }
   }
   var customer1 = new creatCloth('纱布', 100, 50);
   console.log(customer1);//{cloth: "纱布", money: 100, count: 50, day: ƒ}
   customer1.day();//需要10天
   var customer2 = new creatCloth('棉', 200, 60);
   console.log(customer2);//creatCloth {cloth: "棉", money: 200, count: 60, day: ƒ}
   customer2.day();//需要12天
   creatCloth('棉', 20, 5);
   window.day();//需要1天

我们可以观察以下这两个模式的区别,①这个引入了this的使用②没有return语句③函数名的改变

第一,这个this,指向的是什么呢?我们只要记住一句,谁是他的实例,这个this就指向谁,可是为什么我们在使用时要使用new来创建实例呢?那是因为构造函数用于创建特定类型的对象,但是我们也发现了如果我直接当做函数的调用了,这个对象的指向回事window对象,当然我们也可以使用call或者applyl来创建对象,这个大家可以自己下去试试。然后他们之间有什么区别呢?当然我前面说了,我们创建的都是有特定类型的对象,如果我们想检验这个特定类型,我们可以使用一个函数,叫做instanceof,对于这个函数的机制大家可以参考链接点击打开链接

第二,在这个对象里面有一个day函数,每一次我们创建新的对象都必须把它重新创建一次,所以我们应该将他提到全局去,然后在构造函数里面使用指针指向全局函数。代码如下

 function Cloth(cloth,money,count)
   {
	   this.cloth = cloth;
	   this.money = money;
           this.count = count;
	   this.day = day;
   }
   function day ()
	   {
		   console.log('需要' + this.count/5 + '天')
	   }

当我们所需要的全局函数多了的时候,对于对象来说就没有任何的封装可言。所以我给大家介绍了另外一种模式,叫做原型模式。

三:原型模式

  function Cloth()
   {
   }
   Cloth.prototype.cloth = '纱布';
   Cloth.prototype.money = 100;
   Cloth.prototype.count = 50;
   Cloth.prototype.day=function day ()
	   {
		   console.log('需要' + this.count/5 + '天')
	   }
   var customer1 = new Cloth();
   console.log(customer1);
   customer1.day();
   var customer2 = new Cloth();
   console.log(customer1.day===customer2.day)//true

我们将对象的属性和方法全部挂在了对象的原型链上,我们可以看到最后打印出来他们的方法和属性都是相同的,因为挂载到原型链上,原型链有一个思想就是共享,就是挂载到原型链上,就表示我们共享了这上面的数据,如果我们修改原型上面的数据,那么customer1和customer2上的数据都会更改。

可是我们有些属性并不想共享怎么办呢?那我们就应该使用最常见的一种方式——组合使用构造函数模式和原型模式。

四:组合构造函数模式和原型模式

这一点我就直接上代码,大家应该可以理解

  function Cloth(cloth,money,count)
   {
	   this.cloth = cloth;
	   this.money = money;
       this.count = count;
   }
   Cloth.prototype.day=function day ()
   {
	   console.log('需要' + this.count/5 + '天')
   }
   var customer1 = new Cloth('纱布', 100, 50);
   console.log(customer1);
   customer1.day();
   var customer2 = new Cloth('棉', 200, 60);
   console.log(customer2);
   customer2.day();

组合使用构造函数模式和原型模式虽然让我们更好的理解和创建对象,但是我们的封装思想却没有得到体现,所以再给大家介绍一种——动态原型模式

五:动态原型模式

在构造函数中创建原型,将所有信息封装于构造函数中,直接上代码,大家应该能够理解

  function Cloth(cloth,money,count)
   {
	   this.cloth = cloth;
	   this.money = money;
       this.count = count;
	   if(this.day !== "function")
	   {
		Cloth.prototype.day=function()
			{
				console.log('需要' + this.count/5 + '天')
			}
	   }
   }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值