javascript对象的几种模式创建方式

最新推荐文章于 2024-04-08 00:00:00 发布

陌上花开-可缓缓归矣

最新推荐文章于 2024-04-08 00:00:00 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/mshkkhhgy/article/details/79475237

版权

1、工厂模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

	var gong =new Object();
	gong.name="yangyang";
	gong.age=20;
	gong.work=function(){
	   alert("我是"+gong.name+",actor");
	}
	gong.work();

</script></head><body></body></html>

在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。

2、构造函数模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function Person(name,age,job){
		this.name=name;
		this.age=age;
		this.job=job;
		this.say=function(){
			alert("我叫"+this.name+",我喜欢"+this.job+",吃");
		};
	}
	var yang=new Person('yangyuying',30,'singer');
	yang.say();
</script>
</head>
<body>
</body>
</html>

对比工厂模式，我们可以发现以下区别：

1.没有显示地创建对象

2.直接将属性和方法赋给了this对象

3.没有return语句

4.终于可以识别的对象的类型

同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的，但是它也有它的缺点：

就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。

3、原型模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function actor(){}
	actor.prototype.name="杨洋";
	actor.prototype.work=function(){
		alert(this.name+"是演员");
	}
	var yang=new actor();
	yang.work();
</script>
</head>
<body>
</body>
</html>

使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。

4、混合构造函数和原型模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function Car(name,price){  
	  this.name=name;  
	  this.price=price;   
	}  
	Car.prototype.sell=function(){  
	   alert("我是"+this.name+"，我现在卖"+this.price+"万元");  
	}  
	var camry =new Car("凯美瑞",27);  
	camry.sell(); 
</script>
</head>
<body>
</body>
</html>

这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性

5、动态原型模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function Car(name,price){  
		this.name=name;  
		this.price=price;   
		if(typeof Car.sell=="undefined"){  
		    Car.prototype.sell=function(){  
		    	alert("我是"+this.name+"，我现在卖"+this.price+"万元");  
			}
			Car.sell=true;  
		}  
	}  
	var camry =new Car("凯美瑞",27);  
	camry.sell(); 
</script>
</head>
<body>
</body>
</html>

动态原型模式，可以看作是混合模式的一种特例

6、寄生构造函数模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function SpecialArray(){
	    var array = new Array();
	    array.push.apply(array,arguments);
	    array.toPipedString = function(){
	        return this.join("|");
	    };
	    return array;
	}
	var colors = new SpecialArray("red","green","pink");
	alert(colors.toPipedString());
	alert(colors instanceof SpecialArray);
</script>
</head>
<body>
</body>
</html>

我们知道当我们自定义一个构造函数后，使用new的方式来创建一个对象时，默认会返回一个新对象实例，构造函数中是没有return 语句的。而这里所谓的寄生构造函数，基本思想是创建一个函数，这个函数的作用仅仅是为了某一个特定的功能而添加一些代码，最后再将这个对象返回，除了使用了new操作符并把包装的函数叫做构造函数外，这个模式跟工厂模式没有任何区别。另外，这个SpecialArray()返回的对象，与SpecialArray()构造函数或者与构造函数的原型对象之间没有任何关系，就像你在SpecialArray()外面创建的其他对象一样，所以如果用instanceof操作符来检测的话，结果只能是false咯。所以这是它的问题

7、稳妥构造函数模式

先说稳妥二字，别人定义了一个稳妥对象，即没有公共属性，而且其方法也不引用this对象，这种模式适应于一些安全环境中（禁止使用this和new），或防止数据被其他应用程序改动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function Person(name,age,gender){
	    var obj = new Object();
	    obj.sayName = function(){
	        alert(name);
	    };
	    return obj;
	}
	var person = Person("Stan",0000,"male"); // 这里没有使用new操作符
	person.sayName();
	alert(person instanceof Person); 
</script>
</head>
<body>
</body>
</html>

这里person中保存了一个稳妥对象，除了调用sayName()方法外，没有别的方式可以访问其数据成员。即使有其他代码会给这个对象添加方法或属性，但也不可能有别的办法访问传入到构造函数中的原始数据。同样与寄生函数模式类似，使用稳妥构造函数模式创建的对象与构造函数之间也没有任何关系.