JS：是否可以在数组成员上定义 getter 函数？

Question

我还没有找到关于这个主题的任何信息，如果这是一个非常奇怪的问题，请原谅我。

我知道 JS 允许将属性定义为访问器，这意味着它们在使用时会触发 getter 或 setter 函数。

我的问题是是否可以对数组成员执行相同的操作。

例如，我想要一个 setter 函数在这样分配时触发：

myObj[2] = 2 /* set function(value, index) { console.log(value + index) } */

如果这不可能，是否有任何其他方法可以扩展 [] 操作？

Answer 1

您可以做的是将对象包裹在 ES6 proxy.

中

var a = new Proxy({}, {get:function(target, name){return 42;}});

console.log(a[0]); // ==> 42

然后您可以捕获并向 get/set 操作添加处理。

Answer 2

基本上，除非您对数组进行子类化，否则您不能。

即使是子类化，数组也比对象动态得多。与对象不同，它们会一直添加和删除项目，并且您必须能够动态地将 getter 和 setter 附加到每个属性（键）以及添加的项目。不实用。如果数组被子分类，您可以使用 getter 和 setter 修改它的长度属性并尝试从更改到它的长度属性观察数组，但这需要大量的数组差异。

我想对于数组最好使用 ES6 代理对象。您可以按如下方式进行；

function ProxyMaker(a){
    return new Proxy(a, {
        get: function(target, property, receiver) {
            console.log(target+"'s "+property+" property has been accessed");
            return target[property];
        },
        set: function(target, property, value, receiver) {
            console.log(target+"'s "+property+" property has been modified");
            return target[property] = value;
        },
        has: function(target, property) {
            console.log(target+"'s "+property+" property has been checked");
            return Reflect.has(target, property); // 10x to @Bergi
        }
    });
}

var p = ProxyMaker([]);
p[0] = 1;
p[0];
p.push(10);
p.unshift(7);
console.log(JSON.stringify(p))

Answer 3

您有两种访问数组的方法：

被视为具有命名 setter/getter var x = pojoArray['firstName'];
通过数值索引var x = pojoArray[10];

因此，在我看来，您有两种方法可以解决这个问题：

错误的方式： 如果将数组视为对象，则可以手动循环整个数组，但在像对象一样使用数组时应避免这种情况，因为无法保证顺序。请参阅以下 post： Loop through an array in JavaScript

其他选项： 根据您的要求，另一种方法是通过数字索引访问它。您可以创建某种辅助函数，这些函数必须将 getter 和 setter 键映射到数组中的正确索引，并确保该键只使用一次。

请注意，我没有声明 'good way' 来满足您的要求。如果可能的话，我会尽量避免使用这两种工作流程中的任何一种，因为它们很容易出错并在以后引起麻烦。

Answer 4

如果知道值何时更改很重要，则需要创建显式 setters 和 getter。

如建议的那样，代理是一个不错的选择（如果可用）。但它可能不适用于所有浏览器。在这种情况下，您可以创建一个新对象，在设置时通知您。

这种方法有很多取舍，实现数组本机提供的所有内容需要大量工作。下面的示例非常简单，但它确实提供了类似数组的交互和要收听的 setter 事件。

var observableArray = function(eventName) {
    var myArray = [];

    var api = {};

    api.get = function(index) {
        if (myArray.length && typeof index === 'number') {
            return myArray[index];
        }
    };

    api.set = function(item, index) {
        if (typeof index === 'number') {
            myArray[index] = item;
        }
        else {
            index = myArray.push(item) - 1;

        }
        var event = new CustomEvent(eventName, {detail: index});
        document.dispatchEvent(event);
        return index;
     };
    api.getLength = function() {
        return myArray.length;
    };

    api.empty = function() {
        myArray.splice(0, myArray.length);
    };

    return api;
};

var arrayListener = document.addEventListener('foo', function(e)     {console.log('The index modified: ',e.detail);},false);

var test = new observableArray('foo');
test.set('bar');
console.log('The # of items: ', test.getLength());
test.empty();
console.log('The # of items after empty: ', test.getLength());

如果您只需要一种方法来在设置数组值时使某事发生，您可以扩展数组以具有触发回调的设置方法。不过，是否使用它取决于程序员。

    Array.prototype.set = function(item, index, callback) {
    if (typeof index === 'number') {
        this[index] = item;
    }
    else {
        index = this.push(item) - 1;

    }
    if (callback) {
        callback.apply(this, [index]);
    }
    return index;
};

var test2 = [];
test2.set('foo', 4, function(i) {
    console.log('Callback value: ', i);
    console.log('The array: ', this);
});

JS：是否可以在数组成员上定义 getter 函数？

JS: is it possible to define getter functions on array members?

javascript

arrays

oop

getter