监听数组的变化

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

转载于:https://www.cnblogs.com/yayaxuping/p/10951738.html