javascript数组上的getter/setter? [英] Getter/setter on javascript array?

问题描述

有没有办法在数组上获得获取/设置行为?我想像这样:

var arr = ['one', 'two', 'three'];var _arr = new Array();for (var i = 0; i < arr.length; i++) {arr[i].__defineGetter__('value',功能(索引){//做点什么返回_arr[索引];});arr[i].__defineSetter__('value',函数(索引，val){//做点什么_arr[索引] = val;});}

解决方案

Using 代理，你可以得到想要的行为:

var _arr = ['one', 'two', 'three'];var accessCount = 0;函数 doSomething() {访问计数++；}var arr = 新代理(_arr，{获取:函数(目标，名称){做点什么();返回目标[名称];}});功能打印(值){document.querySelector('pre').textContent += value + '\n';}打印(访问计数)；//0打印(arr [0])；//'一'打印(arr [1])；//'二'打印(访问计数)；//2打印(arr.length)；//3打印(访问计数)；//3打印(arr.constructor)；//'function Array() { [本机代码] }'

<pre></pre>

Proxy 构造函数将创建一个对象包装我们的 Array 并使用称为陷阱的函数来覆盖基本行为.get 函数将被调用以进行任何 属性查找，并在返回值之前调用 doSomething().

代理是 ES6 的一项功能，在 IE11 或更低版本中不受支持.请参阅浏览器兼容性列表.>

Is there a way to get a get/set behaviour on an array? I imagine something like this:

var arr = ['one', 'two', 'three'];
var _arr = new Array();

for (var i = 0; i < arr.length; i++) {
    arr[i].__defineGetter__('value',
        function (index) {
            //Do something
            return _arr[index];
        });
    arr[i].__defineSetter__('value',
        function (index, val) {
            //Do something
            _arr[index] = val;
        });
}

解决方案

Using Proxies, you can get the desired behavior:

var _arr = ['one', 'two', 'three'];

var accessCount = 0;
function doSomething() {
  accessCount++;
}

var arr = new Proxy(_arr, {
  get: function(target, name) {
    doSomething();
    return target[name];
  }
});

function print(value) {
  document.querySelector('pre').textContent += value + '\n';
}

print(accessCount);      // 0
print(arr[0]);           // 'one'
print(arr[1]);           // 'two'
print(accessCount);      // 2
print(arr.length);       // 3
print(accessCount);      // 3
print(arr.constructor);  // 'function Array() { [native code] }'

<pre></pre>

The Proxy constructor will create an object wrapping our Array and use functions called traps to override basic behaviors. The get function will be called for any property lookup, and doSomething() before returning the value.

Proxies are an ES6 feature and are not supported in IE11 or lower. See browser compatibility list.

这篇关于javascript数组上的getter/setter?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！