(四) -实现对一个对象所有成员的代理——Object.defineProperty()方法中的描述符功能展示

实现对一个对象所有成员的代理——Object.defineProperty()方法中的描述符功能展示

需求：

const data = {
  foo: 'bar',
  user: {
    name: '张三',
    age: 18
  }
}

// data.foo 被访问了
data.foo

// data.foo 被改变了
data.foo = xxx

// data.user 被改变了
data.user = xxx

// data.user.name 被访问了
data.user.name

实现：

// 普通数据源
var data = {
  name: 'kindeng',
  user: {
    age: 18,
    foo: 'bar'
  },
  count: 0
};

// 对 data 中所有数据成员进行数据劫持（观察）
observe(data);

// data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq
// data.user.name = 'zs'

// console.log(data.user.name)

function observe(data) {
  // 如果 data 数据无效或者 data 不是一个对象，就停止处理
  if (!data || typeof data !== 'object') {
    return;
  }

  // 取出所有属性遍历，对属性成员进行代理（拦截、观察）操作
  Object.keys(data).forEach(function (key) {
    defineReactive(data, key, data[key]);
  });
};

/**
 * data 是数据对象
 * key 是属性名
 * val 当前属性名对应的值
 */
function defineReactive(data, key, val) {
  // observe('kindeng');
  // observe(data.user);
  observe(val); // 监听子属性

  // 'name'
  // 'age'
  // 'foo'
  // 'user'
  // 'count'
  console.log(key)

  Object.defineProperty(data, key, {
    enumerable: true, // 可枚举
    configurable: false, // 不能再define
    get: function () {
      return val;
    },
    set: function (newVal) {
      console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
      val = newVal;
    }
  });
}

// function fn (a) {
//   return {
//     getA () {
//       return a
//     },
//     setA () {
//       a++
//     }
//   }
// }

// const { getA, setA } = fn(100)

// console.log(getA())
// setA()
// setA()
// setA()
// console.log(getA())

最后

以上就是精明抽屉为你收集整理的(四) -实现对一个对象所有成员的代理——Object.defineProperty()方法中的描述符功能展示的全部内容，希望文章能够帮你解决(四) -实现对一个对象所有成员的代理——Object.defineProperty()方法中的描述符功能展示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。