Question

示例：

let foo = {bar: 'baz', method() { this.bar = 'baz2' }}
let fooProxy = new Proxy(foo, {set(target, key, val) { console.log('set trap triggered!') }})

fooProxy.bar = 'any value' // as expected: set trap triggered!
foo.method() // trap not triggered

为什么会这样？如何从目标对象内部强制执行触发陷阱？

编辑，主要是为了向@Bergi解释：

我的主要目标是拦截对foo对象的任何更改，所以我可以设置属性，例如foo.changed为true。另外，我想要对具有数组/对象类型的foo属性进行拦截更改。你知道，如果我设置foo的属性，一切都很好，但是当我推送到一个是数组，然后代理不能拦截。所以我需要将数组/对象属性转换为代理（我称之为ArrayProxy和ObjectProxy）。

这是我的代码（打字稿）：

// Category.ts
class Category extends Model {
    title: string = ''
    products: Product[] = []
}

// Model.ts
abstract class Model extends BaseModel {
    constructor() {
        return new Proxy(this, {
            set (target, key, val) { 

                if (Array.isArray(val) {  
                    target[key] = new ArrayProxy(val) // I WANT all array properties to be ArrayProxy but the problem (see below) not let me do that
                }     
            } 
        })
    }
}

// BaseModel.ts
abstract class BaseModel {
    constructor(attributes) {
        this.setAttributes(attributes)
    }

    setAttributes(attributes) {
        Object.keys(attributes).forEach((key) => {
            this[key] = attributes[key] // THE PROBLEM
        })
    }
}

我删除了无关紧要的代码（例如对象属性和ObjectProxy的类似情况）。

如果有更优雅的方式来做我已经完成的事情，我将非常感激。

Answer 1

陷阱不存在于原始对象上。如果可以，您将不需要单独的代理对象。我们的想法是使用代理而不是原始代理。

一种可能性是让原始对象从代理对象继承。这可能会有效，具体取决于您实际需要完成的任务。

＆＃13;

let fooProxy = new Proxy({}, {
    set(target, key, val) { console.log('set trap triggered!') }
})

let foo = Object.create(fooProxy, {
  method: {value: function() { this.bar = 'baz2' }}
})

fooProxy.bar = 'any value'
foo.method()

＆＃13;

Answer 2

未触发设置陷阱，因为您在this内访问的method()不是代理，而是原始对象foo。代理不会更改原始对象。您可以通过查看this内的method()：

来查看此内容

let foo = {
  method () {
    return this === fooProxy
  }
}
let fooProxy = new Proxy(foo, {})
document.write(foo.method()) //=> false

您可以使用method()在调用中显式设置Function#call的上下文：

let foo = {bar: 'baz', method() { this.bar = 'baz2' }}
let fooProxy = new Proxy(foo, {set(target, key, val) { console.log('set trap triggered!') }})

fooProxy.bar = 'any value' //=> set trap triggered!
foo.method.call(fooProxy) //=> set trap triggered!

Answer 3

您还可以将代理添加到对象原型中。

SomeObject.prototype = new Proxy(
    SomeObject.prototype,
    SomeObjectHandlerProxy
);

instance = new SomeObject();

类似的东西应该工作

Answer 4

在foo.method中，您没有通过代理对象设置属性，因此显然没有触发陷阱。代理不会修改原始对象。

ES6代理：设置内部目标对象的方法时，set（）陷阱不触发

4 个答案: