Object.defineProperty()方法的用法详解

Object.defineProperty()函数是给对象设置属性的。

Object.defineProperty(object, propertyname, descriptor);
一共有三个参数。
object：必须，要在其上添加或修改属性的对象。
propertyname：必需。 一个包含属性名称的字符串。
descriptor： 属性描述符。 它可以针对数据属性或访问器属性。

descriptor：有以下参数值
value:  属性的值，默认为 undefined。
writable:  该属性是否可写，如果设置成 false，则任何对该属性改写的操作都无效（但不会报错,但是在严格模式下会报错。），对于像前面例子中直接在对象上定义的属性，这个属性该特性默认值为为 true。
configurable:总开关，一旦为false，就不能再设置他的（value，writable，configurable）

enumerable:定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

get: 对定义的属性取值的时候会触发get 对应的函数,并且返回结果，默认返回undefined。

set: 对定义的属性赋值的时候会触发set 对应的函数

writable : 该属性是否可写，如果设置成 false，则任何对该属性改写的操作都无效

        var someOne = { };
        Object.defineProperty(someOne, "name", {
            value:"coverguo" , //由于设定了writable属性为false 导致这个量不可以修改
            writable: false
        });
        console.log(someOne.name); // 输出 coverguo
        someOne.name = "linkzhu";
        console.log(someOne.name); // 输出coverguo

 configurable : 总开关，一旦为false，就不能再设置他的（value，writable，configurable）

var someOne = { };
        Object.defineProperty(someOne, "name", {
            value:"coverguo" ,
            configurable: false
        });
        delete someOne.name;
        console.log(someOne.name);// 输出 coverguo
        someOne.name = "linkzhu";
        console.log(someOne.name); // 输出coverguo
        Object.defineProperty(someOne, "name", {
            value:"coverguo123" ,
             configurable: true
         }); //由于前面已经设置了，configurable，所以后面在修改value，configurable，以及writable都无效了。会报错。//error: Uncaught TypeError: Cannot redefine property: b

get : 对定义的属性取值的时候会触发get 对应的函数,并且返回结果，默认返回undefined。

set：对定义的属性赋值的时候会触发set 对应的函数

var a= {}
Object.defineProperty(a,"b",{
       set: function(newValue){
       console.log("你要赋值给我,我的新值是" + newValue);
          },
        get: function(){
        console.log("你取我的值")
            return 2 //注意这里，我硬编码返回2
           }
        })
        a.b = 1 //打印 你要赋值给我,我的新值是1
        console.log(a.b)    //打印 你取我的值
                            //打印 2    注意这里，和我的硬编码相同的

实际场景用法举例：

//假如有一个目标节点， 我们想设置其位移时是这样的

var targetDom = document.getElementById('target');
        var transformText = 'translateX(' + 10 + 'px)';
        targetDom.style.webkitTransform = transformText;
        targetDom.style.transform = transformText;

        /*通过上面，可以看到如果页面是需要许多动画时，我们这样编写transform属性是十分蛋疼的。(┬＿┬)
但如果通过Object.defineProperty， 我们则可以*/

  var dom = document.getElementById('target');
        Object.defineProperty(dom, 'translateX', {
        set: function(value) {
                 var transformText = 'translateX(' + value + 'px)';
                dom.style.webkitTransform = transformText;
                dom.style.transform = transformText;
        }
        //这样再后面调用的时候, 十分简单
        dom.translateX = 10;
        dom.translateX = -10;
        //甚至可以拓展设置如scale, originX, translateZ,等各个属性，达到下面的效果
        dom.scale = 1.5;  //放大1.5倍
        dom.originX = 5;  //设置中心点X
        }