-
Notifications
You must be signed in to change notification settings - Fork 0
/
ooBasic.html
138 lines (116 loc) · 3.69 KB
/
ooBasic.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>oo基础</title>
</head>
<body>
<script>
// 定义构造函数，玄机在函数里的this
var Human = function (name, age) {
this.name = name;
this.age = age;
};
var mxy = new Human('ma xin yu', 23);
console.log(mxy.name);
// 这种实现学名叫对象直接量，就是通过简写直接实现一个对象
// 没有构造函数，所以没法批量创建，上面的例子是js中标准的对象
// 实现方法
var cf = {
name: 'chenfan'
};
/**
* 以下是js的继承
*/
var Female = function (name, age) {};
/**
* 1.js的继承不同于其他语言，他是通过原型链的方式实现的，玄机就是prototype
* 2.从字面理解，prototype就是原型，它一定是个对象，一个新类的如果有原型，那么他将继承
* 原型的所有方法和成员，本利中也就继承了name和age.
* 3.在原型链上扩展了成员实现了继承
* 4.和作用域链类似，访问对象成员时，优先在自己身上找，找不到就找原型链上的，如果都没有就是undefined
*/
Female.prototype = new Human();
Female.prototype.gender = 'female';
mxy = new Female('maxinyu', 23);
console.log(mxy.gender);
/**
* 以下是推荐的继承方式。。。重点理解
*/
Female = function (name, age, gender) {
/**
* 以this为上下文，运行Human函数，
* Female自身也添加了this.name,this.age...
*/
Human.apply(this, arguments);
// 扩充了gender
this.gender = gender;
};
mxy = new Female('ma xin yu', 23, 'female');
console.log(mxy.name);
/**
* 来个多重继承的例子
*/
var Animal = function () {
// 动物有四只脚
this.feetCount = 4;
};
/**
* 创建怪兽类，继承自人和动物
*/
var Monster = function (name, age) {
// 继承自Human和Animal
Human.apply(this, arguments);
Animal.call(this);
};
/**
* cf完成了继承。。。是个怪兽，来自人和动物的合体
*/
cf = new Monster('chen fan', 28);
console.log(cf.feetCount);
var Cf = function () {
// 注意，实例化的时候，这些代码都会运行的~
console.log('cf');
console.log('mxy');
this.name = 'chen fan';
// 定义了一个方法，未来会被覆盖
this.getName = function () {
console.log(this.name);
};
};
/**
* 注意看下面的代码，getName方法被覆盖了，代码被解析的时候，首先找mxy实例有没有getName这个方法
* 找到了，就用它，没有就查原形(prototype),还没查到就找原形的原形，直到查到底层，这就是js给基于原型链
* 实现继承的真谛
*/
mxy = new Cf();
// 在mxy实例上找到了，覆盖了
mxy.getName = function () {
console.log('ma xin yu');
};
// 定义个动物类
Animal = function () {
// 动物可以繁殖
this.canBreed = true;
};
// 高级动物继承自普通动物
var SeniorAnimal = function () {
Animal.call(this);
// 高级动物能行走了
this.canWalk = true;
};
// 狗继承自高级动物
var Dog = function () {
SeniorAnimal.call(this);
// 狗能旺旺了
this.canBark = true;
};
// 实例化一只狗
var myPet = new Dog();
// 理解下链。。。逐级上溯查找
console.log(myPet.canBark);
console.log(myPet.canBreed);
console.log(myPet.canWalk);
</script>
</body>
</html>