1

这是我为学习 js 编写的图片库中的一些清理代码。我将画廊创建为一个对象，但在某些时候我忘记了“this”指向的内容。底部发生的事情对我来说没有意义（查看评论）。有人可以解释一下吗？

function Gallery(parentID)
{
        // ...
    this.showDiv = document.createElement("div");
        // ...
    this.show = function ()
        {
        document.body.appendChild(this.showDiv); //will be given css absolute position to "pop up"
        this.showDiv.innerHTML = '<img class="displayImage" src="' + this.picList[this.showIndex] + '">'; //fill with image
        this.showDiv.focus();
        this.showDiv.onclick = this.hide;
        }   

    this.hide = function ()
        {
        alert(this.innerHTML); // <= WHY DOES THIS SHOW THE INNERHTML CONTENTS OF this.showDiv??????
            //alert(this.showDiv.innerHTML); // <= shouldnt this be correct?
        this.parentNode.removeChild(this); //doesnt work
        }
}

让我知道我是否清理了一些可能影响结果的代码并填写错误。

谢谢。

4

3 回答 3

4 
    this.showDiv.onclick = this.hide;

这条线是问题所在。它不像在 Python 中那样工作；this.hide不是绑定方法。它只是hide功能，不受任何特定this的 .

解决它的一种方法是：

    this.showDiv.onclick = this.hide.bind(this);

但是.bind()函数的方法是一个相当新的标准；它不在所有旧浏览器中。所以你可能想自己动手：

function bindMethod(object, func) {
    return function () { return func.apply(object, arguments); };
}

this.showDiv.onclick = bindMethod(this, this.hide);

（通常this在 JavaScript 中表现得有些奇怪；要记住的主要一点是，它this总是指最里面的函数this，它可以是调用者想要的任何东西。有时你会看到 JS 代码做一些事情，比如var self = this;给一个特定的函数起this一个名字可以在嵌套函数中使用；当然，在 Python 中，这只是事情自动工作的一种方式。）

于 2012-09-12T00:08:17.143 回答
0

这指的是调用该函数的对象。因此，当您说时this.showDiv.onclick， showDiv 就是调用该函数的对象。因此this.innerHTML实际上意味着this.showDiv.innerHTML

于 2012-09-12T00:08:57.180 回答
0

如果你坚持使用构造函数，而不是工厂，那么请this记住——

如果您有一个方法（或您作为方法调用的任何函数，而不是作为构造函数调用的任何函数），并且该方法引用this，则该语句将在调用函数时而不是在定义时this解析。

function sayName () { console.log(this.name); }

var bob = { name : "Bob" },
      doug = { name : "Doug" };

bob.greet = sayName;
doug.greet = sayName;

在严格的基于类的语言中，这里会出现各种错误。

但是通过后期绑定的魔力（this在执行期间的最后一秒决定什么意思），它顺利进行。

然而，有一个障碍：函数内部的函数。你想this指向this外部方法的。它没有。在旧（当前）JS 中，它指向window. 在未来的 JS 中，它什么都没有。

function sayNameAndAge () {
   var outerThis = this,
         name = this.name;

   function sayAge () { console.log(outerThis.age); }

     console.log(name);
     sayAge();
 }

假设 Bob 既有姓名又有年龄，现在，您可以像上次一样分配函数，它会起作用。该函数将看到它bob位于点的前面，因此是主题this（注意：不是它的工作原理，而是它看起来如何工作，一个函数的深度）。 outerThis将保存内部函数的引用以供使用。

另一种选择是：

sayNameAndAge.call(bob);

call是函数具有的方法（我是否提到函数是对象），它允许您this为特定的执行指定，而不是给另一个对象一个方法（实际上是一个引用）。

bind像call_ this_ bind_

另一个主要参考点：当您使用事件侦听器时，this指向您放置侦听器的元素。

您可以委托侦听器（例如，将一个侦听器附加到一个侦听器<ul>，该侦听器侦听对其任何一个的任何点击<li>。在这种情况下，this将是<ul>，因为它是侦听器在触发时附加到的对象。

希望这能让事情变得更清楚一些。

于 2012-09-12T01:58:52.593 回答