JS-Object.defineProperty

1. Object.defineProperty 简介

• 不可配置:

var a = 10 挂载到 window 上，执行 delete a 结果为false,

• 枚举属性：

var obj = {
       name : 'tzh',
       age : 20,
       __proto__ : {
         nihao : 'good'
       }
     }

     for(var prop in obj){
       console.log(prop) // 打印结果为 name age nihao 
     }

Object.prototype 是不可枚举的

2. Object.defineProperty 定义规则

代码示例：

var obj = {
	name : 'LOL'  // 定义初始值；会被后面的 value 属性覆盖
}
Object.defineProperty(obj,'name',{
       value : 'tzh', //属性值
       writable : false, //不可写
       configurable : true, //可配置
       enumerable : true //可枚举
     })

set 和 get 的用法：

使用 set 和 get 的时候不能 跟 value 和 writable 一起使用要不然会冲突报错。

var assign = '' 
     var obj = {}
     Object.defineProperty(obj,'name',{
       configurable : true,
       enumerable : true,
       get : function (){
         return assign
       },
       set : function (newValue){
          assign = newValue
       }
     })
     obj.name = 10 //  设置值会调用 set 方法
     console.log(obj.name) //读取值会调用 get 方法

set 和 get 简化示例：

var obj = {
       assign : 'tzh',
       set name (newValue){
         this.assign = newValue
       },
       get name () {
         return this.assign
       }
    }
     obj.name = 10
     console.log(obj.name)

3. Object.defineProperty 数据劫持（双向数据绑定思想）

视图层：

	<input type="text" id="inp">
    <div class="text">123</div>

双向数据绑定思想模拟：

	var inp = document.getElementById('inp')
    var odiv = document.getElementsByClassName('text')[0]
    
 	var oData = { 
        ovalue : '',
        age : '19'
    }
    function updata(){ // 视图层数据更新函数
        odiv.innerText = oData.ovalue
    }

    inp.oninput = function () {
       oData.ovalue = this.value
    }

    function Hijacked (data){
       if(!data || typeof data != 'object') return data
       Object.keys(data).forEach(function(key){
            define(data,key,data[key])
       })
    }
    function define(data,key,val){  // 时刻监听数据变化
        //一般数据结构更加复杂,数据嵌套层次更深,递归循环拿到更深层次的数据,
        Hijacked (val)
        Object.defineProperty(data,key,{
            set : function(newValue){
                if(newValue == data[key]) return 
                val = newValue
                updata()
            },
            get : function(){
                return val
            }
        })
    }
    Hijacked(oData)

视图数据变化，浏览器的内存相应数据也会发生变化，浏览器的内存发生变化，视图层数据也会发生变化。