JavaScript教程-43-原型对象常用开发模式

最新推荐文章于 2022-01-21 11:57:54 发布

木易yves

最新推荐文章于 2022-01-21 11:57:54 发布

阅读量239

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35938103/article/details/105393835

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

在实际的开发过程中，我们创建对象，给对象添加属性和方法，当需要多个对象共享同一个属性方法的时候，会使用原型来实现。JavaScript的继承是以原型为基础的，接下来我们就看看经常使用的基于原型对象的开发模式。

1：组合模式：使用原型和构造函数的组合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>原型构造函数创建对象</title>
		<script type="text/javascript">
			//属性封装到构造方法中。
			function Person(name,age){
				this.name = name;
				this.age = age;
			}
			//方法添加到函数原型中
			Person.prototype.show = function(){
				alert("name = "+this.name + " age = "+this.age);
			}
			
			var p1 = new Person("小刚",19);
			var p2 = new Person("小马",18);
			//name = 小刚 age = 19
			p1.show();
			//name = 小马 age = 18
			p2.show();
		</script>
	</head>
	<body>
	</body>
</html>

2：动态原型模式创建对象，可以将所有的内容都封装到一起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态原型模式创建对象</title>
		<script type="text/javascript">
			//动态原型模式创建对象
			function Person(name,age){
				this.name = name;
				this.age = age;
				//第一次调用Person 的时候，show不存在，就添加show 方法。
				//以后调用，因为show方法存在了，就直接调用了。
				if(typeof this.show !== "function"){
					//在原型中添加方法
					Person.prototype.show = function(){
						alert("name = "+this.name + " age = "+this.age);
					}
				}
			}
			
			var p1 = new Person("小刚",19);
			var p2 = new Person("小马",18);
			//name = 小刚 age = 19
			p1.show();
			//name = 小马 age = 18
			p2.show();
		</script>
	</head>
	<body>
	</body>
</html>

3：稳妥构造函数式

所谓稳妥构造函数式，就是没有公共的属性，而且其他的方法也不引用this对象，稳妥模式适合在安全环境中使用。如果你的程序对于安全性要求比较高，可以采用这样的模式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>稳妥构造函数式</title>
		<script type="text/javascript">
			//稳妥构造函数式类似于java中的java bean 。属性私有。通过getter and setter 去访问
			function Person(name , age){
				//创建一个私有对象
				var obj = new Object();
				//创建私有属性
				var name = name;
				var age = age;
				//创建对应的getter和setter
				obj.getName = function(){
					return name;
				}
				obj.setName = function(_name){
					name = _name;
				}
				obj.show = function(){
					alert("name = "+name + " age = "+age);
				}
				return obj;
			}
			//测试
			var obj = new Person("小刚",18);
			obj.show();//name = 小刚 age = 18
			obj.setName("小兰");
			alert(obj.getName());//小兰
			obj.show();//name = 小兰 age = 18
		</script>
	</head>
	<body>
	</body>
</html>

PS：笔者有大量的学习资料：java、python、大数据、人工智能、前端等。需要的小伙伴请加群：711408961

笔者的b站中有一些教学视频分享。感兴趣的小伙伴可以关注：https://space.bilibili.com/412362068