| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | --- | 
					
						
							|  |  |  |  | id: 587d7dae367417b2b2512b7b | 
					
						
							| 
									
										
										
										
											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: 301326 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | dashedName: understand-own-properties | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | --- | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --description--
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 请看下面的实例,`Bird` 构造函数定义了两个属性:`name` 和 `numLegs`: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							|  |  |  |  | function Bird(name) { | 
					
						
							|  |  |  |  |   this.name  = name; | 
					
						
							|  |  |  |  |   this.numLegs = 2; | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | let duck = new Bird("Donald"); | 
					
						
							|  |  |  |  | let canary = new Bird("Tweety"); | 
					
						
							|  |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-04-06 00:04:04 +09:00
										 |  |  |  | `name` 和 `numLegs` 被叫做 <dfn>自身属性</dfn>,因为它们是直接在实例对象上定义的。 这就意味着 `duck` 和 `canary` 这两个对象分别拥有这些属性的独立副本。 事实上,`Bird` 的所有实例都将拥有这些属性的独立副本。 下面的代码将 `duck` 的所有自身属性都存到一个叫作 `ownProps` 的数组里面: | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							|  |  |  |  | let ownProps = []; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | for (let property in duck) { | 
					
						
							|  |  |  |  |   if(duck.hasOwnProperty(property)) { | 
					
						
							|  |  |  |  |     ownProps.push(property); | 
					
						
							|  |  |  |  |   } | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | console.log(ownProps); | 
					
						
							| 
									
										
										
										
											2020-08-04 15:15:28 +08:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 控制台将显示值 `["name", "numLegs"]`。 | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --instructions--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-04-06 00:04:04 +09:00
										 |  |  |  | 将 `canary` 的自身属性添加到 `ownProps` 数组里面。 | 
					
						
							| 
									
										
										
										
											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
										 |  |  |  | `ownProps` 应该包含 `numLegs` 和 `name` 两个属性的值。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | assert(ownProps.indexOf('name') !== -1 && ownProps.indexOf('numLegs') !== -1); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 在不使用内置方法 `Object.keys()` 的前提下完成这个挑战。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | assert(!/Object(\.keys|\[(['"`])keys\2\])/.test(code)); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  |  | 你应该解决这个挑战,而不是硬编码 `ownProps` 数组。 | 
					
						
							| 
									
										
										
										
											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( | 
					
						
							|  |  |  |  |   !/\[\s*(?:'|")(?:name|numLegs)|(?:push|concat)\(\s*(?:'|")(?:name|numLegs)/.test( | 
					
						
							|  |  |  |  |     code | 
					
						
							|  |  |  |  |   ) | 
					
						
							|  |  |  |  | ); | 
					
						
							| 
									
										
										
										
											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(name) { | 
					
						
							|  |  |  |  |   this.name = name; | 
					
						
							|  |  |  |  |   this.numLegs = 2; | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | let canary = new Bird("Tweety"); | 
					
						
							|  |  |  |  | let ownProps = []; | 
					
						
							|  |  |  |  | // Only change code below this line | 
					
						
							|  |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --solutions--
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | function Bird(name) { | 
					
						
							|  |  |  |  |   this.name = name; | 
					
						
							|  |  |  |  |   this.numLegs = 2; | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | let canary = new Bird("Tweety"); | 
					
						
							|  |  |  |  | function getOwnProps (obj) { | 
					
						
							|  |  |  |  |   const props = []; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |   for (let prop in obj) { | 
					
						
							|  |  |  |  |     if (obj.hasOwnProperty(prop)) { | 
					
						
							|  |  |  |  |       props.push(prop); | 
					
						
							|  |  |  |  |     } | 
					
						
							|  |  |  |  |   } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |   return props; | 
					
						
							|  |  |  |  | } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | const ownProps = getOwnProps(canary); | 
					
						
							|  |  |  |  | ``` |