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