【转】JavaScript 深入了解对象中的属性

深碍√TFBOYSˉ_ 2021-12-11 21:17 277阅读 0赞

[点击去原文][Link 1]

本篇主要介绍JS中对象的属性，包括：属性的分类、访问方式、检测属性、遍历属性以及属性特性等内容。

# 目录 #

1. 介绍：描述属性的命名方式、查找路径以及分类

2. 属性的访问方式：介绍'.'访问方式、'\[ \]'中括号访问方式

3. 删除属性：通过delete关键字删除对象的某个属性

4. 检测属性：介绍三种判断某个属性是否为对象的实例属性：in、obj.hasOwnProperty、obj.propertyIsEnumerable

5. 遍历属性：介绍三种遍历对象的属性：for / in 语句块、Object.keys(obj) 、Object.getOwnPropertyNames(obj)

6. 属性特性：在Escript5中，增加了属性特性这一内容，可设置属性是否可枚举、可修改等特性

# 1. 介绍 #

## 1.1 描述 ##

属性，特指对象的成员，不单单为'属性'(字段)，也包含了方法。

## 1.2 命名方式 ##

属性名称可以包含英文字符、数字(不能开头)、特殊符号(如：-、\_、$等等)。

但一般使用纯英文字符，在特殊情况下会添加-(横杠：-webkit-、-moz- )以及 \_(下划线)。

若属性名称包含了-(横杠)，属性访问方式只能采用'\[ \]'中括号访问：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>o = { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>x: 1,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>y: 2,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>'-x'</code> 
      <code>: 3,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>'-showX'</code> 
      <code>: </code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>this</code> 
      <code>.x);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>// o.-x; // 此访问方式会报异常</code> 
     </div> 
     <div> 
      <code>console.log(o[</code> 
      <code>'-x'</code> 
      <code>]); </code> 
      <code>// =&gt; 3 ：读取带-(横杠)名称的属性，只能采用'[ ]'中括号访问方式</code> 
     </div> 
     <div> 
      <code>o[</code> 
      <code>'-showX'</code> 
      <code>](); </code> 
      <code>// =&gt; 弹出1 ：若方法名称带-(横杠)，执行方式很别扭</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 1.3 属性的查找路径 ##

假设读取某个对象的属性x，首先会在此对象的实例属性中查找。若没有找到，将会在此对象的原型对象中查找属性x。若原型对象也没有属性x，将继续查找这个原型对象的原型(假设原型对象含有原型)，一直到找到属性x或者无原型为止。

## 1.4 属性的分类 ##

对象中的属性，根据是否自身的可分为自有属性和继承属性。

① 自有属性：也可叫实例属性；指对象自身的属性。

② 继承属性：也可叫原型属性；指对象从原型中继承的属性。

# 2. 属性的访问方式 #

可分为 ' . '点访问方式和' \[ \] '中括号方法方式 。

**说明：**若读取一个不存在的属性，将返回undefined。若设置一个对象不存在的属性，将会向对象添加此属性。

## 2.1 ' . '点访问方式  ##

**语法：**obj.propertyName

**说明：**属性名称必须为一个标示符(静态字符串)，不能为变量。

**示例：**

## 2.2 ' \[ \] '中括号访问方式 ##

**语法：**obj\[propertyName\]

**说明：**属性名称可以为一个静态字符串，也可以为一个变量。若为变量，访问的属性为变量表示的值。

**特点：**与'.'访问方式不同，'\[ \]'中括号访问方式灵活性很大：可动态访问(变量指定属性名)、可访问包含某些特殊字符的属性(如：属性名称带'-')

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>o = { x: 1, y: 2 };</code> 
     </div> 
     <div> 
      <code>console.log(o[</code> 
      <code>'x'</code> 
      <code>]); </code> 
      <code>// =&gt; 1 ：访问x属性</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>a = </code> 
      <code>'y'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>console.log(o[a]); </code> 
      <code>// =&gt; 2 ：访问的是y属性(变量a的值)</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

# 3. delete 删除属性 #

**语法：**delete obj.propertyName 或者 delete obj\[propertyName\]

