自定義類似於ES6類的陣列的吸氣器

Question

我想創建一個Class，它也是一個常規Array的包裝，但是我希望在通過索引引用類實例上的項目時發生一些自定義行爲。

演示我想達到的目標：

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確實是你在找什麼。看看這個例子：

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"

無論你在get陷阱回報將是評估proxy[index]的結果，因此，例如，而不是返回Reflect.get(target, property)你可以返回一些對象。

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

感謝大家誰貢獻。

快樂編碼:)