IFE2017，动态数据绑定（一）学习笔记

getter和setter的三种设置方式

1.在对象定义中设置

var test = {
  o: 'a',
  get o (){
    console.log('获取属性o的值');
    return this._o;  //避免使用o造成死循环
  },
  set o (val){
    console.log('设置属性o的值为'+val);
    this._o = val;
  }
}

2.利用Object.defineProperty进行设置

var test = {
  o: 'a'
};

Object.defineProperty(test,'o',{
  get: function (){
    console.log('获取属性o的值');
    return this._o;
  },
  set: function (val){
    console.log('设置属性o的值为'+val);
    this._o = val;
  }
});

3.__defineGetter__和__defineSetter__
不推荐使用，将会逐渐被浏览器淘汰故不再阐述

对比

1.第一种只能在定义时使用，不能用在一个已经存在的对象上

2.显然在属性非常多的时候，想给所有属性设置getter和setter的话用第一种太繁琐，但第二种可以用fon-in遍历对象取得key来一次性设置。

var test = {
  a: 'a',
  b: 'b',
  c: 'c'
};

for (let key in test){
  let val = test[key];  //避免在getter和setter里边使用key变量造成死循环
  // let newKey = '_'+key; 如果像这样采用和前面例子同样的做法，是有问题的，this['_a']这种写法不代表this['a']
  Object.defineProperty(test,key,{
    get: function (){
      console.log('获取属性'+key+'的值');
      return val;
    },
    set: function (newVal){
      console.log('设置属性'+key+'的值为'+newVal);
      val = newVal;
    }
  });
};

参考：https://zhuanlan.zhihu.com/p/25672454