**说明：**delete只能删除对象的自有属性，不能删除继承属性。

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>o = {};</code> 
     </div> 
     <div> 
      <code>o.x = </code> 
      <code>'1'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>console.log(o.x); </code> 
      <code>// =&gt; 1</code> 
     </div> 
     <div> 
      <code>delete</code> 
      <code>o.x;</code> 
     </div> 
     <div> 
      <code>console.log(o.x); </code> 
      <code>// =&gt; undefined ：访问不存在的属性，返回undefined</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>o.constructor.prototype.y = </code> 
      <code>'2'</code> 
      <code>; </code> 
      <code>// 在原型对象上添加一个y属性</code> 
     </div> 
     <div> 
      <code>console.log(o.y); </code> 
      <code>// =&gt; 2</code> 
     </div> 
     <div> 
      <code>delete</code> 
      <code>o.y; </code> 
      <code>// 删除继承属性y</code> 
     </div> 
     <div> 
      <code>console.log(o.y); </code> 
      <code>// =&gt; 2 ：还是可以访问继承属性y</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

# 4. 检测属性 #

检测对象是否包含某个属性。

## 4.1 in 运算符 ##

**说明：**判断对象是否包含某个属性，会从对象的实例属性、继承属性里进行检测。

**语法：**propertyName in obj

**返回值：**

\{bool\} 判断对象的实例属性或继承是否包含此属性。

true：对象的实例属性或继承属性包含此属性；

false：对象的实例属性或继承属性不包含此属性。

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>People(name) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.name = name;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>function</code> 
      <code>Student(age) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.age = age;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>Student.prototype = </code> 
      <code>new</code> 
      <code>People(); </code> 
      <code>// 设置Student的原型为People对象</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>var</code> 
      <code>s = </code> 
      <code>new</code> 
      <code>Student(22);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'age'</code> 
      <code>in</code> 
      <code>s); </code> 
      <code>// =&gt; true ：age为实例属性</code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'name'</code> 
      <code>in</code> 
      <code>s); </code> 
      <code>// =&gt; true ：name为继承属性</code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'address'</code> 
      <code>in</code> 
      <code>s); </code> 
      <code>// =&gt; false ：address不存在此对象呢，返回false</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 4.2 obj.hasOwnProperty(propertyName)  ##

**说明：**判断对象是否拥有一个指定名称的实例属性，不会检查继承属性。

**参数：**

①propertyName \{string\} ：属性名称。

**语法：**obj.hasOwnProperty(propertyName)

**返回值：**

\{bool\} 判断对象是否拥有一个指定名称的实例属性；此方法不会检查对象原型链中的属性。

true ：属性为对象的实例属性，非继承。

false ：属性不为对象的实例属性。

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>Student = </code> 
      <code>function</code> 
      <code>(name) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.name = name;</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
     <div> 
      <code>// 给Student的原型添加一个sayHello方法</code> 
     </div> 
     <div> 
      <code>Student.prototype.sayHello = </code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>'Hello,'</code> 
      <code>+ </code> 
      <code>this</code> 
      <code>.name);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>// 给Student的原型添加一个age属性</code> 
     </div> 
     <div> 
      <code>Student.prototype.age = </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>var</code> 
      <code>st = </code> 
      <code>new</code> 
      <code>Student(</code> 
      <code>'张三'</code> 
      <code>); </code> 
      <code>// 初始化对象st</code> 
     </div> 
     <div> 
      <code>console.log(st.hasOwnProperty(</code> 
      <code>'name'</code> 
      <code>)); </code> 
      <code>// =&gt; true ：调用构造函数时，通过this.name附加到实例对象上</code> 
     </div> 
     <div> 
      <code>console.log(st.hasOwnProperty(</code> 
      <code>'sayHello'</code> 
      <code>)); </code> 
      <code>// =&gt; false ：sayHello方法为原型上的成员</code> 
     </div> 
     <div> 
      <code>console.log(st.hasOwnProperty(</code> 
      <code>'age'</code> 
      <code>)); </code> 
      <code>// =&gt; false ：age属性为原型上的成员</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 4.3 obj.propertyIsEnumerable(propertyName) ##

**说明：**判断指定名称的属性是否为实例属性并且是可枚举的(可用for/in循环枚举)

**参数：**

①propertyName \{string\} ：属性名称。

**语法：**obj.propertyIsEnumerable(propertyName)

**返回值：**

\{bool\} 判断属性是否为实例属性并且是可枚举的(可用for/in循环枚举)，不考虑原型链中的成员。

true ：属性为对象的实例属性并且是可枚举的。

false ：属性不为对象的实例属性或不可枚举的。

**示例：**

## 4.4 总结 ##

