Object.defineProperty | 易学教程

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Object.defineProperty</title>
 6 </head>
 7 <body>
 8     <p>Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。</p>
 9     <h4>语法:Object.defineProperty(obj, prop, descriptor)</h4>
10     <p><strong>参数</strong></p>
11     <p>
12 obj 需要定义属性的对象。<br>
13 prop 需被定义或修改的属性名。<br>
14 descriptor 需被定义或修改的属性的描述符。</p>
15 
16 <pre>
17     var person={};
18 
19     Object.defineProperty(person,'age',{value:27,writable:false});
20 
21     console.log(person.age);//27
22 
23     person.age=19; //设置不了writable:false  为true 则可以设置
24 
25     console.log(person.age);//27
26 </pre>
27 </body>
28 <script>
29     var person={};
30 
31     Object.defineProperty(person,'age',{value:27,writable:false});
32 
33     console.log(person.age);//27
34 
35     person.age=19; //设置不了writable:false  为true 则可以设置
36 
37     console.log(person.age);//27
38 
39 </script>
40 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>defineProperty-0</title>
 6 </head>
 7 <body>
 8     
 9 </body>
10 <script>
11 var pattern = {
12     get: function () {
13         return 'I alway return this string,whatever you have assigned';
14     },
15     set: function () {
16         this.myname = 'this is my name string';
17     }
18 };
19 
20 
21 function TestDefineSetAndGet() {
22     Object.defineProperty(this, 'myproperty', pattern);
23 }
24 
25 
26 var instance = new TestDefineSetAndGet();
27 instance.myproperty = 'test';
28 
29 // 'I alway return this string,whatever you have assigned'
30 console.log(instance.myproperty);
31 // 'this is my name string'
32 console.log(instance.myname);
33 </script>
34 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue 双向绑定实现原理</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <input type="text" id="txt">
10     <p id="show-txt"></p>
11 </div>
12 <script>
13 /*
14 Object.defineProperty(obj, prop, descriptor)
15 obj ，待修改的对象
16 prop ，带修改的属性名称
17 descriptor ，待修改属性的相关描述
18 descriptor 要求传入一个对象，其默认值如下：
19 
20 {
21 configurable: false,
22 enumerable: false,
23 writable: false,
24 value: null,
25 set: undefined,
26 get: undefined
27 }
28 configurable ，属性是否可配置。可配置的含义包括：是否可以删除属性（ delete ），是否可以修改属性的 writable 、 enumerable 、 configurable 属性。
29 enumerable ，属性是否可枚举。可枚举的含义包括：是否可以通过 for...in 遍历到，是否可以通过 Object.keys() 方法获取属性名称。
30 writable ，属性是否可重写。可重写的含义包括：是否可以对属性进行重新赋值。
31 value ，属性的默认值。
32 set ，属性的重写器（暂且这么叫）。一旦属性被重新赋值，此方法被自动调用。
33 get ，属性的读取器（暂且这么叫）。一旦属性被访问读取，此方法被自动调用
34 */
35 
36 
37 var obj = {}
38 
39 Object.defineProperty(obj, 'txt', {
40 
41     get: function () {//一旦属性被访问读取，此方法被自动调用
42 
43         return obj
44     },
45 
46     set: function (newValue) {//一旦属性被重新赋值，此方法被自动调用    同时将接收一个：属性被赋的新值 newValue
47 
48         document.getElementById('txt').value = newValue
49 
50         document.getElementById('show-txt').innerHTML = newValue
51     }
52 })
53 document.addEventListener('keyup', function (e) {
54     obj.txt = e.target.value
55 })
56 
57 </script>
58 </body>
59 </html>

来源：https://www.cnblogs.com/studyshufei/p/8067973.html

标签

object