論如何監聽一個對象全部屬性的變化

時間 2019-11-09

標籤 vue 數組瀏覽器 app 函數 this spa prototype code 欄目瀏覽器简体版

原文原文鏈接

前言

本文分爲入門和進階兩部分，建議有經驗的讀者直接閱讀進階部分。vue

本文主要參考了vue和on-change兩個開源庫，若讀者閱讀過它們的源碼能夠直接跳過本文 :)數組

入門

關於Object.defineProperty

首先咱們須要知道如何經過Object.defineProperty這個API來監聽一個對象的變化, 注意註釋裏的內容!瀏覽器

const obj = {};

let val = obj.name;
Object.defineProperty(obj, 'name', {
  set(newVal) {
    console.warn(newVal);
    // 想知道爲何不直接寫成obj.name = newVal嗎, 本身試試吧 :)
    val = newVal;
  },
});

setTimeout(() => {
  // 一秒鐘後咱們將obj這個對象的name屬性賦值爲字符串a, 看看會發生什麼
  obj.name = 'a';
}, 1000);
複製代碼

好了，如今你知道如何經過Object.defineProperty這個API來監聽一個對象的變化了吧，不過你還要注意一些細節app

const obj = {};

let val = obj.name;
Object.defineProperty(obj, 'name', {
  set(newVal) {
    console.warn(newVal);
    val = newVal;
  },
});

setTimeout(() => {
  obj.name = 'a';
  // 因爲咱們沒有設置enumerable描述符，因此它是默認值false, 也就是說obj的name屬性是沒法被枚舉的
  console.warn(obj);
  // 這個很好理解，由於咱們沒有設置get方法
  console.warn(obj.name);
}, 1000);
複製代碼

也就是說咱們須要加上這些函數

Object.defineProperty(obj, 'name', {
  enumerable: true,
  // 想知道爲何要加上configurable描述符嗎，試試delete obj.name吧
  configurable: true,
  get() {
    return val;
  },
  set(newVal) {
    console.warn(newVal);
    val = newVal;
  },
});
複製代碼

另外，數組對象是個特例，mutable的原型方法咱們沒法經過Object.defineProperty來監聽到ui

const obj = {
  val: [],
};

let val = obj.val;
Object.defineProperty(obj, 'val', {
  get() {
    return val;
  },
  set(newVal) {
    console.warn(newVal);
    val = newVal;
  },
});

setTimeout(() => {
  // 沒有任何反應
  obj.val.push('b');
}, 1000);
複製代碼

所以咱們還須要去劫持數組對象mutable的原型方法, 包括push, pop, shift, unshift, splice, sort, reverse, 咱們以push爲例:this

const obj = {
  val: [],
};

const arrayMethods = Object.create(Array.prototype);
arrayMethods.push = function mutator(...args) {
  console.warn(args);
  [].push.apply(this, args);
};

// 若是瀏覽器實現了__proto__, 覆蓋原型對象
if ('__proto__' in {}) {
  val.__proto__ = arrayMethods;
} else {
  // 要是瀏覽器沒有實現__proto__, 覆蓋對象自己的該方法
  Object.defineProperty(val, 'push', {
    value: arrayMethods['push'],
    enumerable: true,
  });
}

setTimeout(() => {
  obj.val.push('b');
}, 1000);
複製代碼

好了，以上就是關於如何經過Object.defineProperty這個API來監聽一個對象的變化的所有。spa

關於Proxy

經過Proxy來監聽對象變化要比Object.defineProperty容易的多prototype

let obj = {};

obj = new Proxy(obj, {
  set(target, prop, newVal) {
    console.warn(newVal);
    // 你也可使用Reflect.set()
    target[prop] = newVal;
    return true;
  },
});

setTimeout(() => {
  // 一秒鐘後咱們將obj這個對象的name屬性賦值爲字符串a
  obj.name = 'a';
  // 顯然咱們不須要更多的設置
  console.warn(obj);
  console.warn(obj.name);
}, 1000);
複製代碼

一樣的對於數組對象的監聽也沒有那麼多hacky的味道code

const obj = {
  val: [],
};

obj.val = new Proxy(obj.val, {
  set(target, prop, newVal) {
    const oldVal = target[prop];
    if (oldVal !== newVal) {
      console.warn(oldVal, newVal);
    }

    target[prop] = newVal;
    
    return true;
  },
});

