JavaScript教程-42-简单原型的使用

最新推荐文章于 2022-05-16 13:56:13 发布

木易yves

最新推荐文章于 2022-05-16 13:56:13 发布

阅读量153

点赞数

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

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

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

直接看代码，说明都在注释里了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单原型的使用</title>
		<script type="text/javascript">
			//在以前学习的知识里，我们要通过原型去添加属性和方法是这样的。
			function Person(){}
			Person.prototype.name = "张三";
			Person.prototype.show = function(){
				alert("name = "+this.name);
			}
			//这个时候，通过Person 构造方法创建的对象，就继承了从原型对象中拥有的属性和方法。
			var person = new Person();
			//name = 张三
			person.show();
			//function Person(){}
			alert(Person.prototype.constructor);
			
			//还有一种比较简单的形式，简单原型对象的方式，通过改变原型对象的方式来添加属性和方法。
			Person.prototype = {
				name : "李四",
				show : function(){
					alert("name = "+this.name);
				}
			};
			var person1 = new Person();
			//name = 李四
			person1.show();
			//上述这种模式就是简单原型模式，直接将一个匿名对象赋值给Person.prototype。
			//这样的形式在给原型对象添加属性和方法的时候是比较简单的。但是也会存在问题
			//问题1：我们知道原型对象Constructor属性指向构造函数本身。
			//function Object() { [native code] }
			alert(Person.prototype.constructor);
			//但是使用简单原型对象，会改变原型对象的Constructor属性指向了Object。指向了父类的构造方法
			//如果我们要使用简单原型对象，那么需要重新指定原型对象的Constructor属性为Person
			//可以通过如下的方式
			Person.prototype = {
				constructor: Person,//使用这样的方式可以重新指定原型对象的Constructor属性为Person
				name : "李四",
				show : function(){
					alert("name = "+this.name);
				}
			};
			var person2 = new Person();
			for(attr in person2){
				alert(attr);//constructor name  show
			}
			
			//function Person(){}
			alert(Person.prototype.constructor);
			//但是上述的方式还存在一个问题，我们知道默认的Constructor属性是不能被枚举的。
			//但是使用上述的方式的Constructor属性可以被枚举。
			//如果需要Constructor属性不可以被枚举。需要借助一个方法。
			//该方法为Object.defineProperty(...)三个参数分别为
			//参数1：重设属性的对象。参数2：设置什么属性。参数3：属性options参数配置
			Object.defineProperty(Person.prototype, "constructor", {
				enumerable:false,//不能被枚举
				value:Person//值为Person
			})
			var person3 = new Person();
			for(attr in person3){
				alert(attr);//name  show
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

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

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

木易yves

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript教程-42-简单原型的使用

直接看代码，说明都在注释里了<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>简单原型的使用</title> <script type="text/javascript"> //在以前学习的知识里，我们要通过原型去添加属...
复制链接

扫一扫