javascript - JS， "objects"，这个那个。来自 python 这真的让我感到困惑。 (双关语)

Question

这是我为学习 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
        }
}

如果我清理了一些可能影响结果的代码并填写不当，请告诉我。

谢谢。

Answer 1

    this.showDiv.onclick = this.hide;

这一行就是问题所在。它不像在 Python 中那样工作； this.hide 不是绑定(bind)方法。它只是 hide 函数，没有绑定(bind)到任何特定的 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 中，这只是事物自动工作的一种方式。)