javascript - 将对象传递给 document.write() 中的 onClick 方法

Question

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

这很好用。但是，当我想设置 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 与其他字符串连接时，您将获得该对象的字符串表示形式(即 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 元素。)