JavaScript / Object.defineProper

Object.defineProperty()

如果要说明这个方法，我们首先要看一下最开始我们创建对象的方法

var obj=new Object； //obj={}
obj.name="tom" //添加属性
obj.say=function(){ } //添加方法

那么现在，我们可以使用Object.defineProperty方法为为对象添加属性和方法

Object.defineproperty(obj,prop,descrtipor)

obj：必须参数，表示目标对象

prop：必须参数，表示需要修改的属性的名字

descriptor：必须参数，表示目标属性所拥有的特性

该函数返回值为我们传入的第一个参数obj被修改后的obj

针对属性，我们可以给这个属性设置一些特性，如是否可读可写，是否可以被遍历

给对象的属性添加特性描述，目前提供两种形式：数据面熟呵存取器描述

数据描述

当修改或定义对象的某个属性的时候，给这个属性添加一些特性：

var obj={
    key:'hello'
}
//对象已有属性添加特性描述
Object.definePropetry(obj,'key',{
    configurable:true|false,
    enumerable:true|false,
    value:任意类型的值,
    wriable:true|false
})
//对象新添加的属性的特新描述
Object.defineProperty(obj,'newKey',{
    configyrable:true|false,
    enumerable:true|false,
    value:任意类型的值,
    wriable:true|false
})

以上数据描述中的属性都是可选的，接下来看一下设置每一个属性的作用

1. value

   属性对应的值，可以使任意类型的值，默认为undefined

2. writable

   属性的值是否可以被重写，设置为trye表示可以被重写；设置为false，表示不能被重写，设置为false

3. enumerable

   此属性是否可以被枚举(使用for..in或Object.keys())，设置为true表示可以被枚举；设置为false表示不能被枚举，默认为fasle

4. configurable

   此属性表示是否可以删除目标属性或者是否可以再次修改属性的特性，设置为true表示可以被删除/重新设置，设置为false表示不可以被删除/重新设置，默认为false

注意，如果使用object.defineProperty给对象添加属性，那么如果不舍hi属性的特性，那么以上特性默认值全部为false

<script>
    var obj={
        newkey:'hello'
    }
    obj=Object.defineProperty(obj,'newkey',{
        value:"hi",
        writable:false,
        enumerable:false,
        configurable:false
    })
    obj.newkey="chang"
    for(var key in obj){
        console.log(key);
    }
    delete obj.newkey;
    Object.defineProperty(obj,'newkey',{
        value:'chang'
    })
    //在configurable设置为false的情况下，如果我们试图更改对象特性
    //浏览器会报错  Uncaught TypeError: Cannot redefine property:
    //同时，虽然writable设置为false，但在configurable为true情况下
    //Object.defineProperty(obj,'newkey',{
    //     value:'chang'
    //})
    //仍然会改变newkey的值
    console.log(obj);
</script>

存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性

var obj={};
    Object.defineProprty(obj,'newkey',{
        get:function () {}|undefined,
        set:function () {}|undefined,
        cinfigurable:true|false,
        enumerable:true|false
    })

注意：在使用getter或setter方法后，不允许使用writable和value这两个属性

• getter/setter

  当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法，默认为undefined

  var obj = {
          newkey: 'hello'
      }
      obj = Object.defineProperty(obj, 'newkey', {
          get () {
              return "你触发了GET函数"
          },
          set () {
              console.log("你触发了SET函数");
          }
      })
      obj.newkey = "hi"
      console.log(obj.newkey);
  

object.definedproperty是VUE响应式原理的核心，兼容性支持IE8+浏览器，这也是vue不能支持IE8以下版本浏览器的原因

get、set

//ie9以上
    var point = {
        _name: null,
        _age: 0,

        set name(name) {
            this._name = name
        },
        get name() {
            return this._name;
        }
    }
    console.log(point.name);
    point.name = '卡卡西';
    console.log(point.name);

    function Point() {
        this._name = '路飞';
    }

    Point.prototype = {
        constructor: Point,
        get username() {
            console.log(this._name);
        },
        set username(name) {
            if (name == '卡卡西') {
                return this._name = "你也上船了？！"
            }
        }
    }
    var point = new Point();
    point.username;
    point.username = "卡卡西";
    point.username;