折叠何宝莹

JavaScript 监听数组变化 | 手写数组类

// 实现一个可观察的数组类(ObArray),可以监听push、unshift操作,但其余函数保持与原生Array一致
// 其余方法,如pop、shift、indexOf等等无改动
这是我的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class ObArray extends Array{
constructor(...args) {
super(...args)
}
push(...args){
console.log('push '+ args)
return super.push(...args);

}
unshift (...args) {
console.log('unshift '+ args)
return super.unshift(...args);
}
}

面试官:

那个数组类的问题是我最近刚想的,还有不少纰漏。。。没写出我期望的考点~所以就。。。不评论了

那就是不能使用继承,而是自己包装一个数组类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
const newArrProto = [];
[
'push',
'unshift',
].forEach(method => {
// 原生Array的原型方法
let original = arrayMethods[method];

newArrProto[method] = function mutator(e) {
console.log(method, e);

// 调用对应的原生方法并返回结果(新数组长度)
return original.apply(this, arguments);
}
})
let arr = [];
arr.__proto__ = newArrProto;


arr.push('foo') // => 打印:'push foo'
arr.unshift('bar') // => 打印:'unshift bar'
arr.pop() // => 无打印
arr.shift() // => 无打印

何宝莹 wechat
扫一扫关注我的公众号