-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path04.继承.html
162 lines (144 loc) · 4.67 KB
/
04.继承.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//定义父类 动物
function Animal (name) {
// 属性
this.name = name || 'animal'
//实例方法
this.sleep = function () {
console.log(this.name + ' is sleeping...')
}
}
//原型方法
Animal.prototype.walk = function () {
console.log(this.name + ' is walking')
}
//类方法
Animal.eat = function () {
console.log(this.name + ' is eating')
}
//定义父类 猫科
function Felidae (typeName) {
this.name = 'felidae'
this.typeName = typeName
this.getType = function () {
console.log(this.typeName)
}
}
/* ----------------------- 1. 原型链继承 ----------------------- */
// function Cat () { }
// var anim = new Animal()
// anim.__proto__ === Animal.prototype
// Cat.prototype = anim
// 缺点，这个anim实例对象别无用处，造成了内存的浪费，应该new一个空函数作为中间桥梁
// //原型属性
// Cat.prototype.name = 'miaomiao'
// var cat = new Cat()
// console.log(cat.__proto__ === Cat.prototype) //true
// console.log(cat.__proto__ === Animal.prototype) //false
// console.log(cat instanceof Cat) //true
// console.log(cat instanceof Animal) //true
// cat.sleep() //miaomiao is sleeping...
// cat.walk() //miaomiao is walking
// cat.eat() //cat.eat is not a function
// var animal = new Animal()
// animal.eat() //animal.eat is not a function
/*
优点: 1、单纯的实习继承，子类的实例也是父类的实例 2、父类的原型方法，属性，子类都可以访问
缺点: 1、不能实现多继承 2、原型对象的所有属性方法都被子类所共享 3、子类无法向父类构造器传参数
*/
/* ----------------------- 组合继承 ----------------------- */
// 组合继承 = 原型继承 + 构造继承
// function Cat (name) {
// Animal.call(this)
// }
// Cat.prototype = new Animal()
// const cat = new Cat()
// console.log(cat.walk())
// 缺点：继承了不必要的父类属性，造成性能浪费
/* ----------------------- 寄生组合继承 ----------------------- */
function Cat (name) {
Animal.call(this)
}
Cat.prototype = Object.create(Animal.prototype, {
constructor: {
value: Child,
enumerable: false,
writable: true,
confirurable: true
}
})
const cat = new Cat()
console.log(cat.walk())
// 优点：避免了创建了父类实例
// /* ----------------------- 2. 构造继承 ----------------------- */
// function Cat (name) {
// Animal.call(this)
// Felidae.call(this, 'cats')
// this.name = name
// }
// var cat = new Cat()
// console.log(cat.__proto__ === Animal.prototype) false
// console.log(cat instanceof Cat) true
// console.log(cat instanceof Animal) false
// cat.sleep() //undefined is sleeping...
// cat.name = 'cat'
// cat.sleep() //cat is sleeping...
// cat.getType() //cats
// console.log(cat.name) //undefined
// cat.walk() //Uncaught TypeError: cat.walk is not a function
/*
优点: 1、可以实现多继承 2、向父类传递参数
缺点: 1、不能实现函数复用 2、不能访问父类的原型属性和原型方法，只能访问实例属性和方法
*/
/* ----------------------- 3. 实例继承 ----------------------- */
// function Cat (name) {
// var instance = new Animal()
// instance.name = name || 'cat'
// return instance
// }
// var cat = new Cat()
// console.log(cat instanceof Cat) // false
// console.log(cat instanceof Animal) //true
// cat.sleep() //cat is sleeping...
// cat.walk() //cat is walking
// console.log(cat.__proto__ === Cat.prototype) //false
/*
实例是父类的实例，不支持多继承
*/
/* ----------------------- 4. 拷贝继承 ----------------------- */
// function Cat (name) {
// var animal = new Animal()
// for (var key in animal) {
// Cat.prototype[key] = animal[key]
// }
// Cat.prototype.name = name || 'cat'
// }
// var cat = new Cat()
// console.log(cat instanceof Cat) //true
// console.log(cat instanceof Animal) //false
// cat.sleep() //cat is sleeping...
// cat.walk() //cat is walking
// console.log(cat.__proto__ === Cat.prototype)
/*
可以多继承, 子类只能访问父类可枚举的方法(for in)
*/
/* 5. create */
// function Cat (name) {
// this.name = name
// }
// Cat.prototype = Object.create(Animal.prototype)
// Cat.prototype.constructor = Cat
// // console.log(Cat.prototype.constructor)
// Cat.prototype.type = 'dog'
// var cat = new Cat('cat')
// console.log(cat instanceof Cat) //true
// console.log(cat instanceof Animal) //true
</script>
</body>
</html>