<table> 
 <tbody> 
  <tr> 
   <td><strong>检测方式</strong></td> 
   <td><strong>语法</strong></td> 
   <td><strong>检测属性的范围 &nbsp;</strong></td> 
   <td><strong>返回值</strong></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">in</a> 运算符</td> 
   <td>propertyName in obj</td> 
   <td>实例属性、继承属性</td> 
   <td>{bool} true：符合条件；fasle：不符合</td> 
  </tr> 
  <tr> 
   <td>obj.<a rel="nofollow">hasOwnProperty</a>(propertyName)&nbsp;</td> 
   <td>obj.<a rel="nofollow">hasOwnProperty</a>(propertyName)&nbsp;</td> 
   <td>实例属性</td> 
   <td>{bool}&nbsp;true：符合条件；fasle：不符合</td> 
  </tr> 
  <tr> 
   <td>obj.<a rel="nofollow">propertyIsEnumerable</a>(propertyName)</td> 
   <td>obj.<a rel="nofollow">propertyIsEnumerable</a>(propertyName)</td> 
   <td>可枚举的实例属性</td> 
   <td>{bool}&nbsp;true：符合条件；fasle：不符合</td> 
  </tr> 
 </tbody> 
</table>

# 5. 遍历属性 #

即遍历对象的实例属性、继承属性。

## 5.1 for / in 语句块 ##

**说明：**遍历对象可枚举的实例属性和继承属性

**语法：**

for (p in obj) \{  
　　// p表示遍历的属性名称  
\}

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>po = { px: 1, py: 2 };</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>o = { x: 1, y: 2 };</code> 
     </div> 
     <div> 
      <code>o.__proto__ = po; </code> 
      <code>// 设置o的原型为po</code> 
     </div> 
     <div> 
      <code>for</code> 
      <code>(property </code> 
      <code>in</code> 
      <code>o) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(property); </code> 
      <code>// =&gt; 输出属性的名称：x、y、px、py</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(o[property]); </code> 
      <code>// =&gt; 采用中括号访问方式，输出属性的值</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 5.2 Object.keys(obj)  ##

**说明：**返回一个数组，包含对象可枚举的实例属性名称

**参数：**

①obj \{object\} ：实例对象

**返回值：**

\{Array\} 返回一个数组，包含对象可枚举的实例属性名称

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>po = { px: 1, py: 2 };</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>o = { x: 1, y: 2 };</code> 
     </div> 
     <div> 
      <code>o.__proto__ = po; </code> 
      <code>// 设置o的原型为po</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>propertyArray = Object.keys(o); </code> 
      <code>// =&gt; 返回一个包含了可枚举的实例属性名称的数组</code> 
     </div> 
     <div> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>i = 0, len = propertyArray.length; i &lt; len; i++) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(propertyArray[i]); </code> 
      <code>// =&gt; 输出实例属性名称：x、y</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 5.3 Object.getOwnPropertyNames(obj)  ##

**说明：返回一个数组，包含对象的所有实例属性名称。包括可枚举和不可枚举的**

**参数：**

①obj \{object\} ：实例对象

**返回值：**

\{Array\} 返回一个数组，包含对象所有实例属性名称

与Object.keys()的差别：Object.keys()只返回可枚举的实例属性，Object.getOwnPropertyNames()返回所有实例属性

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>po = { px: 1, py: 2 };</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>o = { x: 1, y: 2 };</code> 
     </div> 
     <div> 
      <code>// 设置对象o的属性特性：属性x为可枚举，属性y为不可枚举</code> 
     </div> 
     <div> 
      <code>Object.defineProperties(o, { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>x: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>enumerable: </code> 
      <code>true</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>y: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>enumerable: </code> 
      <code>false</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>o.__proto__ = po; </code> 
      <code>// 设置o的原型为po</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// 1.Object.keys()：获取一个可枚举的实例属性名称的数组</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>propertyArray = Object.keys(o);</code> 
     </div> 
     <div> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>i = 0, len = propertyArray.length; i &lt; len; i++) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(propertyArray[i]); </code> 
      <code>// =&gt; 输出实例属性名称：x </code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// 2.Object.getOwnPropertyNames()：获取一个包含的实例属性名称的数组，不管实例属性是否可枚举</code> 
     </div> 
     <div> 
      <code>propertyArray = Object.getOwnPropertyNames(o);</code> 
     </div> 
     <div> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>i = 0, len = propertyArray.length; i &lt; len; i++) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(propertyArray[i]); </code> 
      <code>// =&gt; 输出实例属性名称：x、y</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 5.4 总结 ##

