How to redefine constructor of standard function in JS?

Question

So, I want redefine constructor of HTMLButtonElement with input args. I know how to do this without args:

var CButtonPrototype = Object.create(HTMLButtonElement.prototype);
CButtonPrototype.createdCallback = function()
{
  alert("call");
  this.setAttribute("class", "some class");
  this.value = 0;
  this.innerHTML = "some text";
};

var CButton = document.registerElement('cbutton', {
  prototype: CButtonPrototype
});

var myButton = new CButton();

And it's works, but I want use this class something like var myButton = new CButton(arg 1, arg 2, etc);. This method don't let me doing CButtonPrototype.createdCallback = function(arg 1, arg2). How can I resolve this? Maybe you know another way?

Thanks \o/

ymz · Accepted Answer · 2014-11-29 19:51:30Z

1

if you need to extend this type, please consider the following:

CButton.prototype.test = function()
{
    console.log(arguments);
}

CButton.prototype.test2 = function(num, str, bool)
{
    console.log(num + ' ' + str + ' ' + bool);
}

myButton.test(20, 'hello', true); //call test function with parameters
myButton.test2(20, 'hello', true); // still the same

about your original question:

you can't insert parameters because this "function" is only a delegate to a system function... in your case - an object c'tor.

to test it you can try arguments - a special array inside every function in js that represents the arguments of the function:

var CButtonPrototype = Object.create(HTMLButtonElement.prototype);
CButtonPrototype.createdCallback = function()
{
  console.log(arguments); // print arguments to the console screen
  this.setAttribute("class", "some class");
  this.value = 0;
  this.innerHTML = "some text";
};

var CButton = document.registerElement('cbutton', {
  prototype: CButtonPrototype
});

var myButton = new CButton();

run this code - you will see an empty array - mainly because your c'tor call 'new CButton()' has no arguments. try to insert arguments and you will get an error.

answered Nov 29, 2014 at 19:51

ymz

6,9641 gold badge26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Liastre Over a year ago

Thank you for quick answer :) I knew about prototype functions, but can you tell me, is there some other ways to overload c-tor for my needs? Is using prototype func is the better?

ymz Over a year ago

your own c'tor - not a problem. an override c'tor based on dom settings... not so much. can you share what's in your mind for such a demand?

Liastre Over a year ago

I want class with methods for buttons. Earlier I trying:

function CButton(buttonName, functionName, buttonClass) {   if (!(this instanceof CButton)) return new CButton(buttonName, functionName);    this.btn = doc.createElement("button");   this.btn.setAttribute("class", buttonClass);   this.btn.setAttribute("onClick", functionName);   this.btn.innerHTML = buttonName; }

There other problems, i can't redefine this for returning other types (this = doc.createElement("button")). If i would use return this.btn, there no sense for using class, it become simple function without methods.

ymz Over a year ago

for that purpose, please implement your own types and don't override the dom (which is full with restrications because of securiy hacks)

Liastre Over a year ago

Sorry for my noob's question, but I really can't understood this. For ex. appendChild work with only HTMLElement class right? If i create my own, it's didn't work with it, because class should have the same type. I thought that redefinition of standard c-tor will be good idea.

|

Collectives™ on Stack Overflow

How to redefine constructor of standard function in JS?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related