监听数组的变化

// 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]