我正在观察一个对象,并希望在更改值时调用函数。
我可以使用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
}
答案 0 :(得分:0)
至于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; }