setTimeout(() => {
  obj.val.push('a');
}, 1000);
複製代碼

好了，以上就是關於如何經過Proxy來監聽一個對象的變化的所有。

進階

關於分類和遞歸

假如咱們如今有這樣一個對象obj, 如何監聽它的全部屬性呢

let obj = {
  b: true,
  o: { name: 'obj' },
  a: ['a', 'b', 'c'],
  odeep: {
    path: {
      name: 'obj deep',
      value: [],
    },
  },
};
複製代碼

咱們能夠分類討論，先考慮基本類型的變量以及Object類型的變量

function isPlainObject(obj) {
  return ({}).toString.call(obj) === '[object Object]';
}

// 首先先定義一個劫持對象屬性的通用函數
function defineReactive(obj, key, val) {
  if (isPlainObject(val)) {
    observe(val);
  }

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      return val;
    },

    set(newVal) {
      console.warn(newVal);
      
      val = newVal;
      // 賦的新值不爲基本類型, 也一樣須要劫持
      if (isPlainObject(newVal)) {
        observe(newVal);
      }
    },
  });
}

// 遍歷全部屬性並劫持
function observe(obj) {
  Object.keys(obj).forEach((key) => {
    defineReactive(obj, key, obj[key]);
  });
}

observe(obj);
setTimeout(() => {
  // 顯然不會有什麼問題
  obj.b = false;
  obj.o.name = 'newObj';
  obj.odeep.path.name = 'newObj deep';

  obj.b = { name: 'obj created' };
  obj.b.name = 'newObj created';
}, 1000);
複製代碼

咱們再來考慮Array類型的變量

function defineReactive(obj, key, val) {
  if (isPlainObject(val)) {
    observe(val);
  } else if (Array.isArray(val)) {
    dealAugment(val);
    observeArray(val);
  }

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      return val;
    },

    set(newVal) {
      console.warn(newVal);
      
      val = newVal;
      if (isPlainObject(newVal)) {
        observe(newVal);
      } else if (Array.isArray(newVal)) {
        dealAugment(newVal);
        observeArray(newVal);
      }
    },
  });
}

function dealAugment(val) {
  const arrayMethods = Object.create(Array.prototype);
  // 咱們以push方法爲例
  arrayMethods.push = function mutator(...args) {
    console.warn(args);
    [].push.apply(this, args);
  };

  // 若是瀏覽器實現了__proto__, 覆蓋原型對象
  if ('__proto__' in {}) {
    obj.val.__proto__ = arrayMethods;
  } else {
    // 要是瀏覽器沒有實現__proto__, 覆蓋對象自己的該方法
    Object.defineProperty(obj.val, 'push', {
      value: arrayMethods['push'],
      enumerable: true,
    });
  }
}

function observeArray(obj) {
  obj.forEach((el) => {
    if (isPlainObject(el)) {
      observe(el);
    } else if (Array.isArray(el)) {
      observeArray(el);
    }
  });
}

observe(obj);
setTimeout(() => {
  // 顯然不會有什麼問題
  obj.a.push('d');
  obj.odeep.path.value.push(1);

  obj.b = ['a'];
  obj.b.push('b');
}, 1000);
複製代碼

顯然，Object.defineProperty的版本有些冗長，那麼Proxy的版本如何呢?

const handler = {
  get(target, prop) {
    try {
      // 還有比這更簡潔的遞歸嗎
      return new Proxy(target[prop], handler);
    } catch (error) {
      return target[prop]; // 或者是Reflect.get
    }
  },

  set(target, prop, newVal) {
    const oldVal = target[prop];
    if (oldVal !== newVal) {
      console.warn(oldVal, newVal);
    }

    target[prop] = newVal;
    
    return true;
  },
};

obj = new Proxy(obj, handler);

setTimeout(() => {
  // 試試吧，太難以想象了!
  obj.b = false;
  obj.o.name = 'newObj';
  obj.odeep.path.name = 'newObj deep';

  obj.b = { name: 'obj created' };
  obj.b.name = 'newObj created';

  obj.a.push('d');
  obj.odeep.path.value.push(1);

  obj.b = ['a'];
  obj.b.push('b');
  obj.b[0] = 'new a';
}, 1000);
複製代碼