Geek Answers Handbook

How do you redefine bindings to the JS constructor chain?

I am trying to define a base class in JavaScript that performs many common functions when created. Part of this function is to create a component and register callback handlers for that component.

The problem is how to override the function that is used for this callback handler in child classes that extend my base class.

In specific terms, I have a component BasicPagethat creates a component Table. BasicPagealso defines the default function onRowClickthat is registered at creation Table.

Now I want to create a component PageWithSectionsthat extends BasicPage(via an operator call(..)) and overrides onRowClick. The problem is registering the click handler when the table is executed inside the base class constructor. During this registration, it onRowClickhas not yet been redefined, so the link refers to the version of the base classes onRowClick.

I created jsBin that illustrates the problem.

http://jsbin.com/uDEjuzeQ/9/edit

If you click on each box once, in order, I want the message box to be displayed:

Currently there are no messages; row pressed; row pressed; BasicPage onRowClicked; row pressed; PageWithSections onRowClicked

What is the correct way to override a function in the constructor chain and associate an overridden function with something while building the base object?

UPDATE , , , .

, . .

+4
3

, , , _onRowClicked ( , ) .

- .

, BasicPage BasicPage.prototype ( / ). , , .:)

+1

:

var BasicPage = function(){
  this.name="BasicPage";
  document.body.onclick=this._getClick(this);
};
BasicPage.prototype._getClick=function(me){
  return function(e){
    console.log("target is:,",e.target);
    console.log("this is:",me.name);
  }
};

var PageWithSections = function(){
  //initialise parent and it instance members
  BasicPage.call(this);
  //override name
  this.name="PageWithSections";
};
PageWithSections.prototype=Object.create(BasicPage.prototype);
PageWithSections.prototype.constructor=PageWithSections;

var sect = new PageWithSections();
document.body.click();

, onclick BasicPage, :

var BasicPage = function(){
  this.name="BasicPage";
  document.body.onclick=this._getClick(this);
};
BasicPage.prototype._getClick=function(me){
  return function(e){
    console.log("re used code from BasicPage");
    console.log("target is:,",e.target);
    console.log("this is:",me.name);
  }
};

var PageWithSections = function(){
  //initialise parent and it instance members
  BasicPage.call(this);
  //override name
  this.name="PageWithSections";
};
//set prototype chain
PageWithSections.prototype=Object.create(BasicPage.prototype);
PageWithSections.prototype.constructor=PageWithSections;
//extend _getClick
PageWithSections.prototype._getClick=function(me){
  var fn=BasicPage.prototype._getClick.call(me,me);
  return function(e){
    //do BasicPage click code
    fn(e);
    //extended code
    console.log("with a little extra from PageWithSections");
  };
};


var sect = new PageWithSections();
document.body.click();

. , , , JS.

+1

. @cloudfeet, , .

, , , _onRowClick, .

http://jsbin.com/uDEjuzeQ/16/edit

0
source

More articles:


All Articles