|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html> |
| 3 | + |
3 | 4 | <head> |
4 | 5 | <meta charset="utf-8"> |
5 | 6 | <title>面向对象</title> |
6 | 7 | </head> |
| 8 | + |
7 | 9 | <body> |
8 | 10 | <script type="text/javascript"> |
9 | | - //类的声明 |
10 | | - function Animal() { |
11 | | - this.name = 'name'; |
12 | | - } |
13 | | - //ES6中class的声明 |
14 | | - class Animal2 { |
15 | | - constructor() {//构造函数 |
| 11 | + //类的声明 |
| 12 | + function Animal() { |
16 | 13 | this.name = 'name'; |
17 | 14 | } |
18 | | - } |
19 | | - //通过类实例化生成对象 |
20 | | - console.log(new Animal(),new Animal2()); |
21 | | - //借助构造函数实现继承 |
22 | | - function Parent1() { |
23 | | - this.name = 'parent1'; |
24 | | - } |
25 | | - //Parent1 |
26 | | - function Child1() { |
27 | | - Parent1.call(this);//apply |
28 | | - this.type = 'child1'; |
29 | | - } |
30 | | - |
31 | | - console.log(new Child1); |
32 | | - //借助原型链继承方式 |
33 | | - function Parent2() { |
34 | | - this.name = 'parent2'; |
35 | | - this.play = [1,2,3]; |
36 | | - } |
37 | | - function Child2() { |
38 | | - this.type = 'child2' |
39 | | - } |
40 | | - |
41 | | - Child2.prototype = new Parent2();//理解为prototype属性指向Parent2 |
42 | | - |
43 | | - console.log(new Child2()); |
44 | | - |
45 | | - var s1 = new Child2(); |
46 | | - var s2 = new Child2(); |
47 | | - console.log(s1.play,s2.play); |
48 | | - s1.play.push(4); |
49 | | - |
50 | | - //组合方式 |
51 | | - function Parent3() { |
52 | | - this.name = 'Parent3'; |
53 | | - this.play = [1,2,3]; |
54 | | - } |
55 | | - function Child3() { |
56 | | - Parent3.call(this); |
57 | | - this.type = 'Child3'; |
58 | | - } |
59 | | - |
60 | | - //子类化原型链 执行了两次实例化 |
61 | | - Child3.prototype = new Parent3(); |
62 | | - var s3 = new Child3(); |
63 | | - var s4 = new Child3(); |
64 | | - s3.play.push(5); |
65 | | - console.log(s3.play,s4.play); |
66 | | - //面向对象通用继承 |
67 | | - |
68 | | - //组合继承的优化1 |
69 | | - function Parent4() { |
70 | | - this.name = 'Parent4'; |
71 | | - this.play = [1,2,3]; |
72 | | - } |
73 | | - function Child4() { |
74 | | - Parent4.call(this); |
75 | | - this.type = 'Child4'; |
76 | | - } |
77 | | - Child4.prototype = Parent4.prototype; |
78 | | - var s5 = new Child4(); |
79 | | - var s6 = new Child4(); |
80 | | - console.log(s5,s6); |
81 | | - |
82 | | - console.log(s5 instanceof Child4, s5 instanceof Parent4);//true |
83 | | - console.log(s5.__proto__===Child4.prototype , s5.__proto__===Parent4.prototype);//true |
84 | | - console.log(s5.constructor); |
85 | | - |
86 | | - //组合继承的优化2 |
87 | | - function Parent5() { |
88 | | - this.name = 'Parent5'; |
89 | | - this.play = [1,2,3]; |
90 | | - } |
91 | | - function Child5() { |
92 | | - Parent4.call(this); |
93 | | - this.type = 'Child5'; |
94 | | - } |
95 | | - Child5.prototype = Object.create(Parent5.prototype); |
| 15 | + //ES6中class的声明 |
| 16 | + class Animal2 { |
| 17 | + constructor() { //构造函数 |
| 18 | + this.name = 'name'; |
| 19 | + } |
| 20 | + } |
| 21 | + //通过类实例化生成对象 |
| 22 | + console.log(new Animal(), new Animal2()); |
| 23 | + //借助构造函数实现继承 |
| 24 | + function Parent1() { |
| 25 | + this.name = 'parent1'; |
| 26 | + } |
| 27 | + //Parent1 |
| 28 | + function Child1() { |
| 29 | + Parent1.call(this); //apply |
| 30 | + this.type = 'child1'; |
| 31 | + } |
| 32 | + |
| 33 | + console.log(new Child1); |
| 34 | + //借助原型链继承方式 |
| 35 | + function Parent2() { |
| 36 | + this.name = 'parent2'; |
| 37 | + this.play = [1, 2, 3]; |
| 38 | + } |
| 39 | + |
| 40 | + function Child2() { |
| 41 | + this.type = 'child2' |
| 42 | + } |
| 43 | + |
| 44 | + Child2.prototype = new Parent2(); //理解为prototype属性指向Parent2 |
| 45 | + |
| 46 | + console.log(new Child2()); |
| 47 | + |
| 48 | + var s1 = new Child2(); |
| 49 | + var s2 = new Child2(); |
| 50 | + console.log(s1.play, s2.play); |
| 51 | + s1.play.push(4); |
| 52 | + |
| 53 | + //组合方式 |
| 54 | + function Parent3() { |
| 55 | + this.name = 'Parent3'; |
| 56 | + this.play = [1, 2, 3]; |
| 57 | + } |
| 58 | + |
| 59 | + function Child3() { |
| 60 | + Parent3.call(this); |
| 61 | + this.type = 'Child3'; |
| 62 | + } |
| 63 | + |
| 64 | + //子类化原型链 执行了两次实例化 |
| 65 | + Child3.prototype = new Parent3(); |
| 66 | + var s3 = new Child3(); |
| 67 | + var s4 = new Child3(); |
| 68 | + s3.play.push(5); |
| 69 | + console.log(s3.play, s4.play); |
| 70 | + //面向对象通用继承 |
| 71 | + |
| 72 | + //组合继承的优化1 |
| 73 | + function Parent4() { |
| 74 | + this.name = 'Parent4'; |
| 75 | + this.play = [1, 2, 3]; |
| 76 | + } |
| 77 | + |
| 78 | + function Child4() { |
| 79 | + Parent4.call(this); |
| 80 | + this.type = 'Child4'; |
| 81 | + } |
| 82 | + Child4.prototype = Parent4.prototype; |
| 83 | + var s5 = new Child4(); |
| 84 | + var s6 = new Child4(); |
| 85 | + console.log(s5, s6); |
| 86 | + |
| 87 | + console.log(s5 instanceof Child4, s5 instanceof Parent4); //true |
| 88 | + console.log(s5.__proto__ === Child4.prototype, s5.__proto__ === Parent4.prototype); //true |
| 89 | + console.log(s5.constructor); |
| 90 | + |
| 91 | + //组合继承的优化2 |
| 92 | + function Parent5() { |
| 93 | + this.name = 'Parent5'; |
| 94 | + this.play = [1, 2, 3]; |
| 95 | + } |
| 96 | + |
| 97 | + function Child5() { |
| 98 | + Parent5.call(this); |
| 99 | + this.type = 'Child5'; |
| 100 | + } |
| 101 | + Child5.prototype = Object.create(Parent5.prototype); |
| 102 | + Child5.constructor = Child5; |
| 103 | + console.log(new Child5, new Parent5); |
96 | 104 | </script> |
97 | 105 | </body> |
| 106 | + |
98 | 107 | </html> |
0 commit comments