Question

如何监听JS数组的变化

Answer 1

javascript监听数组变化思路
1、定义变量arrayProto接收Array的prototype
2、定义变量arrayMethods，通过Object.create()方法继承arrayProto
3、重新封装数组中push，pop等常用方法。（这里我们只封装我们需要监听的数组的方法，并不做JavaScript原生Array中原型方法的重写的这么一件暴力的事情）
4、其他js数组变化监听方法
js监听数组变化实现方法
这里我们首先需要确定的一件事情就是，我们只需要监听我们需要监听的数据数组的一个变更，而不是针对原生Array的一个重新封装。
其实代码实现起来会比较简短，这一部分代码我会直接带着注释贴出来
// 获取Array原型const arrayProto = Array.prototype;const arrayMethods = Object.create(arrayProto);const newArrProto = [];
[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => { // 原生Array的原型方法
let original = arrayMethods[method]; // 将push，pop等方法重新封装并定义在对象newArrProto的属性上
// 这里需要注意的是封装好的方法是定义在newArrProto的属性上而不是其原型属性
// newArrProto.__proto__ 没有改变
newArrProto[method] = function mutator() { console.log('监听到数组的变化啦！'); // 调用对应的原生方法并返回结果（新数组长度）
return original.apply(this, arguments);
}
})let list = [1, 2];// 将我们要监听的数组的原型指针指向上面定义的空数组对象// newArrProto的属性上定义了我们封装好的push，pop等方法list.__proto__ = newArrProto;
list.push(3); // 监听到数组的变化啦！ 3// 这里的list2没有被重新定义原型指针，所以这里会正常执行原生Array上的原型方法let list2 = [1, 2];
list2.push(3); // 3

目前为止我们已经实现了数组的监听。从上面我们看出，当我们将需要监听的数组的原型指针指向newArrProto对象上的时候(newArrProto的属性上定义了我们封装好的push，pop等方法)。这样做的好处很明显，不会污染到原生Array上的原型方法。

Answer 2

　　流行的MVVM的JS库/框架都有共同的特点就是数据绑定，在数据变更后响应式的自动进行相关计算并变更DOM展现。所以这个问题也可以理解为如何实现MVVM库/框架的数据绑定。
　　常见的数据绑定的实现有脏值检测，基于ES5的getter和setter，以及ES已被废弃的Object.observe，和ES6中添加的Proxy。