Có thể thay đổi mục tiêu của Proxy không?

Question

Tôi có một lớp thực hiện giao diện XMLHttpRequest. Tùy thuộc vào URL được chuyển đến open(), tôi có thể xác định xem có nên sử dụng XMLHttpRequest mặc định hay triển khai tùy chỉnh của tôi hay không. Ý tưởng của tôi là sử dụng một proxy để làm điều này:

let xhr = new XHRProxy(); 
xhr.open('GET', 'http://blah'); // Decide here depending on URL 

tôi đã làm một số xét nghiệm bằng cách sử dụng ES6 Proxy, mà có vẻ đầy hứa hẹn, nhưng tiếc là mục tiêu proxy không thể được sửa đổi sau khi xây dựng Proxy:

var foo = { 
    name() { 
     return "foo"; 
    } 
}; 
var bar = { 
    name() { 
     return "bar"; 
    } 
} 
var handler = { 
    get(target, property, receiver) { 
     if (property === "switchToBar") { 
      // FIXME: This doesn't work because a Proxy's target is not exposed AFAIK 
      receiver.target = bar; 
      return function() {}; 
     } else { 
      return target[property]; 
     } 
    } 
} 
var proxy = new Proxy(foo, handler); 
console.log(proxy.name()); // foo 
proxy.switchToBar(); 
console.log(proxy.name()); // foo :(

Tôi nghĩ rằng tôi có thể thực hiện những gì tôi muốn bằng cách không thiết lập mục tiêu - thay vào đó xác định tất cả các bẫy để ủy quyền cho đối tượng mong muốn - nhưng tôi hy vọng cho một giải pháp đơn giản hơn.

Answer 1

Dưới đây là một đi vào "xác định tất cả các bẫy để uỷ thác cho đối tượng mong muốn"

(function() { 
    let mutableTarget; 
    let mutableHandler; 

    function setTarget(target) { 
    if (!(target instanceof Object)) { 
     throw new Error(`Target "${target}" is not an object`); 
    } 
    mutableTarget = target; 
    } 

    function setHandler(handler) { 
    Object.keys(handler).forEach(key => { 
     const value = handler[key]; 

     if (typeof value !== 'function') { 
     throw new Error(`Trap "${key}: ${value}" is not a function`); 
     } 

     if (!Reflect[key]) { 
     throw new Error(`Trap "${key}: ${value}" is not a valid trap`); 
     } 
    }); 
    mutableHandler = handler; 
    } 

    function mutableProxyFactory() { 
    setTarget(() => {}); 
    setHandler(Reflect); 

    // Dynamically forward all the traps to the associated methods on the mutable handler 
    const handler = new Proxy({}, { 
     get(target, property) { 
     return (...args) => mutableHandler[property].apply(null, [mutableTarget, ...args.slice(1)]); 
     } 
    }); 

    return { 
     setTarget, 
     setHandler, 
     getTarget() { 
     return mutableTarget; 
     }, 
     getHandler() { 
     return mutableHandler; 
     }, 
     proxy: new Proxy(mutableTarget, handler) 
    }; 
    } 

    window.mutableProxyFactory = mutableProxyFactory; 
})(); 

const { 
    proxy, 
    setTarget 
} = mutableProxyFactory(); 

setTarget(() => 0); 
console.log(`returns: ${proxy()}`); 

setTarget({ val: 1 }); 
console.log(`val is: ${proxy.val}`); 

setTarget({ val: 2 }); 
console.log(`val is: ${proxy.val}`); 

setTarget(() => 3); 
console.log(`returns: ${proxy()}`); 

tôi cảm thấy như phải có một số lý do này không được hỗ trợ ra khỏi hộp, nhưng tôi không có đủ thông tin để bình luận thêm về điều đó.

Sau khi hack vào điều này một thời gian, tôi đã quan sát thấy một vài điều. Có vẻ như mục tiêu ban đầu mà nhà xây dựng proxy được gọi là được coi là một phần của danh tính của proxy bất kể. Đặt mục tiêu ban đầu thành một đối tượng đơn giản và hoán đổi mục tiêu đến một hàm sau đó sẽ gây ra lỗi khi proxy được gọi. Có chắc chắn một số cạnh thô này, vì vậy sử dụng cẩn thận.

Answer 2

Có thể thay đổi mục tiêu của Proxy không?

Không, điều này là không thể. Trình xử lý proxy là một giao diện khá chung chung, và bằng cách xác định tất cả các bẫy để chuyển tiếp thao tác đến một trình xử lý khác, điều này có thể dễ dàng đạt được. Đó là lý do tại sao không có phương pháp bổ sung để thay đổi mục tiêu, giao diện được giữ ở mức tối thiểu. Bằng cách không làm cho mục tiêu có thể thay đổi, cũng hình dạng của proxy được giữ nguyên (ví dụ: cho dù đó là có thể gọi hoặc một mảng).

Answer 3

Làm thế nào về điều này? Thay vì làm cho foo hoặc bar mục tiêu trực tiếp, chúng tôi sử dụng hộp cho mục tiêu của chúng tôi và đặt foo hoặc bar vào hộp.

var foo = { 
    name() { 
     return "foo"; 
    } 
}; 
var bar = { 
    name() { 
     return "bar"; 
    } 
}; 
var handler = { 
    get(target, property, receiver) { 
     if (property === "switchToBar") { 
      target.content = bar; 
      return function() {}; 
     } else { 
      return target.content[property]; 
     } 
    } 
}; 

var box = {content: foo}; 
var proxy = new Proxy(box, handler); 

console.log(proxy.name()); // foo 
// Switch over to bar by calling the function 
proxy.switchToBar(); 
// Or, we could do the switch from out here 
box.content = bar; 
// Either way, we get the same result 
console.log(proxy.name()); // bar 

Trong trường hợp này, hộp của chúng tôi là đối tượng có thuộc tính content. Nhưng cách khác, bạn có thể sử dụng một mảng với một mục tại chỉ mục 0.