配列でget/set動作を取得する方法はありますか？私はこのようなものを想像します：
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;
});
}
プロキシを使用すると、目的の動作を得ることができます。
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>Proxyコンストラクターは、配列をラップするオブジェクトを作成し、トラップと呼ばれる関数を使用して基本的な動作をオーバーライドします。このget関数は、プロパティルックアップのために、値を返す前に呼び出されます。doSomething()
プロキシはES6の機能であり、IE11以下ではサポートされていません。ブラウザの互換性リストを参照してください。
配列アクセスは、通常のプロパティアクセスと同じです。array[0]を意味するarray['0']ので、名前を使用してプロパティを定義し、それを'0'介して最初の配列アイテムへのアクセスをインターセプトできます。
ただし、それでは、短い、多かれ少なかれ固定長の配列を除くすべての配列で実用的ではありません。「たまたま整数であるすべての名前」のプロパティを一度に定義することはできません。
JohnResigの記事JavaScriptGettersAnd Settersで調べましたが、彼のプロトタイプの例はうまくいきませんでした。いくつかの代替案を試した後、私はうまくいくように見えるものを見つけました。Array.prototype.__defineGetter__次のように使用できます。
Array.prototype.__defineGetter__("sum", function sum(){
var r = 0, a = this, i = a.length - 1;
do {
r += a[i];
i -= 1;
} while (i >= 0);
return r;
});
var asdf = [1, 2, 3, 4];
asdf.sum; //returns 10
ChromeとFirefoxで働いてくれました。
お役に立てば幸いです。
Object.extend(Array.prototype, {
_each: function(iterator) {
for (var i = 0; i < this.length; i++)
iterator(this[i]);
},
clear: function() {
this.length = 0;
return this;
},
first: function() {
return this[0];
},
last: function() {
return this[this.length - 1];
},
compact: function() {
return this.select(function(value) {
return value != undefined || value != null;
}
);
},
flatten: function() {
return this.inject([], function(array, value) {
return array.concat(value.constructor == Array ?
value.flatten() : [value]);
}
);
},
without: function() {
var values = $A(arguments);
return this.select(function(value) {
return !values.include(value);
}
);
},
indexOf: function(object) {
for (var i = 0; i < this.length; i++)
if (this[i] == object) return i;
return -1;
},
reverse: function(inline) {
return (inline !== false ? this : this.toArray())._reverse();
},
shift: function() {
var result = this[0];
for (var i = 0; i < this.length - 1; i++)
this[i] = this[i + 1];
this.length--;
return result;
},
inspect: function() {
return '[' + this.map(Object.inspect).join(', ') + ']';
}
}
);
JavaScript配列のゲッターとセッターを定義することができます。ただし、アクセサと値を同時に持つことはできません。Mozillaのドキュメントを参照してください：
ゲッターをプロパティにバインドし、そのプロパティに実際に値を保持させることはできません
したがって、配列のアクセサーを定義する場合は、実際の値の2番目の配列が必要です。次の例はそれを示しています。
//
// Poor man's prepare for querySelector.
//
// Example:
// var query = prepare ('#modeler table[data-id=?] tr[data-id=?]');
// query[0] = entity;
// query[1] = attribute;
// var src = document.querySelector(query);
//
var prepare;
{
let r = /^([^?]+)\?(.+)$/; // Regular expression to split the query
prepare = function (query, base)
{
if (!base) base = document;
var q = []; // List of query fragments
var qi = 0; // Query fragment index
var v = []; // List of values
var vi = 0; // Value index
var a = []; // Array containing setters and getters
var m; // Regular expression match
while (query) {
m = r.exec (query);
if (m && m[2]) {
q[qi++] = m[1];
query = m[2];
(function (qi, vi) {
Object.defineProperty (a, vi, {
get: function() { return v[vi]; },
set: function(val) { v[vi] = val; q[qi] = JSON.stringify(val); }});
})(qi++, vi++);
} else {
q[qi++] = query;
query = null;
}
}
a.toString = function () { return q.join(''); }
return a;
}
}
コードは3つの配列を使用します。
アクセサを含む配列が呼び出し元に返されます。set配列要素に値を割り当ててaが呼び出されると、プレーン値とエンコードされた値を含む配列が更新されます。呼び出されるとget、プレーンな値だけが返されます。そしてtoString、エンコードされた値を含むクエリ全体を返します。
しかし、他の人がすでに述べているように、これは、配列のサイズが一定である場合にのみ意味があります。配列の既存の要素を変更することはできますが、要素を追加することはできません。
内部オブジェクトの新しいクラスを作成してみませんか？
var a = new Car();
function Car()
{
// here create the setters or getters necessary
}
その後、
arr = new Array[a, new Car()]
私はあなたがその考えを理解したと思います。
配列の要素ごとにセッターを作成することは可能ですが、1つの制限があります。初期化された領域の外側にあるインデックスの配列要素を直接設定することはできません（例myArray[2] = ... // wouldn't work if myArray.length < 2）。Array.prototype関数を使用すると機能します。（例：プッシュ、ポップ、スプライス、シフト、アンシフト）これを実現する方法の例をここに示します。
これが私のやり方です。プロトタイプの作成を微調整する必要があります（バージョンから少し削除しました）。しかし、これにより、他のクラスベース言語で慣れているデフォルトのゲッター/セッターの動作が得られます。ゲッターを定義し、セッターを定義しないということは、要素への書き込みが無視されることを意味します...
お役に立てれば。
function Game () {
var that = this;
this._levels = [[1,2,3],[2,3,4],[4,5,6]];
var self = {
levels: [],
get levels () {
return that._levels;
},
setLevels: function(what) {
that._levels = what;
// do stuff here with
// that._levels
}
};
Object.freeze(self.levels);
return self;
}
これにより、次の期待される動作が得られます。
var g = new Game()
g.levels
/// --> [[1,2,3],[2,3,4],[4,5,6]]
g.levels[0]
/// --> [1,2,3]
dmvaldmanからの批判を取り上げる：今では書くことは不可能なはずです。私はコードを1）非難された要素を使用しない（__ defineGetter __）、2）レベル要素への書き込み（つまり、制御されていない書き込み）を受け入れないように書き直しました。セッターの例が含まれています。（マークダウンのため、__ defineGetterにスペースを追加する必要がありました）
dmvaldmansリクエストから：
g.levels[0] = [2,3,4];
g.levels;
/// --> [[1,2,3],[2,3,4],[4,5,6]]
//using setter
g.setLevels([g.levels, g.levels, 1,2,3,[9]]);
g.levels;
/// --> [[[1,2,3],[2,3,4],[4,5,6]],[[1,2,3],[2,3,4],[4,5,6]], ....]
//using setLevels
g.setLevels([2,3,4]);
g.levels;
/// --> [2,3,4]
この答えは、プロキシに基づくソリューションの単なる拡張です。getのみが言及されているという点で、プロキシを使用したソリューションを参照してください。ただし、ここで示しているように、setを使用することもできます。
注意：セットの3番目の引数は値を運ぶことができます...
コードは自明です。
var _arr = ['one', 'two', 'three'];
var accessCount = 0;
function doSomething() {
accessCount++;
}
var arr = new Proxy(_arr, {
get: function(target, name) {
doSomething();
return target[name];
},
set: function(target, name, val) { doSomething(); target[name] = val; }
});
function print(value) {
document.querySelector('pre').textContent += value + '\n';
}
print(accessCount); // 0
print(arr[0]); // 'one'
print(accessCount); // 1
arr[1] = 10;
print(accessCount); // 2
print(arr[1]); // 10
に追加することで、好きなメソッドをに追加できArrayますArray.prototype。これは、ゲッターとセッターを追加する例です
Array.prototype.get = function(index) {
return this[index];
}
Array.prototype.set = function(index, value) {
this[index] = value;
}