ES5-Object.defineProperty

简介：ES5规范开始后续版本迭代，也在致力于做一件事，就是把js底层已有的功能，提供给开发者用Object.defineProperty就是其中一个，此方法会可直接在一个对象上定义一个新的具有详细描述的属性，或者修改一个对象的现有属性，并返回这个对象。
使用：
Object.defineProperty(对象，属性，描述符)；
描述符对，对象的属性的进行详细描述：
1）数据描述符：
value：‘xxx’ 属性值。默认 ‘’（空字符串）
writeable：true是否可写。默认false
configurable：true是否可配置。默认false
enumerable：true是否可枚举。默认false
2）存取描述符：
set:function(){}属性访问器 进行写操作时调用该方法
get:function(){}属性访问器 进行读操作时调用该方法

下面我们来举几个例子：

var obj = {
      name: 'cst'
 };

我们在学习js的时候修改对象的值可直接赋值操作修改对象里面的值，删除对象里面的属性，枚举对象中的属性

obj.name = 'cg';
console.log( delete obj.name);
for (var prop in obj) {
    console.log(prop);
}

实现这步操作，并不是这一语句那么简单 ，当然也并不是所有对象的属性是可写的，可配置的，可枚举的

Function.prototype = {
            name: 'cst'
  }

image.png

我们可以在控制台中可以发现Function.prototype还是本地代码，并不是我们写的对象。
当我们将a挂载到window下

var a = 10;
console.log( window.a );

当我们能不能删除window.a呢？

image.png

答案显然是不能。

//Object.prototype
        var obj = {
            name: 'cst',
            age: 20,
            __proto__: {
                sex: 'male',
                __proto__: {
                    lastName: 'chen'
                }
            }
        };

        for (var prop in Object.prototype) {
            console.log(prop);
        }

我们又可以在控制台上看到什么也没有，这就代表了Object.prototype的属性不能枚举的
而又是什么在控制这些读写，配置,枚举的操作呢？
是ES5语法中js底层功能中Object.defineProperty的描述符
我们在看看如下的代码

var obj = {
            name: 'aaa'
        };
        Object.defineProperty(obj, 'name', {
            value: 'bbb',
            writable: false,
        });

我们在控制台打印obj.name到底是aaa还是bbb呢？
这里没有写configurable，enumerable默认为false

Object.defineProperty(obj, 'name', {
            value: 'cst',
            writable: false,
            configurable: true, 
            enumerable: true
}

则真正意义上实现了以前学习的js对象操作
而存取描述符set和get不能与value和writable同时存在，所以Object.defineProperty有两种写法，除了上面一种，还有下面这种(get和set方法需要设置一个全局变量tempValue坐中间值)

var tempValue = '';
        Object.defineProperty(obj, 'name', {
            configurable: true, 
            enumerable: true,
            get: function () {
                return tempValue;
            },
            set: function (newValue) {
                tempValue = newValue
            }
 });

这样在之后对Vue中的数据劫持的理解就更容易了
下面我们将get和set写进对象里，以省掉Object.defineProperty

 var obj = {
            tempValue: 'duyi',
            get name () {
                return this.tempValue;
            },
            set name (newValue) {
                this.tempValue = newValue;
            }
        };

        obj.name = 10;
        console.log( obj.name );