カスタム配列のようなES6クラスのゲッター

Question

ArrayのラッパーでもあるClassを作成したいと思いますが、インデックスを使用してクラスのインスタンスの項目を参照するときにカスタム動作が必要になります。私が達成したいものをデモする

：

class Custom { 
    constructor (arr) { 
     this.arr = arr; 
    } 
    method (str) { 
     this.arr.forEach(item => { 
      console.log(`${item} ${str}`); 
     }) 
    } 
    [Magic.here]() { 
     // this part should invoke the constructor of this class with a single item of the array passed into it as an array of one as argument. 
    } 
} 

let c = new Custom(['something', 'other thing', 'hello?']); 

c[1].method('exists?') // -> other thing exists? 

は今、私はそれが可能であることを完全に確認していません。私はextend ing Arrayによって私自身のあまりにも偉大な解決策を思いついた。 Proxyも私の頭に浮かんだが、解決策を見つけることができなかった。

それは可能なのでしょうかもしそうなら、最良の方法は何ですか？

Answer 1

はい、あなたがプロキシを探しています：

const isArrayIndex = str => (str >>> 0) + '' === str && str < 4294967295; 
const arrayCustomizer = { 
    get(target, property, receiver) { 
     var el = Reflect.get(target, property, receiver); 
     if (isArrayIndex(property) && el != null) 
      el = new Custom(el); 
     return el; 
    } 
} 
class Custom { 
    constructor(v) { 
     this.value = v; 
    } 
    valueOf() { 
     return this.value; 
    } 
    method(arg) { 
     console.log(this.value + " " + arg.replace("?", "!")); 
    } 
} 

let c = new Proxy(['something', 'other thing', 'hello?'], arrayCustomizer); 
c[1].method('exists?') 

Answer 2

Proxy本当にあなたが探しているものです。この例を見てみましょう：例の代わりに返すReflect.get(target, property)のためにあなたには、いくつかのオブジェクトを返すことができるようにあなたがgetトラップに戻るどのような

const array = ['a', 'b', 'c']; 
 
const proxy = new Proxy(array, { 
 
    get(target, property) { 
 
    console.log(`Proxy get trap, property ${property}`); 
 
    return Reflect.get(target, property); 
 
    }, 
 
}); 
 

 
proxy[1]; // logs "Proxy get trap, property 1"

は、proxy[index]を評価した結果となります。

Answer 3

をこれらの答えを読んだと開削した後、いくつかのより多くの私はProxyを使用して、完全な解決策を考え出すことができました。私はインターネット上の誰かが私のようなクレイジーなアイデアを思いつき、簡単な解決策を望む場合に備えて、ここにこれを掲示しています。

私は、簡単な説明のためのコード注釈付き：貢献誰に

/** 
 
* The class I want to proxy on 
 
*/ 
 

 
class Random { 
 
    constructor (arr) {this.arr=arr} 
 
    method() {this.arr.forEach(el=>{console.log(el)})} 
 
} 
 

 
// Creating a separate function for initializing the class. This will have to be used instead of the regular class' constructor if we want to use the proxy as well. 
 

 
function init (arr) { 
 
    // Creating a new instance of random class based on arr, passing it into proxy 
 
    var p = new Proxy(new Random(arr), { 
 
    // Modifying the get function on handler 
 
    get: function (target, name) { 
 
     // Checking if the name is a numeric reference 
 
     if (typeof name === 'string' && /^-?\d+$/.test(name)) { 
 
     // ... it is, so we call init with the selected item in the array on our class object 
 
     let r = init([target.arr[name]]); 
 
     // finally we return the new proxy from init 
 
     return r; 
 
     } 
 
     else { 
 
     // otherwise we are looking at a direct reference, maybe to a method or scope variable, like random.method() 
 
     return target[name] 
 
     } 
 
    } 
 
    }) 
 
    // we return the proxy 
 
    return p; 
 
} 
 

 
let random = init(['hello', 'amazing', 'world']) 
 

 
console.log(random[0]); // proxy reference to array of hello 
 
console.log(random[1]); // proxy reference to array of amazing 
 

 
random.method(); // logs out all 3 items of array 
 
random[2].method(); // logs out third item

感謝を。

ハッピーコーディング:)