属性描述符

属性描述符的配置参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

属性描述符：它表达了一个属性的相关信息（元数据），它本质上是一个对象。

数据属性
存取器属性
1. 当给它赋值，会自动运行一个函数
2. 当获取它的值时，会自动运行一个函数

function User(name, age) {
    this.name = name;
    //年龄的取值范围是 0 - 100
    //如果年龄的值小于了0，则赋值为0，如果年龄的值大于了100，则赋值为100
    var _age;
    Object.defineProperty(this, "age", {
        get: function() {
            return _age;
        },
        set: function(val) {
            if (val < 0) {
                val = 0;
            } else if (val > 100) {
                val = 100;
            }
            _age = val;
        }
    })

    this.age = age;
}

var u = new User("abc", -1);
u.age = u.age + 10000;
console.log(u.age);

其他的属性描述符

configurable // 是否可以删除和修改
enumerable // 是否可以枚举(即被遍历)
writable //是否可以修改
value //属性的值

Object.getOwnPropertyDescriptor 获取某个对象的某个属性的属性描述符对象（该属性必须直接属于该对象）

存取器的场景

可以把对某个属性的设置的校验或者相关逻辑放到存取器中，这样方便以后和扩展维护

    var div = document.querySelector(".move");
    var config = {
        _x: 0,
        _y: 0,
        xDis: 2,
        yDis: 2,
        duration: 16,
        width: 100,
        height: 100
    }

    Object.defineProperty(config, "x", {
        get: function() {
            return this._x;
        },
        set: function(val) {
            if (val < 0) {
                val = 0;
            } else if (val > document.documentElement.clientWidth - this.width) {
                val = document.documentElement.clientWidth - this.width;
            }
            this._x = val;
            div.style.left = val + "px";
        }
    })

    Object.defineProperty(config, "y", {
        get: function() {
            return this._y;
        },
        set: function(val) {
            if (val < 0) {
                val = 0;
            } else if (val > document.documentElement.clientHeight - this.height) {
                val = document.documentElement.clientHeight - this.height;
            }
            this._y = val;
            div.style.top = val + "px";
        }
    })

属性描述符对于学习框架有帮助，在js中，很多功能都是通过自身写出来的。

div.innerText="123";//页面div会变，本质就是调用了set方法

属性描述符 ​

存取器的场景 ​

属性描述符

存取器的场景