类似vue2监控数组和对象中数据变化的实现

const callBack = (newval, oldval) => {
	console.log(newval, oldval)
}

const OP = Object.prototype;
const types = {
	obj: '[object Object]',
	array: '[object Array]'
}
const OAM = ['push', 'pop', 'shift', 'unshift', 'short', 'reverse', 'splice']

export default class Jsonob {
	constructor(obj, cb = callBack) {
		if (OP.toString.call(obj) !== types.obj && OP.toString.call(obj) !== types.array) {
			console.log('请传入一个对象或数组');
			return false;
		}
		this._callback = cb;
		this.observe(obj);
	}
	observe(obj, path) {
		if (OP.toString.call(obj) === types.array) {
			this.overrideArrayProto(obj, path);
		}
		Object.keys(obj).forEach((key) => {
			let oldVal = obj[key];
			let pathArray = path && path.slice();
			if (pathArray) {
				pathArray.push(key);
			} else {
				pathArray = [key];
			}
			Object.defineProperty(obj, key, {
				get: function() {
					return oldVal;
				},
				set: (function(newVal) {
					if (oldVal !== newVal) {
						if (OP.toString.call(newVal) === '[object Object]') {
							this.observe(newVal, pathArray);
						}
						this._callback(newVal, oldVal, pathArray)
						oldVal = newVal
					}
				}).bind(this)
			})
			if (OP.toString.call(obj[key]) === types.obj || OP.toString.call(obj[key]) === types.array) {
				this.observe(obj[key], pathArray)
			}
		}, this)
	}
	overrideArrayProto(array, path) {
		// 保存原始 Array 原型  
		var originalProto = Array.prototype,
			// 通过 Object.create 方法创建一个对象，该对象的原型是Array.prototype  
			overrideProto = Object.create(Array.prototype),
			self = this,
			result;
		// 遍历要重写的数组方法  
		OAM.forEach((method) => {
			Object.defineProperty(overrideProto, method, {
				value: function() {
					var oldVal = this.slice();
					//调用原始原型上的方法  
					result = originalProto[method].apply(this, arguments);
					//继续监听新数组  
					self.observe(this, path);
					self._callback(this, oldVal, path);
					return result;
				}
			})
		});
		// 最后 让该数组实例的 __proto__ 属性指向 假的原型 overrideProto  
		array.__proto__ = overrideProto;
	}
	let arr = [1, 2, 3, 4]
	let newarr = new Jsonob(arr, () => {
		console.log('running in trigger')
	})
	// console.log(newarr)
	newarr.push('5')

查看原文