2021.5.19 JS高级第二天_js第二天重置-CSDN博客

本文链接：https://blog.csdn.net/JINGMaNong/article/details/117094194

构造函数、实例、原型三者之间的关系

1.任何函数都具有一个 prototype 属性，该属性是一个对象
2.构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数
3.通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 `proto

4.所有实例都直接或间接继承了原型对象的成员

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>构造函数、实例、原型三者之间的关系</title>
		<script>
			window.onload = function() {
				//构造 函数
				function Student() {
					this.name = "zhangsan";
					this.age = 18;
					this.getInof = function() {
						alert("姓名" + this.name + " " + "年龄" + this.age);
					}
				};
				//创建实例--对象
				var stu1 = new Student();
				stu1.getInof();
				Student.prototype.address = "西安";
				//alert(stu1.address);
				//实例对象访问原型对象
				//alert(stu1.__proto__);
				//构造函数的 `prototype` 对象默认都有一个 `constructor` 属性，
				//指向 `prototype` 对象所在函数
				alert(Student.prototype.constructor);
			}
		</script>
	</head>
	<body>
	</body>
</html>

原型对象

1.共享数组

2.共享对象

3.如果真的希望可以被实例对象之间共享和修改这些共享数据那就不是问题。但是如果不希望实例之间共享和修改这些共享数据则就是问题。

4.一个更好的建议是，最好不要让实例之间互相共享这些数组或者对象成员，一旦修改的话会导致数据的走向很不明确而且难以维护。

5.原型对象使用建议

1私有成员（一般就是非函数成员）放到构造函数中

2共享成员（一般就是函数）放到原型对象中

3如果重置了 prototype 记得修正 constructor 的指向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function() {

				function Student() {
					this.name = "zhangsan";
					this.age = 18;
					this.getInof = function() {
						alert('姓名' + this.name + " " + "年龄" + this.age);
					}
				};
				/*
				//为原型中添加属性或方法
				Student.prototype.address=("西安");
				Student.prototype.test=function(){
					alert("为原型中添加方法")
				}
				var stu1=new Student();
				//alert(stu1.address);
				//stu1.test();
				
				//重写整个原型对象：
				Student.prototype={
					address:"西安",
					test:function(){
						alert("重写");
					}
				};
				//实例访问原型对象中添加属性或方法
				var stu1=new Student();
				//alert(stu1.address);
				//stu1.test();
				//alert(Student.prototype.constructor);//function Object() { [native code] }
				//手动将 constructor 指向正确的构造函数
				
				Student.prototype={
					constructor:Student,
					address:"西安",
					test:function(){
						alert("重写");
					}
				};
				alert(Student.prototype.constructor);
				*/
				//数组扩展原型方法
				Array.prototype.name = "数组";
				Array.prototype.testarray = function() {
					alert("数组扩展原型方法");
				};
				var arr1 = new Array();
				arr1.testarray();
				//数字扩展原型方法
				Number.prototype.namenumber = "数字";
				Number.prototype.testnum = function() {
					alert("");
				};
				var num1 = new Number();
			}
		</script>
	</head>
	<body>
	</body>
</html>

继承

程序中的继承–一个对象从另一个对象那里得到属性/方法。

继承的实现:
1.构造函数的[属性]继承—

call()方法–从构造函数中继承到构造函数的属性和方法

构造函数的名称.call(this,…)

2.构造函数的[原型方法]继承：拷贝继承（for-in）

3.原型继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承</title>
		<script>
			window.onload = function() {
				//构造函数的名称.call(this,.....)
				function Person(name, age) {
					this.name = name;
					this.age = age;
					this.getPersonInof = function() {
						alert("Person构造函数的名称");
					}
				};
				function Student(address) {
					this.address = address;
					//通过call()方法从Person构造函数中继承到属性和方法
					//构造函数的名称.call(this,.....)
					Person.call(this, "zangsan", 23);
				}
				//创建Student对象
				var stu1 = new Student("西安");
				//alert(stu1.name);
				//alert(stu1.age);
				alert(stu1.address);

				//构造函数的[原型方法]继承：拷贝继承（for-in） 
				function Person(name, age) {
					this.name = name;
					this.age = age;
					this.getPersonInof = function() {
						alert("Person构造函数的名称");
					}
				};
				function Student(address) {
					this.address = address;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>