Question

我正在尝试动态创建js对象，这些对象也可以使用Foo.write()将自己“写”到文档中。 write方法只是一堆document.write()调用，它将变量从Foo拉入到填充元素中。基本上，write()包含所有Foo的模板。

这很有效。但是，当我想将onClick设置为其中一个模板元素（anchor）时，我遇到了问题。写链接的行是：

document.write( "<a href='javascript:" +this+ "close()'><img src='layout_img/button_close.png' /></a> ");

因此，在调用时，Foo会自行插入，Foo.close()应该在特定的 Foo上调用。但是当我点击链接时，我得到一个js错误："missing ] after element list"。在状态栏中，当我悬停链接时，它显示javascript:[Object object].close()，我认为这是一件好事。

为什么这不起作用？

以下是我的帮助代码。这就是我想创建/编写我的对象的方式：

<script type="text/javascript">
  new Foo( 'any_id_i_want', {            
    title: "any_title",
    icon: "any_image",
    isMinimized: false,
    top: 400,
    left: 500
  }).write().setContents( "Hello <a href='http://google.com'>google</a>" );
</script>

write()使用document.write()创建模板，并使用Foo.title之类的内容来自定义对象的外观。

setContents()找到document.getElementById(Foo.id)编写的代码，并使用Element.innerHTML在Foo中填入自定义消息，在本例中为文本和链接。

所以我想保留这种创建对象的方法，因为它非常方便。我只是无法弄清楚如何使用模板来调用Foo。

Answer 1

this是一个对象。当您将对象连接到字符串时，会对对象的toString()进行隐式调用。这就是你看到[Object object].close()的原因。您期望的输出是什么？

Answer 2

当您将this与其他字符串连接起来时，您将获得该对象的字符串表示形式（即this.toString()）。对于一个完全没用的复杂对象。如您所见，您将获得文本[Object object]，而不是您可以用来访问该对象的任何内容。

如果您希望能够使用这样的对象，则该对象必须知道可用于访问自身的变量的名称。

示例：

// create object
var x = new Foo();
// set variable name
x.name = 'x';

现在您可以使用该属性创建访问该对象的代码：

document.write(
  '<a href="javascript:' + this.name + '.close();">' +
  '<img src="layout_img/button_close.png" />' +
  '</a>'
);

如果您将元素创建为对象并附加到页面中的元素，则可以简单地将this放在局部变量中并使用匿名函数，而无需全局变量名称：

var e = document.createElement('a');
var t = this;
e.onclick = function(){
  t.close();
};

（局部变量t的需要是为了让你在匿名函数中得到它。当onclick事件运行时，this不会引用你的对象，但HTML元素。）

Answer 3

这里有许多不合适的东西：

您正在将Foo（一个对象）转换为String。这会调用Foo.toString()，返回字符串[Object object]。
您正在通过字符串分配事件侦听器。您应该创建链接并致电addEventListener甚至link.onclick = function() { Foo.close() }。
this根据具体情况更改其值。在write()时，当你调用onclick处理程序时它会有所不同。一个简单的解决方案是使用var that = this; that.close()。
使用document.write可能是向文档添加内容的最差方法。使用DOM apis在JavaScript中创建东西。

说这就是我要解决的问题：

Foo.write = function() {
  var link = document.createElement('a');
  link.innerHTML = "<img src='layout_img/button_close.png' />";
  var that = this;
  link.onclick = function() { that.close(); };
  document.body.appendChild(link);
}

在您的情况下，考虑使用templating library。

将对象传递给document.write（）中的onClick方法

3 个答案: