/
oop继承六种方式.html
148 lines (139 loc) · 4.78 KB
/
oop继承六种方式.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript继承例子</title>
</head>
<body>
<script>
// 原型链继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setName = function () { }
// }
// Person.prototype.setAge = function () { }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// 借用构造函数继承
// function Person(name, age) {
// this.name = name,
// this.age = age
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(price) {
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype.sayHello = function () { }
// Student.prototype = new Person
// Student.prototype.sayHello = function () { }
// var s1 = new Student(15000)
// var s2 = new Student(14000)
// console.log(s1, s2)
// s1.play.push(4)
// console.log(s1.setAge, s2.setAge)
// console.log(s1.__proto__ === s2.__proto__)
// console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
// console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
// 原型链+借用构造函数的组合继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// var p1 = new Person('jack', 15)
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = new Person()
// Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// var s2 = new Student('Jack', 22, 14000)
// console.log(s1.constructor) //Student
// console.log(p1.constructor) //Person
// 组合继承优化1
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = Person.prototype
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// console.log(s1 instanceof Student, s1 instanceof Person)//true true
// console.log(s1.constructor)//Person
//组合继承优化2
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
var s1 = new Student('Tom', 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1)
//ES6 class继承
// class Person {
// //调用类的构造方法
// constructor(name, age) {
// this.name = name
// this.age = age
// }
// //定义一般的方法
// showName() {
// console.log("调用父类的方法")
// console.log(this.name, this.age);
// }
// }
// let p1 = new Person('kobe', 39)
// console.log(p1)
// //定义一个子类
// class Student extends Person {
// constructor(name, age, salary) {
// super(name, age)
// this.salary = salary
// }
// showName() { //在子类自身定义方法
// console.log("调用子类的方法")
// console.log(this.name, this.age, this.salary);
// }
// }
// let s1 = new Student('wade', 38, 1000000000)
// let s2 = new Student('kobe', 40, 3000000000)
// console.log(s1.showName === s2.showName)//true
// console.log(s1)
// s1.showName()
</script>
</body>
</html>