| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | id: 587d7db1367417b2b2512b88 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | title: 重写继承的方法 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | challengeType: 1 | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | forumTopicId: 301322 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | dashedName: override-inherited-methods | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --description--
 | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 在上一个挑战中,我们学习了一个对象可以通过引用另一个对象的 `prototype` 来继承其属性和行为(或方法): | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | ChildObject.prototype = Object.create(ParentObject.prototype); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 然后,`ChildObject` 将自己的方法链接到它的 `prototype`中: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | ChildObject.prototype.methodName = function() {...}; | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 我们还可以重写继承的方法。 以同样的方式 - 通过使用一个与需要重写的方法相同的方法名,向`ChildObject.prototype` 中添加方法。 请看下面的举例:`Bird` 重写了从 `Animal` 继承来的 `eat()` 方法: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | function Animal() { } | 
					
						
							|  |  |  | Animal.prototype.eat = function() { | 
					
						
							|  |  |  |   return "nom nom nom"; | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | function Bird() { } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Bird.prototype = Object.create(Animal.prototype); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Bird.prototype.eat = function() { | 
					
						
							|  |  |  |   return "peck peck peck"; | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-06-21 19:13:43 +05:30
										 |  |  | 如果你有一个实例:`let duck = new Bird();`,然后你调用了 `duck.eat()`,以下就是 JavaScript 在 `duck` 的 `prototype` 链上寻找方法的过程: | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 1.  `duck` => `eat()` 是定义在这里吗? 不是。 | 
					
						
							|  |  |  | 2.  `Bird` => `eat()` 是定义在这里吗? => 是的。 执行它并停止往上搜索。 | 
					
						
							|  |  |  | 3.  `Animal` => 这里也定义了 `eat()` 方法,但是 JavaScript 在到达这层原型链之前已停止了搜索。 | 
					
						
							|  |  |  | 4.  Object => JavaScript 在到达这层原型链之前也已经停止了搜索。 | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --instructions--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 重写 `Penguin` 的 `fly()` 方法,使其返回字符串 `Alas, this is a flightless bird.` | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --hints--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | `penguin.fly()` 方法应该返回字符串 `Alas, this is a flightless bird.` | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | assert(penguin.fly() === 'Alas, this is a flightless bird.'); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | The `bird.fly()`方法应该返回字符串 `I am flying!` | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | assert(new Bird().fly() === 'I am flying!'); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | # --seed--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## --seed-contents--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | function Bird() { } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Bird.prototype.fly = function() { return "I am flying!"; }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | function Penguin() { } | 
					
						
							|  |  |  | Penguin.prototype = Object.create(Bird.prototype); | 
					
						
							|  |  |  | Penguin.prototype.constructor = Penguin; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | // Only change code below this line | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | // Only change code above this line | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | let penguin = new Penguin(); | 
					
						
							|  |  |  | console.log(penguin.fly()); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --solutions--
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | ```js | 
					
						
							|  |  |  | function Bird() { } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Bird.prototype.fly = function() { return "I am flying!"; }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | function Penguin() { } | 
					
						
							|  |  |  | Penguin.prototype = Object.create(Bird.prototype); | 
					
						
							|  |  |  | Penguin.prototype.constructor = Penguin; | 
					
						
							|  |  |  | Penguin.prototype.fly = () => 'Alas, this is a flightless bird.'; | 
					
						
							|  |  |  | let penguin = new Penguin(); | 
					
						
							|  |  |  | console.log(penguin.fly()); | 
					
						
							|  |  |  | ``` |