<table> 
 <tbody> 
  <tr> 
   <td><strong>检测方式</strong></td> 
   <td><strong>语法</strong></td> 
   <td><strong>遍历属性的范围 &nbsp;</strong></td> 
   <td><strong>返回值</strong></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">for</a> / <a rel="nofollow">in</a> 语句块</td> 
   <td>for (p in obj) { <br>　　// p表示遍历的属性名称<br>} </td> 
  </tr> 
 </tbody> 
</table>

可枚举的实例属性和继承属性 \{String\} 属性的名称 Object. keys(obj) Object. keys(obj) 可枚举的实例属性 \{Array\} 返回一个数组，包含对象可枚举的实例属性名称 Object. getOwnPropertyNames(obj) Object. getOwnPropertyNames(obj) 包含对象的所有实例属性名称。包括可枚举和不可枚举的 \{Array\} 返回一个数组，包含对象所有实例属性名称

# 6.属性描述符 #

分为数据属性和访问器属性；

两者可相互转换，若转换后未设置enumerable和configurable特性(两类属性描述符都包含这2个特性)，将默认采用转换前的值。

## 6.1 数据属性 ##

**说明：**包含属性的操作特性；如：设置值、是否可枚举等等

value 设置属性的值 undefined writable 是否可修改属性的值；true：可修改属性的值；false：不可修改属性的值 false　　 enumerable 是否可枚举属性；true：可枚举，可通过for/in语句枚举属性；false：不可枚举 false configurable 是否可修改属性的特性；true：可修改属性的特性(如把writable从false改为true)；false：不可修改属性的特性 false

**默认值：**

1)在使用Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加数据属性，writable、enumerable和configurable默认值为false。

2)使用对象直接量创建的属性，writable、enumerable和configurable特性默认为true。

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>// 1)对象直接量；属性特性默认为true</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>o1 = { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>name: </code> 
      <code>'tom'</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
     <div> 
      <code>console.log(Object.getOwnPropertyDescriptor(o1, </code> 
      <code>'name'</code> 
      <code>)); </code> 
      <code>// =&gt; Object {value: "tom", writable: true, enumerable: true, configurable: true}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// 2)通过Object.create创建，属性特性默认为false</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>o2 = Object.create(</code> 
      <code>null</code> 
      <code>, { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>name: {value:</code> 
      <code>'tom'</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>console.log(Object.getOwnPropertyDescriptor(o2, </code> 
      <code>'name'</code> 
      <code>)); </code> 
      <code>// =&gt; Object {value: "tom", writable: false, enumerable: false, configurable: false}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

## 6.2 访问器属性 ##

**说明：**设置属性的访问方式；set、get特性等

<table> 
 <tbody> 
  <tr> 
   <td><strong>特性名称</strong></td> 
   <td><strong>描述</strong></td> 
   <td><strong>默认值</strong></td> 
  </tr> 
  <tr> 
   <td>get</td> 
   <td>属性的返回值函数</td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>set</td> 
   <td>属性的设置值函数；含有一个赋值参数</td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>enumerable</td> 
   <td>是否可枚举属性；true：可枚举，可通过for/in语句枚举属性；false：不可枚举</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>configurable</td> 
   <td>是否可修改属性的特性；true：可修改属性的特性(如把writable从false改为true)；false：不可修改属性的特性</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

**示例：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>obj = {};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// 添加一个属性，并设置为访问器属性</code> 
     </div> 
     <div> 
      <code>Object.defineProperty(obj, </code> 
      <code>"name"</code> 
      <code>, { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>get: </code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>._name; </code> 
      <code>// get和set里的变量不要使用属性，如：属性为name，get和set用的是_name</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>set: </code> 
      <code>function</code> 
      <code>(x) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(isNaN(x)) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>._name = x;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>._name = </code> 
      <code>'name不能为纯数字'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>enumerable: </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>configurable: </code> 
      <code>true</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>console.log(Object.getOwnPropertyDescriptor(obj, </code> 
      <code>'name'</code> 
      <code>)); </code> 
      <code>// =&gt; Object {get: function, set: function, enumerable: true, configurable: true} </code> 
     </div> 
     <div> 
      <code>obj.name = </code> 
      <code>'12'</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>console.log(obj.name); </code> 
      <code>// =&gt; name不能为纯数字</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

End

[ Web开发之路系列文章 ][Web_]

菜单加载中...

[Link 1]: https://www.cnblogs.com/polk6/p/4562281.html
[Web_]: http://www.cnblogs.com/polk6/archive/2013/05/10/3071327.html