0

I am observing an object and want to call a function upon changing values.

I could do it with Object.observe and would like to try simplify with Proxy.

I cannot call an external function, cause it say undefined. How to trap an external function ?

here's my thing:

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

}

EDITED as follow up to answer

The function doStmg() is called and execute //Stuff in it, except for the externalFunction which still is undefined. externalFunction is called normally elsewhere.

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
}
user3840170
  • 26,597
  • 4
  • 30
  • 62
user305883
  • 1,635
  • 2
  • 24
  • 48
  • proxy has a 'handler' and 'target' are different. your target for proxy is 'page' and handler 'pageHandler' your target doesnt contain externalFunction so it is undefined. you should move the external function into page as property – Shyam Babu Sep 01 '17 at 15:37
  • It works for me in either scenario – MinusFour Sep 01 '17 at 15:43
  • Thank you all guys. @ftor @Shyam Babu could you please provide an example? I tried const `page = {externalFunction : externalFunction}`and then calling it as `page.externalFunction` or `target.externalFunction` in `doSmtg()` but did not work. – user305883 Sep 01 '17 at 16:50
  • @ftor what do you mean by "use its body itself as the get trap" ? I may have get() for different keys. How to apply eF() to only a selected key ? Or do you mean first set a key, and then call eF() on get? – user305883 Sep 01 '17 at 16:56
  • Sorry, my comment was wrong. Your code actually works. You can validate this by adding a `return myObject` statement to your `externalFunction`. Then mutate the proxy something like `proxyPage.article = "foo"` and "foo" gets logged. –  Sep 01 '17 at 18:01

1 Answers1

0

As for the OP's given example ... not only the configuration of the page handler options which only should target specified traps has to be changed, but one also should be aware that with the example from above one has to work with the proxyPage object in order to run into the set trap. Assigning a value directly to any page property otherwise will not be detected.

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; }
Peter Seliger
  • 11,747
  • 3
  • 28
  • 37