Object之defineProperty

场景：

vue2.0中的双向数据绑定是经典的面试题,可是能说明白的又有几个?

---

基本使用

参数详解

Object.defineProperty(obj,prop,descriptor);
1 obj 需要定义属性的对象prop 定义的属性名称descriptor 被定义的属性描述(此参数是一个对象)​
2 value:设置到属性的值
3 writable: 设置属性是否可写,boolean 类型,默认值 false
4 configurable: 设置属性是否可以配置,boolean 类型,默认值 false.主要有两个功能
5 设置属性是否可以被 delete 删除
6 设置属性是否可以被再次配置.
7 enumerable: 设置属性是否可以被 for in & Object.keys() 枚举出来.默认值是 false
8 ​set: 给属性赋值的setter
9 get: 获取属性值的 getter

---

常规使用

在使用 set / get 的时候,就不能搭配 value & writable 两个属性了.否则直接报错.

   // 添加数据属性
			var obj = {};
			
			// 1.添加一个数据属性
			Object.defineProperty(obj, "age", {
			    value: 101,
			    writable: true,  // 是否可以写
			    enumerable: true, // 是否可枚举
			    configurable: true   // 配置文件是否可修改
			});
			
		   // 101
			// console.log(obj.age );
			
			// 2.修改数据属性,不可以写
			Object.defineProperty(obj, "age", {
			    writable:false
			});

set和get(不能和value属性一起使用).

	//添加访问器属性
            var obj = {
                name:'小甜甜',
                _age:18
            };
           // 外部只能访问age
			Object.defineProperty(obj, "age", {
			    set: function (x) {
			        this._age = x;
			    },
			    get: function () {
			        return this._age;
			    },
			    enumerable: true,
			    configurable: true
			});
        console.log(obj.age);	

重现v-model

<div>
		    <button id="btn">改变uname</button>
		    <input type="text" id="input">
		    <h1 id="title"></h1>
	</div>

		<script type="text/javascript">
		window.onload=function(){
			    let userinfo = {
			        uname:'小甜甜',
			    };
			    //开始监控
			   // watcher();
			    (function watcher(){
			        Object.defineProperty(userinfo, "uname", {
			        set(value) {
						// 属性值被修改则通知另一个函数
			            updateDom(value);
			        },
			        get(val) {
			          return val;
			        },
			      });
			    })();
			    //更新dom数据
			    function updateDom(value){
			        document.querySelector('#input').value = value;
			        document.querySelector('#title').innerHTML = value;
			    }
			    //给input绑定input事件，实时修改username的值
			    document.querySelector('#input').oninput=function(e){
		
			        let value = e.target.value;
			        userinfo.uname = value;
			    }
			    //当点击button按钮时,修改对象的值,触发defineProperty中set
			    document.querySelector('#btn').onclick=function(){
			        let value = '小甜甜';
			        userinfo.uname = value;
			    }
			}
		</script>

别跑,据说给我一键三联的人写代码都没Bug!

我是飞翔,
愿您日有所长!