Создать поведение по умолчанию для случая, когда appendchild вызывается для объекта

Question

Я работаю над созданием классов-оболочек для некоторых элементов HTML, и я хотел бы знать, есть ли способ указать поведение по умолчанию для моего класса, когда для него вызывается .appendChild.

// Very simple textbox wrapper class
function MyWrapperClass(){
    this.input = document.createElement('input'); // textbox
}
MyWrapperClass.prototype.setValue = function(v){
    this.input.value = v;
}

// Add instance of my wrapper class to DOM
var foo = new MyWrapperClass();
document.body.appendChild( foo.input ); // Works fine.

Это работает достаточно хорошо. Но я пытаюсь абстрагировать свой код достаточно, чтобы добраться до этого:

// Add instance of my wrapper class to DOM
var foo = new MyWrapperClass();
document.body.appendChild( foo );

, где foo.input автоматически возвращается при вызове appendChild для foo.

Теперь я понимаю, что могу изменить свой класс-обертку, чтобы он возвращал элемент ввода в его конструирующей функции, но когда я это делаю, я теряю возможность вызывать любой из методов класса:

// Modified wrapper, returns input on instancing
function MyWrapperClass(){
   this.input = document.createElement('input'); // textbox
   return this.input
}

var foo = new MyWrapperClass();
foo.setValue('Hello'); // ERROR: html input element has no setValue method

Так есть ли способ переопределить поведение объекта по умолчанию и вернуть foo.input при вызове .appendChild для foo?

Answer 1

если вы создадите метод append() вашего объекта, вы сможете абстрагироваться больше, чем document.body.appendChild( foo );

function MyWrapperClass(){
   this.input = document.createElement('input'); // textbox
   return this;
}
MyWrapperClass.prototype.setValue = function(v){
    this.input.value = v;
}
MyWrapperClass.prototype.append = function(){
    document.body.appendChild(this.input)
}


var foo = new MyWrapperClass();
foo.setValue('test');
foo.append();

смотри эту скрипку: http://jsfiddle.net/yJ44E/
Примечание: вы также можете изменить метод append(), чтобы он принимал узел в качестве аргумента, в который вы хотите добавить элемент.