javascript - 将代理与普通数组一起使用

Question

考虑这段代码：

app.mediaLibrary = new function MediaLibrary() {
    var self = this;

    self.media = new Proxy([], {
        set(target, key, value) {
            console.log(`Setting value ${key} as ${value}`)
            if (!(value instanceof self.Media))
                throw new Error(`${value} is not instance of Media.`)
            target[key] = value;
            return true
        },
        get (target, key) {
            console.log(`Getting value ${key} as ${target[key]}`)
            return target[key]
        }
    });

    self.Media = function Media(file, fileReader) {
        this.src = fileReader.result;
        this.file = file;
    }

    return self;
}

每当我app.mediaLibrary.media.push(new app.mediaLibrary.Media("", "")) 在控制台中调用时，我都会看到：

Getting value push as function push() { [native code] }
Getting value length as 0
Setting value 0 as [object Object]
Setting value length as 1
Uncaught Error: 1 is not instance of Media.(…)

我明白为什么我会看到这个，但我该如何围绕它进行编码？看来我的陷阱是由内部（push，length）以及外部调用（[0]=...）触发的，我不知道如何区分它们。有任何想法吗？

Answer 1

我想你问错问题了。这不是关于内部与外部调用，而是关于您正在代理的特定对象：一个数组。

你可以满足三个条件：

1. 长度可以设置为任何值（无论如何只有数组会处理这个）
2. 数字属性只能设置为 Media 实例。
3. 所有其他属性都禁止使用。

你可以这样写：

app.mediaLibrary = new function MediaLibrary() {
    var self = this;

    self.media = new Proxy([], {
        set(target, key, value) {
            console.log(`Setting value ${key} as ${value}`)

            // Check if this is a valid array index
            // See http://www.ecma-international.org/ecma-262/6.0/#sec-array-exotic-objects
            if (String(key >>> 0) === key && (key >>> 0) != Math.pow(2, 32) - 1) {
                if (!(value instanceof self.Media))
                    throw new Error(`${value} is not instance of Media.`);
            } else if(key !== 'length') {
                throw new Error(`${key} may not be written to.`);
            }
            target[key] = value;
            return true
        },
        get (target, key) {
            console.log(`Getting value ${key} as ${target[key]}`)
            return target[key]
        }
    });

    self.Media = function Media(file, fileReader) {
        this.src = fileReader.result;
        this.file = file;
    }

    return self;
}

如果你真的需要区分.push和[0]=...，那么不，它做不到。