JavaScript笔记--数据属性和访问器属性

最新推荐文章于 2023-05-10 22:46:16 发布
最新推荐文章于 2023-05-10 22:46:16 发布
阅读量2.3k 收藏
点赞数

在JavaScript中最基本的创建一个对象的方法是new一个Object()的实例，然后再为其添加属性与方法，下例创建一个包含属性name的person对象，name属性的特征值为”xiaochang”：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> person = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Object</span>();
person.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"xiaochang"</span>;
person.say = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
    console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Hi, my name is "</span> + <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name);
};
person.say();   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//Hi, my name is xiaochang</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

EAMAScript 5 定义了描述这些属性特征的各类特性，包括数据属性和访问器属性。 
数据属性：该属性包含了一个数据值的位置，它包含了4个描述行为的特性： 
1. [[Configurable]]：表示是否能通过delete删除属性从而重新定义属性，能否修改属性的特性，能否把属性修改为访问器属性。 
2. [[Enumerable]]：表示能否用for-in循环返回。 
3. [[writable]]：表示能否修改属性的值。 
4. [[Value]]：包含这个属性的数据值。读取属性值的时候从这个位置读，写入属性值的时候更新到这个位置，默认值为undefined。

直接在对象上定义的属性的数据特性默认如下： 
1. [[Configurable]]：true 
2. [[Enumerable]]：true 
3. [[writable]]：true 
4. [[Value]]：”xiaochang” (初始时的赋值)

这些特性不能直接被访问，要修改属性的特性只能通过Object.defineProperty( )方法，该方法包含三个参数：属性所在的对象，属性的名字，描述符对象[configurable|enumerable|writable|value]。例如：

<code class="hljs cpp has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">var person = {
    age:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span> 
};

Object.defineProperty(person,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"name"</span>,{
    configurable:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>,
    writable:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>,
    value:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"xiaochang"</span>
});

Object.defineProperty(person,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tall"</span>,{
    value:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>
});

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(attr in person){
        console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(attr); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//name,age</span>
}
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.name);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//xiaochang</span>
person.name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"CC"</span>;           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//为name属性指定新值</span>
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.name);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//xiaochang</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> person.name;         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//删除name属性</span>
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.name);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//xiaochang</span>

console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.age);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//100</span>
person.age=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>;             <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//为age属性指定新值</span>
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.age);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//200</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> person.age;          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//删除age属性</span>
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.age);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//undefined</span>

console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.tall);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//160</span>
person.tall = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>;          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//修改tall属性的值</span>
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.tall);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//160</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> person.tall;         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//删除name属性</span>
console.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(person.tall);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//160</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li></ul>

分析例子可知直接在对象上定义的属性，如age，[[Configurable]]，[[Enumerable]]，[[writable]]都被设置为true。 
属性name的[[Configurable]]，[[writable]]被设置为false，所以无法修改和删除。 
调用Object.defineProperty( )方法时，如果不显示指定configurable，enumerable，writable的值，就默认为false，如属性tall。 
另外需要注意的是当configurable设置为false后无法再将其改为true，且除了writable之外，无法修改其它特性。在configurable为true的情况下可多次调用Object.defineProperty( )修改同一属性。 
在非严格情况下修改无法配置的属性操作会被忽略，在严格模式下会抛出错误。

访问器属性：包含getter和setter函数。读取访问器属性时，调用getter函数，返回有效的值；在写入访问器属性时，调用setter函数传入新值。它包含了4个特性： 
1. [[Configurable]]：表示是否能通过delete删除属性从而重新定义属性，能否修改属性的特性，能否把属性修改为访问器属性。 
2. [[Enumerable]]：表示能否用for-in循环返回。 
3. [[Get]]：读取属性时调用的函数，默认undefined。 
4. [[Set]]：写入属性时调用的函数，默认undefined。

getter和setter不一定要成对出现，只有getter函数证明该属性只读不可写，尝试写入在非严格模式下会被忽略，严格模式会抛出错误。相同，只有setter函数证明只写不能读，尝试读在非严格模式下返回undefined，严格模式则抛出错误。

