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) {
|
2022-01-21 01:00:18 +05:30
|
|
|
|
this.name = name;
|
2020-08-04 15:15:28 +08:00
|
|
|
|
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);
|
|
|
|
|
```
|