0

In the following code example there are 3 div elements, none have an ID but each one is able to be uniquely accessed by being returned into an array. I'm wondering how JavaScript is keeping track of them? Is the browser assigning each object a unique reference? Is this unique reference discoverable or an attribute somewhere? Or is all that handled internally? 

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    div {
      width: 150px;
      height: 150px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>

    <script type="text/javascript">
      var divArray = document.getElementsByTagName("div");
      for (var i=0; i<divArray.length; i++){
        divArray[i].onclick = function(){
          this.style.display = "none";
        }
      }
    </script>
</body>
</html>
FrostedCookies
  • 2,253
  • 2
  • 13
  • 15
  • 2
    `JavaScript is distinguishing them somehow` - it knows the element you clicked – Jaromanda X Jan 05 '17 at 00:46
  • 1
    Do you only need to identify the element once it has been clicked, and from then on? or do you need to know about it before it has been clicked? how about between page refreshes, do you expect that the identifier remain the same? – haxxxton Jan 05 '17 at 00:48
  • What's the part that's confusing you? jQuery manipulates this to refer to the element the the event is triggered on... – Andrew Li Jan 05 '17 at 00:48
  • 3
    @ScottMarcus How is that a duplicate – Andrew Li Jan 05 '17 at 00:50
  • 1
    Have a look at http://www.quirksmode.org/js/this.html and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this. tl;dr: The value of `this` depends how a function is called. Calling the event handler on multiple elements, `e1.onclick()`, `e2.onclick()`, etc will all lead to `onclick` having different values for `this` even though it is the same function object. – Felix Kling Jan 05 '17 at 00:50
  • It explains how `this` binding works. – Scott Marcus Jan 05 '17 at 00:50
  • @AndrewLi How is `this` binding different in JQuery than in pure JS here. In the OPs code `this` is being applied to a DOM object not a JQuery object, and the `this` binding for the object that is the target of the "click" callback is no different than it would be in pure JS. – Scott Marcus Jan 05 '17 at 00:55
  • Haxxton: thanks for the comment. I edited my question to reflect that. Yes. That's my question. Does an element get some kind of hidden Unique id? Is it the same after a refresh? What is `this` storing? A memory address of the element? A virtual address that the browser is giving each element? And is that accessible? – FrostedCookies Jan 05 '17 at 07:19
  • @FelixKling Hey Felix, thanks for that link. I read through it and found ""evaluates to the value of the ThisBinding of the current execution context" (§11.1.1)." I guess my question is when you try to print the value of `this` as a string, it has a generic output that's not unique. So where/how is the "thisBinding" value stored? – FrostedCookies Jan 05 '17 at 07:34
  • Think of `this` is a readonly variable. The value of `this` is stored in the execution context created by calling the function. See https://www.ecma-international.org/ecma-262/7.0/#sec-function-environment-records . – Felix Kling Jan 05 '17 at 08:05

2 Answers2

1

Yes, JavaScript knows which element you clicked: in this example, it refers to whatever div you're clicking on, in turn calling the click() function. getElementsByTagName(div) is passing div as a parameter, so the object that is passed as div is what becomes this in your example.

this, much like in English, can refer to many different things based on the context. And it's even got different contexts based on which language you're using. For a more thorough definition, I strongly recommend checking out T.J. Crowder's explanation.

When JavaScript references the DOM, it doesn't explicitly assign a unique ID to anything, though it does create a memory allocation. This can be seen through memory analysis and heap profiling. All JavaScript code creates memory in two ways; directly from objects themselves, and also from references to those objects.

Hope this helps!

Community
  • 1
  • 1
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • The JavaScript Runtime is "running" the current action. `this` refers to the Object (may or may not be a DOM element) that caused the current code to be executed. – Scott Marcus Jan 05 '17 at 00:52
  • @ScottMarcus -- that's essentially what I meant, just poor phraseology ;) Updated to be a bit more specific. – Obsidian Age Jan 05 '17 at 00:53
  • The wording is worse now. `this` does not refer to the "element that's the subject of the function being called." And "in this case click()" is certainly not what `this` refers to. – Scott Marcus Jan 05 '17 at 00:59
  • @ScottMarcus If there's so much wrong with my answer, how about providing a better answer yourself, rather than merely complaining about me trying to help. – Obsidian Age Jan 05 '17 at 01:06
  • 1
    I've already posted my response. You can go read it if you were to take the time to do so. Have a thicker skin. Your answer is wrong. At least I didn't down vote you. I'm trying to help you understand. – Scott Marcus Jan 05 '17 at 01:10
  • Hi obsidian, thanks for the reply. I guess my follow up question would be, what is "this"? In C++ `this` is a pointer to the object with a memory address. What is `this` referencing in JavaScript? Is there a unique ID every element has somewhere? Sorry for the earlier question which was admittedly really vague... – FrostedCookies Jan 05 '17 at 07:14
  • Hi Frosted. HTML DOM elements don't have a unique ID unless you explicitly give them one. When JavaScript references the DOM, it doesn't explicitly assign a unique ID to anything, though it does create a memory allocation. I've updated my answer to give a clearer explanation -- please refer to that :) – Obsidian Age Jan 05 '17 at 07:56
1

Thë "this" keyword has nothing to do with jQuery, it's a JavaScript generic name/id of the current context at which something is actually happening.

When an element is clicked and there's a listener to the click event - the this keyword will be pointing exactly at the element clicked and can be used as a universal handle to the object of interest.

Everything that happens in JavaScript will be happening within a certain context or (when DOM is involved) to a certain object/element.

So there's no need for ID's or Names when the subject is already at hand or is the main actor of the process or the action taken on it.

Bekim Bacaj
  • 5,707
  • 2
  • 24
  • 26