JS，“对象”，这个和那个。来自python这真的让我困惑。 （双关语意） [英] JS, "objects", this and that. Coming from python THIS really confuses me. (pun intended)

问题描述

Heres稍微清理了图片库中的代码以便学习js。
我创建画廊作为对象，但是在某些时候，我失去了this指向的轨迹。
对我来说，底部会发生什么（看评论）是没有意义的。
有人可以解释吗？

 函数库（parentID）
 {
 //。 .. 
 this.showDiv = document.createElement（div）; 
 // ... 
 this.show = function（）
 {
 document.body.appendChild（this.showDiv）; //将给出css绝对位置以弹出
 this.showDiv.innerHTML ='< img class =displayImagesrc ='+ this.picList [this.showIndex] +'> ; //填充图片
 this.showDiv.focus（）; 
 this.showDiv.onclick = this.hide; 
} 
 
 this.hide = function（）
 {
 alert（this.innerHTML）; //< =为什么会显示this.showDiv的内部内容？ 
 //alert（this.showDiv.innerHTML）; //< =不应该是正确的？ 
 this.parentNode.removeChild（this）; // does not work 
} 
} 
  

让我知道如果我清理了一些代码可能会影响结果，并且会填满它。

谢谢。

解决方案

  this.showDiv.onclick = this.hide; 
  

这条线是问题所在。它在Python中不起作用; this.hide 不是一个绑定方法。它只是 hide 函数，不会绑定到任何特定的 this 。

解决这个问题的方法之一是：

$ p $ 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）; 
  

（通常这个有点奇怪的表现在JavaScript中;要记住的主要是这个总是指内部函数的 this ，它可以是任何调用者希望它是有的，有时候你会看到JS代码像 var self = this; 那样给一个特定函数的 this 可以在嵌套函数中使用的名称;当然，在Python中，这只是自动工作的方式。）

Heres a bit of cleaned up code from a picture gallery im writing to learn js. I create the gallery as an object but at some point i lose track of what "this" points to. It doesnt make sense to me what happens at the bottom (look at the comments). Can someone please explain?

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
        }
}

Let me know if i cleaned up some code that might have affected the results and ill fill it in.

Thanks.

解决方案

    this.showDiv.onclick = this.hide;

This line is the problem. It doesn’t work like in Python; this.hide is not a bound method. It’s just the hide function, not bound to any particular this.

One way to fix it is:

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

But the .bind() method of functions is a rather new standard; it isn’t in all old browsers. So you might want to roll your own instead:

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

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

(Generally this is kind of strangely behaved in JavaScript; the main thing to remember is that this always refers to the innermost function’s this, which could be whatever the caller wants it to be. Sometimes you see JS code do things like var self = this; to give a particular function’s this a name that can be used in nested functions; in Python, of course, that is just sort of the way things work automatically.)

这篇关于JS，“对象”，这个和那个。来自python这真的让我困惑。 （双关语意）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！