创建在对象上调用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 调用appendChild 时，会自动返回 foo.input 。

现在，我意识到我可以修改我的包装类以返回其构造函数中的输入元素，但是当我这样做时，我失去了调用任何类方法的能力：

// 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 上调用 .appendChild 时返回 foo.input？

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() 方法，以便接受节点作为要在其中追加元素的参数。