JS创建对象的五种模式

方式一:Object构造函数模式

我们想创建一个人的对象,其拥有姓名属性:"Tom",age:18,拥有一个可以修改其名字的方法,我们可以如下代码构造

var p=new Object();
p.name="Tom";
p.age=18;
p.setName=function(name){
	this.name=name;
}

 

在浏览器端简单调试,我们可以看到,创建对象成功。先创建空Object对象,再往里边添加属性和方法。

适用于:起始时不确定对象内部数据。  缺陷:无法创建多个对象,效率低。

 

方法二:对象字面量模式

同样是方法一的问题基础,我们使用如下代码

 		var p={
			name:"Tom",
			age:18,
			setname:function(name){
				this.name=name;
			}
		}

使用{}直接创建对象,同时添加属性和方法。

适用场景:创建时内部属性方法确定。

缺陷:创建对个对象,例如创建另一个人p2时,代码端有重复的,不简洁。

 

方法三工厂模式

返回一个对象的函数,我们可以称为工厂函数,例如

		function createPerson(name,age){
			var obj={
				name:name,
				age:age,
				setName:function(name){
					this.name=name;
				}
			}
			return obj;
		}

函数createPerson()有两个形参name和age,在函数内部构建了一个对象Obj,并且返回。那么怎么创建对象实例呢?

		var p1=createPerson('Tom',100);
		var p2=createPerson('THL',20);
		var p3=createPerson('WYM',18);

一下就创建了三个对象实例,没有重复代码,就和工厂流水线一样。

适用场景:需要创建多个对象实例。

 

方法四:自定义构造函数模式

		function Person(name.age){
			this.name=name;
			this.age=age;
			this.setname=function(name){
				this.name=name;
			}
		}
		var p1=new Person('Tom',19);
		var p2=new Person('THL',19);

非常简单,看着和JAVA里,类的构造函数一样,创建出了对象实例子。

缺陷:每个对象中的方法都是重复的,浪费内存空间,比如setName方法。

我们可以怎么改进一下呢?引入最后一种模式

 

方法五:构造函数+原型的组合构造模式

		/* 构造+原型的模式 */
		function Person(name,age){  //在构造函数中只初始化一般属性
			this.name;
			this.age=age;
		}
		
		Person.prototype.setName=function(name){
			this.name=name;
		}

		var p1=new Person('Tom',19);
		var p2=new Person('THL',19);

每个函数都有自己的原型对象,我们将方法添加到原型对象中,这样每个实例化对象都可以使用原型中的方法了,不浪费内存空间。

注意:此处的this,并不是指代原型对象,原型对象中的方法,是给各个实例化对象使用的。

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值