监听数组的变化

// 一、定义变量arrayProto接收Array的prototype

// 二、定义变量arrayMethods，经过Object.create()方法继承arrayProto

// 三、从新封装数组中push，pop等经常使用方法。（这里咱们只封装咱们须要监听的数组的方法，并不作JavaScript原生Array中原型方法的重写的这么一件暴力的事情）

// 四、其余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]