// 1、定义变量arrayProto接收Array的prototype
// 2、定义变量arrayMethods，通过Object.create()方法继承arrayProto
// 3、重新封装数组中push，pop等常用方法。（这里我们只封装我们需要监听的数组的方法，并不做JavaScript原生Array中原型方法的重写的这么一件暴力的事情）
// 4、其他js数组变化监听方法
// 1,获得数组的原型
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const newArrProto = []
const method = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
method.forEach(function (method) {
// 原生Array的原型方法
let original = arrayMethods[method];
// 将push，pop等方法重新封装并定义在对象newArrProto的属性上
// 这里需要注意的是封装好的方法是定义在newArrProto的属性上而不是其原型属性
// newArrProto.__proto__ 没有改变
newArrProto[method] = function mutator() {
console.log('监听到数组的变化啦！');
// 调用对应的原生方法并返回结果（新数组长度）
return original.apply(this, arguments);
}
});
// 将我们要监听的数组的原型指针指向上面定义的空数组对象
// newArrProto的属性上定义了我们封装好的push，pop等方法
var list = [1, 2]
list.__proto__ = newArrProto;
list.push(3); // 监听到数组的变化啦！ 3
// 这里的list2没有被重新定义原型指针，所以这里会正常执行原生Array上的原型方法
let list2 = [1, 2];
list2.push(3); // 3
// 另外还有es6实现的方式
class NewArray extends Array {
constructor(...args) {
super()
}
push(...args) {
console.log("监听数组的变化")
return super.push(...args)
}
}
let list3 = [1, 2];
let arr = new NewArray(...list3);
console.log(arr)
// (2) [1, 2]
arr.push(3);
// 监听到数组的变化啦！
console.log(arr)
// (3) [1, 2, 3]