javascript-tutorial / en.javascript.info

Modern JavaScript Tutorial
https://javascript.info
Other
23.61k stars 3.88k forks source link

Questions/suggestions on solution to ' "Smart" tooltip ' #1653

Closed paroche closed 4 years ago

paroche commented 4 years ago

In the class definition for HoverIntent, it appears that there are statements in the constructor that are not related to assignments to this, specifically:

   elem.addEventListener("mouseover", this.onMouseOver);
   elem.addEventListener("mouseout", this.onMouseOut);

I imagine (it seems logical, and seems to be the way they function in the solution) that such statements are executed when new HoverIntent() is executed, but do not become part of the returned object.

But is this type of usage discussed anywhere in the tutorial up to this point? (Or after?). I haven't been able to find it. Actually, I haven't been able to find this type of constructor content discussed anywhere on the web, though I probably wasn't phrasing my search well enough.

So if is is discussed in the tutorial, could you point me at it? And if not, maybe it would be good to discuss it somewhere.
Also, the HoverIntent class definition contains the method destroy(), which I think is only used by the test script. If so, a little comment to that effect before it could be helpful. You know, // For the demo script or something.
Similarly, in the Index.html script section, the whole script seems to be labeled // for the demo, but if I'm understanding it correctly, it is only the setTimeout wrapper that is for the demo, while the contained new HoverIntent is necessary for the actual functioning of the tooltip. So I think the comment could be modified to say, say, // setTimeout is for the demo. However, I'm not really sure why the setTimeout is there -- the functionality and the demo seem to work fine if it is taken out, just leaving new HoverIntent({.....}) as shown in the instructions for the task. So I may be missing something there.
I don't know if this is what you prefer, but I broke some of my paragraphs up into shorter sub-paragraphs, and tried added an extra line separating the 'real' paragraphs, but it didn't work. Now using some funky HTML, which seems to work inconsistently here.

iliakan commented 4 years ago
  1. Is there a problem if something in constructor doesn't assign to this? Is it obvious what's going on? There was no discussion, as a constructor is a function, it can do everything.

  2. Added a comment to destroy in the source.

  3. I removed setTimeout, not sure why it was there =)

paroche commented 4 years ago

Not a problem, but surprising, in that, as far as I can see, it's unprecedented in the tutorial, where previously the constructor was always, I think (could be wrong), only used to decorate this.

It appeared to me as I described, that it was acting as a regular function, but I don't think (or at least don't recall) that this had ever been done before in all the examples or discussions of constructor functions, and it seems like kind of un-class like behavior -- previously classes were discussed as things used to build objects, and maybe to provide static methods related to those objects.

So I think it bears mentioning.

Going back to the 'Constructor operator - new' chapter (https://javascript.info/constructor-new), it states:

"When a function is executed with new, it does the following steps:

A new empty object is created and assigned to this. The function body executes. Usually it modifies this, adds new properties to it. The value of this is returned."

So it executes, and usually it modifies this. But I don't recall any time before seeing it do anything else but modify this (or do nothing at all) (though, again, maybe I missed them).

So I thought it was worth mentioning -- that a constructor may do more than build an object, and sometimes you may want it to, for this reason or that. More obvious things have been made explicit.

In fact, speaking of building objects, I was wondering why this code used a class at all -- the object built is never assigned, all the work is initiated by the two lines of code in the class constructor that I mentioned in the beginning, and it seems like it all could have been just as easily, or even a little more easily, handled using regular functions. But maybe I haven't thought it through.

Interesting about the setTimeout. Your comment did say it was for the demo. I wondered if maybe it had to do with giving the testing scripts time to load or something. But I don't know if it would even work that way.