Question

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

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不是绑定方法。它只是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中，当然，这只是事情的方式自动工作。）

Answer 2

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

Answer 3

如果你坚持使用构造函数而不是工厂，那么请记住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不在OldIE中。

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

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

希望能让事情变得更加清晰。

JS，“对象”，这个和那个。来自python这真的让我很困惑。（双关语）

3 个答案:

JS，“对象”，这个和那个。来自python这真的让我很困惑。 （双关语）

3 个答案:

JS，“对象”，这个和那个。来自python这真的让我很困惑。（双关语）