js中继承的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//重点明白  普通继承即可!  apply()  call()
	//至于原型继承,了解即可!可先忽略!!
	function Person(name, sex, age, phone, ID){
		this.name = name;
		this.sex = sex;
		this.age = age;
		this.phone = phone;
		this.ID = ID;
		this.sleep = function(){
			console.log("睡觉!")
		};
		this.eat = function(){
			console.log("吃饭!");
		}
		
		
		
	}
	var p1 = new Person("狗子", "男", 19, "1498098344", "410203890839083");
	console.log(p1);
	p1.eat();
	p1.sleep();
	//给原型对象添加一个方法
	Person.prototype.shopping = function(){
		console.log("陪女朋友逛逛街啦!");
	}
	p1.shopping();
	//给原型对象添加一个属性  
	Person.prototype.address = "地球村";
	console.log(p1.address);
	//--------------------------------------------
	function Student(num, name, sex, age, phone, ID, score){
		//来!!继承关系!! 可以继承Person 顺便用一用父类的构造函数给属性赋值
		Person.apply(this, [name, sex, age,phone, ID]);

		this.num = num;
		this.score = score;
		//新增方法
		this.study = function(){
			console.log("学生嘛!好好的学习,为了更好的生活!");
		}
	}
	
		//原型不能直接继承
	//原型继承---------------------------------
	var F = function(){};
	F.prototype = Person.prototype;
	Student.prototype = new F();
	Student.prototype.constructor = Student;
	//constructor 中文--叫做构造函数
	//constructor原型对象自身的属性,默认执行原型对象所引用的构造函数!!
	
	
	//创建学生对象
	var stu = new Student(1, "鹏鹏", "男", 19, "1782987373", "412903893790379", 99);
	console.log(stu);
	stu.sleep(); //子类调用父类的方法
	stu.eat();//子类调用父类的方法
	stu.study();//子类调用自己本类中的新增方法
	stu.shopping();//调用父类中的原型方法!!!

	//------------------------------------------------------
	//练习:定义teacher教师类  继承子Person
	function Teacher(num, name, sex, age, phone, ID, job){
		Person.call(this, name, sex, age, phone, ID);
		this.num = num;
		this.job = job;
		this.shangban = function(){
			console.log("好好上班!");
		}
		
	}
	var F = function(){};
	F.prototype = Person.prototype;
	Teacher.prototype = new F();
	Teacher.prototype.constructor = Teacher;
	
	
	
	//类名  == 构造函数名
	var t1 = new Teacher("56", "姣姣啊", "女", 18, "18638520107", "4102937983739873", "前端讲师");
	console.log(t1);
	console.log(t1.name);
	t1.name = "Aurora";
	t1.sleep();
	t1.eat();
	t1.shangban();
	t1.shopping();
	//call(this, 参数1, 参数2, 参数3....)
	//apply(this, [参数1, 参数2, 参数3..])
	//最终实现的效果都是一样的!!都是为了继承!!!
	//-----------------------------------------------------------------
	
	
	
	//注意:想要调用父类原型中的方法!!必须要先继承原型! 再创建子类对象!!!
	var s1 = new Student();
	s1.shopping();
	
	
</script>
<!--
	1.子类继承父类,就会继承父类的属性he方法!!
	2.子类还可以新增属性和方法!!
	3.继承是单向!!!
	
-->

前端三剑客
#JS
js中继承的使用
http://ultracode.cn/2020/12/18/JS/js中继承的使用/
作者
Win
发布于
2020年12月18日
许可协议