描述器钩子的使用 defineProperty

2017-09-09  本文已影响0人  Gary嘉骏
function phone(mes,call) {
    this.mes = mes;
    this.call = call;
  }
  phone.prototype.turn_on = function () {
    console.log('打开');
  };
  phone.prototype.close = function () {
    console.log('关闭');
    return this;
  };
  let hh = new phone('短信','电话');
  var set1 = Object.getOwnPropertyDescriptor(hh,'mes'); //获得当前设置 ,防止覆盖用户原先的设定
  for( var prop in hh) {
     if(set1.configurable) { //若可以重新设置,则添加钩子
         defineReactive(hh,prop,hh[prop]);
    }
  }
  function defineReactive(obj, key, val) {
    var set1 = Object.getOwnPropertyDescriptor(obj,key);
    Object.defineProperty(obj,key,{
      enumerable: true,
      configurable: true,
      set: function(newVal) {
        if(set1.set) {
          set1.set.call(obj,newVal);
        } else {
          val = newVal;
        }
        console.log(456);
      },
      get: function() {
        var value = set1 && set1.get? set1.get.call(obj):val;
        return value;
      }
    });
  }

  hh.mes = 666
  console.log(Reflect.ownKeys(hh));
  console.log(Object.getPrototypeOf(hh));
  console.log(Object.getOwnPropertyDescriptors(hh));//返回指定对象所有自身属性(非继承属性)的描述对象。
  console.log(Object.getOwnPropertyDescriptor(hh,'mes'));//返回某个对象属性的描述对象
  console.log(new phone('短信','电话').close());

如果觉得文章对你有点用的话,麻烦拿出手机,这里有一个你我都有的小福利(每天一次): 打开支付宝首页搜索“8601304”,即可领红包。谢谢支持

上一篇下一篇

猜你喜欢

热点阅读