在代理对象(JavaScript ecmascript)中调用外部功能

Question

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

我可以用object.observe做到这一点，并想尝试用代理简化。

我无法称呼外部功能，因为它说未定义。如何捕获外部功能？

这是我的事：

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
}

Answer 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; }