访问器属性无法直接定义，必须使用Object.defineProperty( )来定义，如下：

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> person = {
    _name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"xiaochang"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//name属性只读不可写</span>
    _age:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>,          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//age属性只写不可读</span>
    _tel:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123456</span>      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//tel属性可读可写</span>
};
Object.defineProperty(person,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"name"</span>,{
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._name;
    }
});
Object.defineProperty(person,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"age"</span>,{
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newage)</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._age = newage;
    }
});
Object.defineProperty(person,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tel"</span>,{
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel;
    },
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newtel)</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel= newtel;
    }
});
console.log(person.name);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//"xiaochang"</span>
person.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"CC"</span>;         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//尝试修改name属性</span>
console.log(person.name);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//"xiaochang"</span>
console.log(person.age);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//不可读属性，undefined</span>
person.age = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>;           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//修改age</span>
console.log(person._age);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//直接读取对象方法才能访问的属性，可以看到值已更新200</span>
console.log(person.tel);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//123456</span>
person.age = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">654321</span>;        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//更新tel</span>
console.log(person.tel);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//654321</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li></ul>

属性前面的下划线表示只能通过对象方法访问的属性，当我们调用person.name时实际调用了name属性的getter函数（直接调用person._name可得到相同的结果，这样做访问器就没什么意义了）。通过上面例子中可以很清晰的看出属性与访问器之间的关系。

支持Object.defineProperty( )方法的浏览器有IE9+（IE8是第一实现Object.defineProperty( )方法的浏览器，但仅限于DOM对象，且只能创建访问器属性）、Firefox4+、Safari5+，Opera12+、Chrome。在不支持Object.defineProperty( )方法的浏览器中不能修改[[Configurable]]，[[Enumerable]]。

在Object.defineProperty( )方法之前，要创建访问器属性，一般使用非标准的方法：__defineGetter__() 和__defineSetter__()，这两个方法最初在Firefox引入，后来chrome1和Opera9.5也支持。改写上面的tel属性访问器如下：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">person.__defineGetter__(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tel"</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel;
});
person.__defineSetter__(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tel"</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newtel)</span>{</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel = newtel;
});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

ECMAScript 5还定义Object.defineProperties( ）方法，该方法包含两个参数：属性所在的对象，多个属性的名字和其描述符对象组成的对象。其作用于Object.defineProperty( )相同，区别是可一次性定于多个属性。支持该方法的浏览器有IE9+、Firefox4+、Safari5+，Opera12+、Chrome。上面的例子可以改写如下：

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> person = {
    _name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"xiaochang"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//name属性只读不可写</span>
    _age:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>,          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//age属性只写不可读</span>
    _tel:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123456</span>      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//tel属性可读可写</span>
};
Object.defineProperties(person,{
    name:{
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._name;
        }
    },
    age:{
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newage)</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._age = newage;
        }
    },
    tel:{
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel;
        },
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newtel)</span>{</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel= newtel;
        }
    }
});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul>

对于上述讲到的属性特性，ECMAScript 5 给出了可以取得给定属性的描述符的方法Object.getOwnPropertyDescriptor()，该方法包含两个参数：属性所在的对象，要读取其描述符的属性名称。方法返回一个对象。如针对上面的例子可得：

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> descriptor = Object.getOwnPropertyDescriptor(person,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tel"</span>);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(attr <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> descriptor ){
    console.log(attr+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">":"</span>+descriptor[attr]);
}

运行结果如下：
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel;}
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(newtel)</span>{</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._tel= newtel;}
enumerable:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>
configurable:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span></code>
love__linux
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript笔记之数据属性和存储器属性
11-23
接下来是存储器属性，也称为访问器属性。它们没有`value`和`writable`属性，而是用`get`和`set`来定义。`get`是一个无参数的函数，用于获取属性值；`set`是一个接受一个参数的函数，用于设置属性值。存储器属性允许...
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
JS_高程6.面向对象的程序设计（1）理解对象
weixin_34194359的博客
08-16 64
js的数据属性：P139(1)[[Configurable]](2)[[Enumerable]](3)[[Writable]](4)[[Value]] 使用Object.definerPropert()方法修改属性的默认值，接收的参数：(1)属性所在的对象(2)属性的名字(3)一个描述符对象(Configurable,Enumerable,Writable,Value) 1 //...
小白JavaScript学习笔记----web APIs
weixin_51877011的博客
04-24 2069
DOM文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能**DOM作用:**开发网页内容特效和实现用户交互Web API阶段我们学习那两部分？DOMBOMDOM 是什么？有什么作用？DOM 是文档对象模型操作网页内容，可以开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected。
最全pink老师JavaScript笔记-JavaScript 基础部分（同步PPT）
qq_45432867的博客
08-01 8003
浏览器分成两部分：渲染引擎和js引擎浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行执行ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。...
JavaScript学习笔记--【黑马程序员】
m0_63077733的博客
01-10 4212
学习JavaScript的记录，其中包括了对《JavaScript高级程序设计》的笔记
JavaScript学习笔记--JS高级（尚硅谷）
wykkk1的博客
01-31 1132
一、基础总结深入 1.1 数据类型 1.基本（值）类型 String：任意字符串 Number：任意的数字 boolean：true/false undefined：undefined null:null 2.对象（引用）类型 Object:任意对象 Function：一种特别的对象（可以执行） Array：一种特别的对象（数值下标属性，内部数据是有序的） 3.判断数据类型方式 typeof ：返回数据类型的字符串表达 ...
JavaScript - 基础+WebAPI（笔记）
qq_48937489的博客
05-10 4206
输入输出语法、数据类型、运算符、流程控制（分支语句、循环语句）、数组、对象、函数、DOM、事件监听、常用事件、事件对象、事件流、事件委托、日期对象、节点操作、window对象、正则表达式、本地存储
五、JavaScript对象 - JavaScript+jQuery 笔记
熊先森的博客
10-28 755
在Javascript中，对象是非常重要的知识点，可以看作是无序的集合数据类型，有若干的键值对来组成。对象可以用来统一管理多个数据哦。 本节将围绕对象的概念和创建方法进行介绍。
js 中的对象属性——configurable、writable 等（数据属性和访问器属性）
TKOP_的博客
03-20 6838
学习属性据属性和访问器属性的特性，学习 defineProperty() 等方法。
JavaScript学习笔记-B站动力节点
m0_52041525的博客
02-19 1491
文章目录1.1.什么是JavaScript，有什么用？1.2.HTML，CSS，JavaSript三者关系2.在HTML中怎么嵌入JavaScript代码？3.4.5.6.7.8.9.10.11.12.13.14.15. 1.1.什么是JavaScript，有什么用？ JavaScript是运行在浏览器上的脚本语言。简称JS。 JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。 LiveScript的出现让浏览器更加的生动
Python-使用MapboxGLJS可视化PythonJupyter笔记本中的数据
08-10
你可以根据需求将不同类型的几何对象（点、线、面）与数据绑定，通过颜色、大小、透明度等视觉属性来表达数据的差异和分布。 此外，Mapbox GL JS还允许你在地图上添加交互元素，如点击事件监听器，获取用户点击的...
javascript-jquery学习笔记.docx
10-20
JavaScript 是一种客户端脚本语言，用于增强网页的交互性和动态性，而 jQuery 是一个 JavaScript 库，它简化了 JavaScript 的使用，提供了丰富的选择器、动画效果和事件处理。 在 JavaScript 中，字符串可以使用反...
ES6-learning：学习ES6的笔记
02-05
目录 思维导图第一章块级绑定第二章弦和正则表达式第三章函数第四章扩展的对象功能第五章解构：更方便的数据访问第六章符号和符号属性第七章与地图第八章迭代器（Iterator）和生成器（Generator）第九章JavaScript中...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
四足宠物机器狗动态步行规划与仿真.pdf
最新发布
07-28
四足宠物机器狗动态步行规划与仿真
深入理解JavaScript对象：属性与特性解析
- **访问器属性**：使用getter和setter方法间接控制属性值，提供更灵活的访问控制。 - **内部属性**：这部分属性不可直接通过代码访问，主要用于规范说明，例如`[[Prototype]]`用于表示原型链，`[[PrimitiveValue]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值