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>