js中Object.defineProperty()方法的解释
<h1 class="postTitle" style="text-align: left"> </h1><p>菜菜： “老大，那个， Object.defineProperty 是什么鬼？”</p>
<p>假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做</p>
<div class="jb51code">
<div id="highlighter_429513" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user = {};</code></div>
<div class="line number2 index1 alt1"><code class="js plain">user.name=</code><code class="js string">"狂奔的蜗牛"</code><code class="js plain">;</code></div>
<div class="line number3 index2 alt2"><code class="js plain">console.log(user);</code><code class="js comments">//{name: "狂奔的蜗牛"}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>如果想要增加一个sayHi方法叻？</p>
<div class="jb51code">
<div id="highlighter_256029" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js plain">user.sayHi=</code><code class="js keyword">function</code> <code class="js plain">() { console.log(</code><code class="js string">"Hi !"</code><code class="js plain">) };</code></div>
<div class="line number2 index1 alt1"><code class="js plain">console.log(user);</code><code class="js comments">//{name: "狂奔的蜗牛", sayHi: ƒn}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p><code>Object.defineProperty </code>就是做这个的</p>
<p><strong>那么Object.defineProperty 怎么用？</strong></p>
<p>Object.defineProperty 需要三个参数（object , propName , descriptor）</p>
<p>1 object 对象 => 给谁加<br>2 propName 属性名 => 要加的属性的名字 【类型：String】<br>3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】</p>
<p>那么<code>descriptor</code>这个是个对象 ，他有那些属性呢 ? 别着急我们一个一个说；</p>
<p>既然可以给一个对象增加属性，那么我们用它来做一下给 user添加 name属性，代码是这样的</p>
<div class="jb51code">
<div>
<div id="highlighter_917396" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user = {};</code></div>
<div class="line number2 index1 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"name"</code><code class="js plain">,{</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number4 index3 alt1"><code class="js plain">})</code></div>
<div class="line number5 index4 alt2"><code class="js plain">console.log(user);</code><code class="js comments">//{name: "狂奔的蜗牛"}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>说明 是的还是那个经典的<code>value</code>属性，他就是设置属性值的。</p>
<p>等等，属性值只能为字符串吗？我们的 number function Object boolean 等呢？</p>
<div class="jb51code">
<div>
<div id="highlighter_998772" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user = {};</code></div>
<div class="line number2 index1 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"name"</code><code class="js plain">,{</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number4 index3 alt1"><code class="js plain">})</code></div>
<div class="line number5 index4 alt2"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"isSlow"</code><code class="js plain">,{</code></div>
<div class="line number6 index5 alt1"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js keyword">true</code></div>
<div class="line number7 index6 alt2"><code class="js plain">})</code></div>
<div class="line number8 index7 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"sayHi"</code><code class="js plain">,{</code></div>
<div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js keyword">function</code> <code class="js plain">() { console.log(</code><code class="js string">"Hi !"</code><code class="js plain">) }</code></div>
<div class="line number10 index9 alt1"><code class="js plain">})</code></div>
<div class="line number11 index10 alt2"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"age"</code><code class="js plain">,{</code></div>
<div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">value:12</code></div>
<div class="line number13 index12 alt2"><code class="js plain">})</code></div>
<div class="line number14 index13 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"birth"</code><code class="js plain">,{</code></div>
<div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">value:{</code></div>
<div class="line number16 index15 alt1"><code class="js spaces"> </code><code class="js plain">date:</code><code class="js string">"2018-06-29"</code><code class="js plain">,</code></div>
<div class="line number17 index16 alt2"><code class="js spaces"> </code><code class="js plain">hour:</code><code class="js string">"15:30"</code></div>
<div class="line number18 index17 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div>
<div class="line number19 index18 alt2"><code class="js plain">})</code></div>
<div class="line number20 index19 alt1"><code class="js plain">console.log(user);</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><img src="https://files.jb51.net/file_images/article/201807/201879143726904.png?201869143742"></p>
<p>说明 事实证明任何类型的数据都是可以的哦~</p>
<p>问题又来了，如果 user对象已经有了name属性，我们可以通过Object.defineProperty改变这个值吗？</p>
<p>我们来试试</p>
<div class="jb51code">
<div>
<div id="highlighter_5697" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user = {};</code></div>
<div class="line number2 index1 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"name"</code><code class="js plain">,{</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number4 index3 alt1"><code class="js plain">})</code></div>
<div class="line number5 index4 alt2"><code class="js plain">console.log(user);</code></div>
<div class="line number6 index5 alt1"><code class="js plain">user.name=</code><code class="js string">"新=>狂奔的蜗牛"</code></div>
<div class="line number7 index6 alt2"><code class="js plain">console.log(user);</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>咦？？为什么我改了没作用勒？？</p>
<p>原因：上边说了descriptor有很多属性，除了value属性还有个 writable【顾名思义属性是否可以被重新赋值】接受数据类型为 boolean（默认为false） true => 支持被重新赋值 false=>只读</p>
<p>哦哦，原来如果我没设置writable值的时候就默认只读啊，所以才改不掉</p>
<p>那我们看看，设置为true，是不是就可以改掉了。</p>
<div class="jb51code">
<div>
<div id="highlighter_133309" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user = {};</code></div>
<div class="line number2 index1 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"name"</code><code class="js plain">,{</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"狂奔的蜗牛"</code><code class="js plain">,</code></div>
<div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">writable:</code><code class="js keyword">true</code></div>
<div class="line number5 index4 alt2"><code class="js plain">})</code></div>
<div class="line number6 index5 alt1"><code class="js plain">console.log(user);</code></div>
<div class="line number7 index6 alt2"><code class="js plain">user.name=</code><code class="js string">"新=>狂奔的蜗牛"</code></div>
<div class="line number8 index7 alt1"><code class="js plain">console.log(user);</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><img src="https://files.jb51.net/file_images/article/201807/201879143806263.png?201869143817"></p>
<p>这个descriptor还有其他的属性吗？enumerable【顾名思义属性是否可以被枚举】接受数据类型为 boolean（默认为false） true => 支持被枚举 false=>不支持</p>
<p>额。。。枚举？？什....什么意思？</p>
<p>假设我们想知道这个 user对象有哪些属性我们一般会这么做</p>
<div class="jb51code">
<div>
<div id="highlighter_745413" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code><code class="js plain">,</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">age:25</code></div>
<div class="line number4 index3 alt1"><code class="js plain">} ;</code></div>
<div class="line number5 index4 alt2"> </div>
<div class="line number6 index5 alt1"><code class="js comments">//es6</code></div>
<div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">keys=Object.keys(user)</code></div>
<div class="line number8 index7 alt1"><code class="js plain">console.log(keys);</code><code class="js comments">// ['name','age']</code></div>
<div class="line number9 index8 alt2"><code class="js comments">//es5</code></div>
<div class="line number10 index9 alt1"><code class="js keyword">var</code> <code class="js plain">keys=[];</code></div>
<div class="line number11 index10 alt2"><code class="js keyword">for</code><code class="js plain">(key </code><code class="js keyword">in</code> <code class="js plain">user){</code></div>
<div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">keys.push(key);</code></div>
<div class="line number13 index12 alt2"><code class="js plain">} </code></div>
<div class="line number14 index13 alt1"><code class="js plain">console.log(keys);</code><code class="js comments">// ['name','age'] </code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>如果我们使用 Object.的方式定义属性会发生什么呢？我们来看下输出</p>
<div class="jb51code">
<div>
<div id="highlighter_600874" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code><code class="js plain">,</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">age:25</code></div>
<div class="line number4 index3 alt1"><code class="js plain">} ;</code></div>
<div class="line number5 index4 alt2"><code class="js comments">//定义一个性别 可以被枚举</code></div>
<div class="line number6 index5 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"gender"</code><code class="js plain">,{</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"男"</code><code class="js plain">,</code></div>
<div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js plain">enumerable:</code><code class="js keyword">true</code></div>
<div class="line number9 index8 alt2"><code class="js plain">})</code></div>
<div class="line number10 index9 alt1"> </div>
<div class="line number11 index10 alt2"><code class="js comments">//定义一个出生日期 不可以被枚举</code></div>
<div class="line number12 index11 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"birth"</code><code class="js plain">,{</code></div>
<div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"1956-05-03"</code><code class="js plain">,</code></div>
<div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js plain">enumerable:</code><code class="js keyword">false</code></div>
<div class="line number15 index14 alt2"><code class="js plain">})</code></div>
<div class="line number16 index15 alt1"> </div>
<div class="line number17 index16 alt2"><code class="js comments">//es6</code></div>
<div class="line number18 index17 alt1"><code class="js keyword">var</code> <code class="js plain">keys=Object.keys(user)</code></div>
<div class="line number19 index18 alt2"><code class="js plain">console.log(keys);</code></div>
<div class="line number20 index19 alt1"><code class="js comments">// ["name", "age", "gender"]</code></div>
<div class="line number21 index20 alt2"> </div>
<div class="line number22 index21 alt1"><code class="js plain">console.log(user);</code></div>
<div class="line number23 index22 alt2"><code class="js comments">// {name: "狂奔的蜗牛", age: 25, gender: "男", birth: "1956-05-03"}</code></div>
<div class="line number24 index23 alt1"><code class="js plain">console.log(user.birth);</code></div>
<div class="line number25 index24 alt2"><code class="js comments">// 1956-05-03 </code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><strong>说明</strong> 很明显，我们定义为 <code>enumerable=false</code>的<code>birth</code>属性并没有被遍历出来，遍历 => 其实就是枚举（个人理解啦，不喜勿喷哦~）</p>
<p><strong>总结 </strong><code>enumerable </code>属性取值为 <code>布尔类型 true | false </code>默认值为 <code>false</code>，为真属性可以被枚举；反之则不能。此设置不影响属性的调用和 查看对象的值。</p>
<p><code>configurable </code>是接下来我们要讲的一个属性，这个属性有两个作用：</p>
<p>1 属性是否可以被删除<br>2 属性的特性在第一次设置之后可否被重新定义特性</p>
<div class="jb51code">
<div>
<div id="highlighter_976524" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code><code class="js plain">,</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">age:25</code></div>
<div class="line number4 index3 alt1"><code class="js plain">} ;</code></div>
<div class="line number5 index4 alt2"><code class="js comments">//定义一个性别 不可以被删除和重新定义特性</code></div>
<div class="line number6 index5 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"gender"</code><code class="js plain">,{</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"男"</code><code class="js plain">,</code></div>
<div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js plain">enumerable:</code><code class="js keyword">true</code><code class="js plain">,</code></div>
<div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js plain">configurable:</code><code class="js keyword">false</code></div>
<div class="line number10 index9 alt1"><code class="js plain">})</code></div>
<div class="line number11 index10 alt2"> </div>
<div class="line number12 index11 alt1"><code class="js comments">//删除一下</code></div>
<div class="line number13 index12 alt2"><code class="js keyword">delete</code> <code class="js plain">user.gender;</code></div>
<div class="line number14 index13 alt1"><code class="js plain">console.log(user);</code><code class="js comments">//{name: "狂奔的蜗牛", age: 25, gender: "男"}</code></div>
<div class="line number15 index14 alt2"> </div>
<div class="line number16 index15 alt1"><code class="js comments">//重新定义特性</code></div>
<div class="line number17 index16 alt2"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"gender"</code><code class="js plain">,{</code></div>
<div class="line number18 index17 alt1"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"男"</code><code class="js plain">,</code></div>
<div class="line number19 index18 alt2"><code class="js spaces"> </code><code class="js plain">enumerable:</code><code class="js keyword">true</code><code class="js plain">,</code></div>
<div class="line number20 index19 alt1"><code class="js spaces"> </code><code class="js plain">configurable:</code><code class="js keyword">true</code></div>
<div class="line number21 index20 alt2"><code class="js plain">})</code></div>
<div class="line number22 index21 alt1"><code class="js comments">// Uncaught TypeError: Cannot redefine property: gender</code></div>
<div class="line number23 index22 alt2"><code class="js comments">//会报错，如下图</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><img src="https://files.jb51.net/file_images/article/201807/201879143921507.png?201869143929"></p>
<p>设置为 true</p>
<div class="jb51code">
<div>
<div id="highlighter_674478" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
<div class="line number33 index32 alt2">33</div>
<div class="line number34 index33 alt1">34</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code><code class="js plain">,</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">age:25</code></div>
<div class="line number4 index3 alt1"><code class="js plain">} ;</code></div>
<div class="line number5 index4 alt2"><code class="js comments">//定义一个性别 可以被删除和重新定义特性</code></div>
<div class="line number6 index5 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"gender"</code><code class="js plain">,{</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"男"</code><code class="js plain">,</code></div>
<div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js plain">enumerable:</code><code class="js keyword">true</code><code class="js plain">,</code></div>
<div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js plain">configurable:</code><code class="js keyword">true</code></div>
<div class="line number10 index9 alt1"><code class="js plain">})</code></div>
<div class="line number11 index10 alt2"> </div>
<div class="line number12 index11 alt1"><code class="js comments">//删除前</code></div>
<div class="line number13 index12 alt2"><code class="js plain">console.log(user);</code></div>
<div class="line number14 index13 alt1"><code class="js comments">// {name: "狂奔的蜗牛", age: 25, gender: "男"}</code></div>
<div class="line number15 index14 alt2"> </div>
<div class="line number16 index15 alt1"><code class="js comments">//删除一下</code></div>
<div class="line number17 index16 alt2"><code class="js keyword">delete</code> <code class="js plain">user.gender;</code></div>
<div class="line number18 index17 alt1"><code class="js plain">console.log(user);</code></div>
<div class="line number19 index18 alt2"><code class="js comments">// {name: "狂奔的蜗牛", age: 25}</code></div>
<div class="line number20 index19 alt1"> </div>
<div class="line number21 index20 alt2"><code class="js comments">//重新定义特性</code></div>
<div class="line number22 index21 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"gender"</code><code class="js plain">,{</code></div>
<div class="line number23 index22 alt2"><code class="js spaces"> </code><code class="js plain">value:</code><code class="js string">"男"</code><code class="js plain">,</code></div>
<div class="line number24 index23 alt1"><code class="js spaces"> </code><code class="js plain">enumerable:</code><code class="js keyword">true</code><code class="js plain">,</code></div>
<div class="line number25 index24 alt2"><code class="js spaces"> </code><code class="js plain">configurable:</code><code class="js keyword">false</code></div>
<div class="line number26 index25 alt1"><code class="js plain">})</code></div>
<div class="line number27 index26 alt2"> </div>
<div class="line number28 index27 alt1"><code class="js comments">//删除前</code></div>
<div class="line number29 index28 alt2"><code class="js plain">console.log(user);</code></div>
<div class="line number30 index29 alt1"><code class="js comments">// {name: "狂奔的蜗牛", age: 25, gender: "男"}</code></div>
<div class="line number31 index30 alt2"><code class="js comments">//删除一下 删除失败</code></div>
<div class="line number32 index31 alt1"><code class="js keyword">delete</code> <code class="js plain">user.gender;</code></div>
<div class="line number33 index32 alt2"><code class="js plain">console.log(user);</code></div>
<div class="line number34 index33 alt1"><code class="js comments">// {name: "狂奔的蜗牛", age: 25, gender: "男"}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>总结 <code>configurable</code>设置为 true 则该属性可以被删除和重新定义特性；反之属性是不可以被删除和重新定义特性的，默认值为false（Ps.<code>除了可以给新定义的属性设置特性，也可以给已有的属性设置特性哈</code>）</p>
<p>最后我们来说说，最重要的两个属性 <code>set</code>和<code>get</code>（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？我们通过代码来看看</p>
<div class="jb51code">
<div>
<div id="highlighter_809473" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number3 index2 alt2"><code class="js plain">} ;</code></div>
<div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">count = 12;</code></div>
<div class="line number5 index4 alt2"><code class="js comments">//定义一个age 获取值时返回定义好的变量count</code></div>
<div class="line number6 index5 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"age"</code><code class="js plain">,{</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">get:</code><code class="js keyword">function</code><code class="js plain">(){</code></div>
<div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">count;</code></div>
<div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js plain">}</code></div>
<div class="line number10 index9 alt1"><code class="js plain">})</code></div>
<div class="line number11 index10 alt2"><code class="js plain">console.log(user.age);</code><code class="js comments">//12</code></div>
<div class="line number12 index11 alt1"> </div>
<div class="line number13 index12 alt2"><code class="js comments">//如果我每次获取的时候返回count+1呢</code></div>
<div class="line number14 index13 alt1"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number16 index15 alt1"><code class="js plain">} ;</code></div>
<div class="line number17 index16 alt2"><code class="js keyword">var</code> <code class="js plain">count = 12;</code></div>
<div class="line number18 index17 alt1"><code class="js comments">//定义一个age 获取值时返回定义好的变量count</code></div>
<div class="line number19 index18 alt2"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"age"</code><code class="js plain">,{</code></div>
<div class="line number20 index19 alt1"><code class="js spaces"> </code><code class="js plain">get:</code><code class="js keyword">function</code><code class="js plain">(){</code></div>
<div class="line number21 index20 alt2"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">count+1;</code></div>
<div class="line number22 index21 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div>
<div class="line number23 index22 alt2"><code class="js plain">})</code></div>
<div class="line number24 index23 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//13</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>接下来我不用解释了吧，你想在获取该属性的时候对值做什么随你咯~</p>
<p>来来来，我们看看 set，不多说上代码</p>
<div class="jb51code">
<div>
<div id="highlighter_638237" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
<div class="line number33 index32 alt2">33</div>
<div class="line number34 index33 alt1">34</div>
<div class="line number35 index34 alt2">35</div>
<div class="line number36 index35 alt1">36</div>
<div class="line number37 index36 alt2">37</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number3 index2 alt2"><code class="js plain">} ;</code></div>
<div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">count = 12;</code></div>
<div class="line number5 index4 alt2"><code class="js comments">//定义一个age 获取值时返回定义好的变量count</code></div>
<div class="line number6 index5 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"age"</code><code class="js plain">,{</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">get:</code><code class="js keyword">function</code><code class="js plain">(){</code></div>
<div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">count;</code></div>
<div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js plain">},</code></div>
<div class="line number10 index9 alt1"><code class="js spaces"> </code><code class="js plain">set:</code><code class="js keyword">function</code><code class="js plain">(newVal){</code></div>
<div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js plain">count=newVal;</code></div>
<div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div>
<div class="line number13 index12 alt2"><code class="js plain">})</code></div>
<div class="line number14 index13 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//12</code></div>
<div class="line number15 index14 alt2"><code class="js plain">user.age=145;</code></div>
<div class="line number16 index15 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//145</code></div>
<div class="line number17 index16 alt2"><code class="js plain">console.log(count);</code><code class="js comments">//145</code></div>
<div class="line number18 index17 alt1"> </div>
<div class="line number19 index18 alt2"><code class="js comments">//等等，如果我想设置的时候是 自动加1呢？我设置145 实际上设置是146</code></div>
<div class="line number20 index19 alt1"> </div>
<div class="line number21 index20 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number22 index21 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number23 index22 alt2"><code class="js plain">} ;</code></div>
<div class="line number24 index23 alt1"><code class="js keyword">var</code> <code class="js plain">count = 12;</code></div>
<div class="line number25 index24 alt2"><code class="js comments">//定义一个age 获取值时返回定义好的变量count</code></div>
<div class="line number26 index25 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"age"</code><code class="js plain">,{</code></div>
<div class="line number27 index26 alt2"><code class="js spaces"> </code><code class="js plain">get:</code><code class="js keyword">function</code><code class="js plain">(){</code></div>
<div class="line number28 index27 alt1"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">count;</code></div>
<div class="line number29 index28 alt2"><code class="js spaces"> </code><code class="js plain">},</code></div>
<div class="line number30 index29 alt1"><code class="js spaces"> </code><code class="js plain">set:</code><code class="js keyword">function</code><code class="js plain">(newVal){</code></div>
<div class="line number31 index30 alt2"><code class="js spaces"> </code><code class="js plain">count=newVal+1;</code></div>
<div class="line number32 index31 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div>
<div class="line number33 index32 alt2"><code class="js plain">})</code></div>
<div class="line number34 index33 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//12</code></div>
<div class="line number35 index34 alt2"><code class="js plain">user.age=145;</code></div>
<div class="line number36 index35 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//146</code></div>
<div class="line number37 index36 alt2"><code class="js plain">console.log(count);</code><code class="js comments">//146</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><strong>说明 </strong>注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)</p>
<p><code>get </code>是获取值的时候的方法，类型为 <code>function </code>，获取值的时候会被调用，不设置时为 <code>undefined</code></p>
<p><code>set </code>是设置值的时候的方法，类型为 <code>function </code>，设置值的时候会被调用，<code>undefined</code></p>
<p>get或set不是必须成对出现，任写其一就可以</p>
<div class="jb51code">
<div>
<div id="highlighter_488605" class="syntaxhighlighterjs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">user ={</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">name:</code><code class="js string">"狂奔的蜗牛"</code></div>
<div class="line number3 index2 alt2"><code class="js plain">} ;</code></div>
<div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">count = 12;</code></div>
<div class="line number5 index4 alt2"><code class="js comments">//定义一个age 获取值时返回定义好的变量count</code></div>
<div class="line number6 index5 alt1"><code class="js plain">Object.defineProperty(user,</code><code class="js string">"age"</code><code class="js plain">,{</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">get:</code><code class="js keyword">function</code><code class="js plain">(){</code></div>
<div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js plain">console.log(</code><code class="js string">"这个人来获取值了！！"</code><code class="js plain">);</code></div>
<div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">count;</code></div>
<div class="line number10 index9 alt1"><code class="js spaces"> </code><code class="js plain">},</code></div>
<div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js plain">set:</code><code class="js keyword">function</code><code class="js plain">(newVal){</code></div>
<div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">console.log(</code><code class="js string">"这个人来设置值了！！"</code><code class="js plain">);</code></div>
<div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js plain">count=newVal+1;</code></div>
<div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div>
<div class="line number15 index14 alt2"><code class="js plain">})</code></div>
<div class="line number16 index15 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//12</code></div>
<div class="line number17 index16 alt2"><code class="js plain">user.age=145;</code></div>
<div class="line number18 index17 alt1"><code class="js plain">console.log(user.age);</code><code class="js comments">//146</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><img src="https://files.jb51.net/file_images/article/201807/201879144101330.jpg?201869144119"></p>
<p><strong>【完结】</strong></p>
<p><code>Object.defineProperty</code>方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象</p>
<ul>
<ul>
<li>value: 设置属性的值</li>
<li>writable: 值是否可以重写。true | false</li>
<li>enumerable: 目标属性是否可以被枚举。true | false</li>
<li>configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false</li>
<li>set: 目标属性设置值的方法</li>
<li>get：目标属性获取值的方法 </li>
</ul>
</ul><br><br>
来源：https://www.cnblogs.com/Bree/p/12009007.html
頁:
[1]