使用 ES6 代理会导致任何函数调用 "is not a function"

Question

我试图成为一个偷偷摸摸的开发人员，但我确实迷失在了 ES6 代理中。基本上我想从我写的另一个 class 中捕获属性中的任何获取或设置，并确保它们存储在对象之外的其他地方。它看起来像这样：

'use strict'
class MyObject()
{
    superAwesomeFunction(){//super awesome code goes here}
}

const myProxyObject = new Proxy(MyObject, {
get: function(target, name, receiver)
{
    if([CONDITIONS THAT MEET MY DEMANDS])
    {
         // deliver property values if they are
         // my super cool database (if they exist)
    }

    // else just ya know, forward it to the actual MyObject
    // property, if it's an actual property on MyObject
    return target[name];
},
set: function(target, name, value)
{
    if([CONDITIONS THAT MEET MY DEMANDS])
    {
         // set property values if they are
         // to super cool database
    }
    else
    {
        // just set the value to the property, which
        // gets created if it doesn't exist (WHICH IS SO COOL)
        target[name] = value;
    }
    return true;
}

好吧，关于这个很酷的部分？你可以这样做：

// property that doesn't exist (yet)
console.log(myProxyObject.wholivesinapineappleunderthesea);

// but wait for it...
myProxyObject.wholivesinapineappleunderthesea = 'spongebob';

// bam! now it exists on the object, AND lives in my DB!
console.log(myProxyObject.wholivesinapineappleunderthesea);

虽然为一些愚蠢的事情做了很多工作，但我无法解释它让我感到多么快乐。但是，这有一个问题。还记得我放在 MyObject() 中的 superAwesomeFunction() 吗？好吧，每当我现在尝试调用它时，ES6 都会让我感到悲伤：

myProxyObject.superAwesomeFunction is not a function

ES6 坐在谎言的宝座上！它完全在那里，对吗？好的，所以我很确定我遇到了错误，因为当我调试时，我看到 Proxy 的 get 部分实际上正在接收 superAwesomeFunction 调用（这是有道理的，因为 superAwesomeFunction 是一个包含函数 (){})

的属性

这是我的问题：有没有人知道任何解决方案可以让我保持我的可笑的动态属性并仍然调用我的 superAwesomeFunction()？是应用陷阱吗？

Answer 1

这是一个小语法错误...您将代理包装在原始 class 周围，而不是对象。

尝试：

const myProxyObject = new Proxy(new MyObject(), { ... });

这应该没问题。例如：

> class Blah {
... run() {
..... console.log('yay')
..... }
... }
[Function: blah]
> myProx = new Proxy(new Blah(), {});
blah {}
> myProx.run()
yay

Answer 2

完整的答案代码在这里，谢谢大家！

'use strict'
class MyObject()
{
    superAwesomeFunction(){
        console.log("this works!");
    }
}

const myProxyObject = new Proxy( new MyObject(), {
get: function(target, name, receiver)
{
    if([CONDITIONS THAT MEET MY DEMANDS])
    {
        // do something cool for yourself
    }

    return target[name];
},
set: function(target, name, value)
{
    if([CONDITIONS THAT MEET MY DEMANDS])
    {
        // do something cool for yourself
    }
    else
    {
        // just set the value to the property, which
        // gets created if it doesn't exist (WHICH IS SO COOL)
        target[name] = value;
    }
    return true;
}
});

Answer 3

扩展 Sam 的回答。

以下成功：

function Foo() {
  this.bar = function() { console.log('baz'); }
}
let foo = new Proxy(new Foo(), {});
foo.bar();

但是，当 get 陷阱被添加到处理程序时，抛出“不是函数”：

function Foo() {
  this.bar = function() { console.log('baz'); }
}
let foo = new Proxy(new Foo(), {
  get: function(target, prop) {}
});
foo.bar();

这里的解决方案是添加一个 typeof 检查目标现有函数的默认处理：

function Foo() {
  this.bar = function() { console.log('baz'); }
}
let foo = new Proxy(new Foo(), {
  get: function(target, prop) {
    if (typeof target[prop] === 'function') {
      return target[prop].bind(target);
    }
  }
});
foo.bar();

以下文章提供了更多示例并提供了与代理处理程序一起使用的漂亮样板：Safely Extending The JavaScript Set Object Using Proxies

使用 ES6 代理会导致任何函数调用 "is not a function"

Using ES6 Proxy results in any function call "is not a function"

javascript

proxy

node.js

ecmascript-6

es6-proxy