aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html')
-rw-r--r--files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html309
1 files changed, 309 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html
new file mode 100644
index 0000000000..47f75f244a
--- /dev/null
+++ b/files/zh-cn/web/javascript/enumerability_and_ownership_of_properties/index.html
@@ -0,0 +1,309 @@
+---
+title: 属性的可枚举性和所有权
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+tags:
+ - JavaScript
+ - 对象
+ - 属性
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>可枚举属性是指那些内部 “可枚举” 标志设置为 <code>true</code> 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 <code>true</code>，对于通过 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> 等定义的属性，该标识值默认为 <code>false</code>。可枚举的属性可以通过 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 循环进行遍历（除非该属性名是一个 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>）。属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。一个对象的所有的属性可以一次性的获取到。有一些内置的方法可以用于判断、迭代/枚举以及获取对象的一个或一组属性，下表对这些方法进行了列举。对于部分不可用的类别，下方的示例代码对获取方法进行了演示。</p>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <caption>属性的可枚举性和所有权 - 内置的判断、访问和迭代方法</caption>
+ <tbody>
+ <tr>
+ <th style="width: 6%;">作用</th>
+ <th style="width: 50%;">自身对象</th>
+ <th style="width: 30%;">自身对象及其原型链</th>
+ <th style="width: 12%;">仅原型链</th>
+ </tr>
+ <tr>
+ <td>判断</td>
+ <td>
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">可枚举属性</th>
+ <th scope="col">不可枚举属性</th>
+ <th scope="col" style="width: 12em;">可枚举属性及不可枚举属性</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> 获取属性后使用 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code> 过滤可枚举属性</td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td>
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">可枚举属性</th>
+ <th scope="col">不可枚举属性</th>
+ <th scope="col">可枚举属性及不可枚举属性</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>需要额外代码实现</td>
+ <td>需要额外代码实现</td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td>需要额外代码实现</td>
+ </tr>
+ <tr>
+ <td>访问</td>
+ <td>
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">可枚举属性</th>
+ <th scope="col">不可枚举属性</th>
+ <th scope="col" style="width: 12em;">可枚举属性及不可枚举属性</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>、<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a> </code>获取属性后使用 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code> 过滤可枚举属性</td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td>需要额外代码实现</td>
+ <td>需要额外代码实现</td>
+ </tr>
+ <tr>
+ <td>迭代</td>
+ <td>
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">可枚举属性</th>
+ <th scope="col">不可枚举属性</th>
+ <th scope="col" style="width: 12em;">可枚举属性及不可枚举属性</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>、<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> 获取属性后使用 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code> 过滤可枚举属性</td>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code><br>
+ <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td>
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">可枚举属性</th>
+ <th scope="col">不可枚举属性</th>
+ <th scope="col">可枚举属性及不可枚举属性</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code><br>
+ （同时会排除 Symbol）</td>
+ <td>需要额外代码实现</td>
+ <td>需要额外代码实现</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td>需要额外代码实现</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="通过可枚举性和所有权获取对象的属性">通过可枚举性和所有权获取对象的属性</h2>
+
+<p>注：以下实现并非使用于所有情况的最优算法，但可以快捷的展示语言特性。</p>
+
+<ul>
+ <li>使用 <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) &gt; -1</code> 时将发生判断操作。</li>
+ <li>使用 <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> 时将发生迭代操作。 (或使用 <code>filter()</code>、<code>map()</code> 等方法)</li>
+</ul>
+
+<pre class="brush: js notranslate">var SimplePropertyRetriever = {
+ getOwnEnumerables: function(obj) {
+ return this._getPropertyNames(obj, true, false, this._enumerable);
+ // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
+ },
+ getOwnNonenumerables: function(obj) {
+ return this._getPropertyNames(obj, true, false, this._notEnumerable);
+ },
+ getOwnEnumerablesAndNonenumerables: function(obj) {
+ return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+ // Or just use: return Object.getOwnPropertyNames(obj);
+ },
+ getPrototypeEnumerables: function(obj) {
+ return this._getPropertyNames(obj, false, true, this._enumerable);
+ },
+ getPrototypeNonenumerables: function(obj) {
+ return this._getPropertyNames(obj, false, true, this._notEnumerable);
+ },
+ getPrototypeEnumerablesAndNonenumerables: function(obj) {
+ return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+ },
+ getOwnAndPrototypeEnumerables: function(obj) {
+ return this._getPropertyNames(obj, true, true, this._enumerable);
+ // Or could use unfiltered for..in
+ },
+ getOwnAndPrototypeNonenumerables: function(obj) {
+ return this._getPropertyNames(obj, true, true, this._notEnumerable);
+ },
+ getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+ return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+ },
+ // Private static property checker callbacks
+ _enumerable: function(obj, prop) {
+ return obj.propertyIsEnumerable(prop);
+ },
+ _notEnumerable: function(obj, prop) {
+ return !obj.propertyIsEnumerable(prop);
+ },
+ _enumerableAndNotEnumerable: function(obj, prop) {
+ return true;
+ },
+ // Inspired by http://stackoverflow.com/a/8024294/271577
+ _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+ var props = [];
+
+ do {
+ if (iterateSelfBool) {
+ Object.getOwnPropertyNames(obj).forEach(function(prop) {
+ if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+ props.push(prop);
+ }
+ });
+ }
+ if (!iteratePrototypeBool) {
+ break;
+ }
+ iterateSelfBool = true;
+ } while (obj = Object.getPrototypeOf(obj));
+
+ return props;
+ }
+};</pre>
+
+<h2 id="统计表">统计表</h2>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <thead>
+ <tr>
+ <th scope="row"></th>
+ <th scope="col"><code>in</code></th>
+ <th scope="col"><code>for..in</code></th>
+ <th scope="col"><code>obj.hasOwnProperty</code></th>
+ <th scope="col"><code>obj.propertyIsEnumerable</code></th>
+ <th scope="col"><code>Object.keys</code></th>
+ <th scope="col"><code>Object.getOwnPropertyNames</code></th>
+ <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th>
+ <th scope="col"><code>Reflect.ownKeys()</code></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">自身的可枚举属性</th>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <th scope="row">自身的不可枚举属性</th>
+ <td>true</td>
+ <td>false</td>
+ <td>true</td>
+ <td>false</td>
+ <td>false</td>
+ <td>true</td>
+ <td>true</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <th scope="row">自身的Symbol 键</th>
+ <td>true</td>
+ <td>false</td>
+ <td>true</td>
+ <td>true</td>
+ <td>false</td>
+ <td>false</td>
+ <td>true</td>
+ <td>true</td>
+ </tr>
+ <tr>
+ <th scope="row">继承的可枚举属性</th>
+ <td>true</td>
+ <td>true</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <th scope="row">继承的不可枚举属性</th>
+ <td>true</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ </tr>
+ <tr>
+ <th scope="row">继承的 Symbol 键</th>
+ <td>true</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ <td>false</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li>
+ <li><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li>
+ <li>{{jsxref("Object.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-12-28 06:21:15 +0000