Object.defineProperty

定义

Object.defineProperty(obj, prop, descriptor)

• obj 要定义属性的对象
• prop 要定义或修改的属性名称（键）
• descriptor 要定义或修改的属性描述

属性描述符

1. 数据描述符
2. 存取描述符

1.数据描述符

• configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。

• enumerable 对象是否可枚举(for…in循环) 默认为false
• value 设置或修改值 默认为 undefined。
• writable 是否可写(可修改) 默认false

2. 存取描述符

• get
  一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
  默认为 undefined。
• set
  一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
  默认为 undefined。

3. 描述符可同时具有的键值

html文件

<input type="text" id="input" />
<p id='show'></p>

js

// v-model原理
document.getElementById('input').oninput = function() {
    var userInfo = {};
    Object.defineProperty(userInfo, 'name', {
        set(newVal) {
            document.getElementById('show').innerHTML = newVal;
        },
        get() {
            return document.getElementById('show').innerHTML;
        }
    })
    userInfo.name = this.value;
}

get & set

一个对象拥有两个方法，分别用于获取和设置某个值，
你可以用它来隐藏那些不想让外界直接访问的属性。一个对象内，每个变量只能有一个getter或setter。

因此value可以有一个getter和一个setter，但是value绝没有两个getters

var text = document.getElementById('text');
    var person = {
        _val: 0, //临时变量 使用还是用正常变量
        set val(newVal) {
            // this._val = newVal;
            text.innerHTML = newVal
        },
        get val() {
            return text.innerHTML;
        }
    }
    var input = document.getElementById('value');
    input.oninput = function() {
        person.val = this.value;
}