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

在对象上调用appendchild时创建默认行为

1 个答案: