在代理对象中调用外部函数（Javascript ECMAscript）答案

【问题标题】：calling external function in Proxy object (Javascript ECMAscript)在代理对象中调用外部函数（Javascript ECMAscript）
【发布时间】：2017-09-01 15:17:25
【问题描述】：

我正在观察一个对象，并希望在更改值时调用一个函数。

我可以使用 Object.observe 来实现，并想尝试使用 Proxy 进行简化。

我不能调用外部函数，因为它说未定义。如何捕获外部函数？

这是我的事：

const page = {}
const pageHandler = {
    externalFunction : externalFunction, // does not work: gets undefined
    doSmtg : function(value) { 
      // do something on a value
      externalFunction( value ) // externalFunction is undefined 
      this.externalFunction( value ) // same problem
    },  
    set( target, key, value) {

    if (key == 'article') {

         this.doSmtg( value );

      }
    }
}

const proxyPage = new Proxy( page , pageHandler);


function externalFunction( myObject) {

     // do things on my Object
     // this function can be called somewhere else then proxy Page

}

已编辑作为后续回答

函数 doStmg() 被调用并在其中执行//Stuff，除了仍然未定义的externalFunction。 externalFunction 在其他地方正常调用。

const page = {
  // observePage : observePage
}

const pageHandler = {
  // observePage : observePage,
  set : setPageProperty,

  get(target, key) {
    console.log('Getting page', target[key]);
    return target[key]
  }
};

const proxyPage = new Proxy( page , pageHandler);


function setPageProperty(target, key, value) {
    target[key] = value;
     if (key == 'article') {
          doSmtg( value );
    }   
}


function doSmtg( article ) {

        // stuff

        $("a[href*='/url/']").click(function(e){

            param = {
                titles : l
            };

            externalFunction(param, pageCallback, setOpenFromGraph(false));

        });

  }


function externalFunction(param, firstCallback, secondCallback) {
    //  stuff
}

【问题讨论】：

proxy 有一个 'handler' 和 'target' 是不同的。你的代理目标是'page'和处理程序'pageHandler'你的目标不包含externalFunction，所以它是未定义的。您应该将外部函数作为属性移动到页面中
在任何一种情况下都适用于我
谢谢大家。 @ftor @Shyam Babu 你能举个例子吗？我尝试了 const page = {externalFunction : externalFunction}，然后在 doSmtg() 中将其称为 page.externalFunction 或 target.externalFunction，但没有奏效。
@ftor “使用它的身体本身作为获取陷阱”是什么意思？我可能对不同的键有 get() 。如何仅将 eF() 应用于选定的键？还是你的意思是先设置一个key，然后get时调用eF()？
对不起，我的评论有误。您的代码确实有效。您可以通过将return myObject 语句添加到您的externalFunction 来验证这一点。然后改变代理类似proxyPage.article = "foo" 和“foo”被记录。

标签： javascript proxy ecmascript-6 observer-pattern

【解决方案1】：

至于 OP 给出的示例...不仅页面处理程序选项的配置只应针对指定的陷阱进行更改，而且还应该注意，对于上面的示例，必须使用proxyPage 对象以进入 set 陷阱。直接为任何page 属性赋值，否则不会被检测到。

function externallyHandlePageArticleChange(value) {
  console.log("externallyHandlePageArticleChange :: value :", value);
}


function handlePagePropertyChange(target, key, value/*, receiver*/) {
  console.log("handlePagePropertyChange :: [target, key, value] :", target, key, value);

  target[key] = value;

  if (key === 'article') {

    externallyHandlePageArticleChange(value);
  }
  return true;
}

var pageHandlerOptions = {
  set: handlePagePropertyChange
};

var page = new Proxy({}, pageHandlerOptions);


page.x = "x";
page.y = "y";
page.article = "0815";

.as-console-wrapper { max-height: 100%!important; top: 0; }

【讨论】：

嗨彼得，我编辑了这个问题：我还有未定义的函数：/