I don't understand the keyword this. Please explain this code for me

JavaScript
1 
objviewer.ObjectViewer = function(obj, div, isInline, addNew) {
        styling.removeAllChildren(div);
        this.object = obj;
        this.mainDiv = div;
        this.mainDiv.viewer = this; //ObjectViewer have its own viewer refering to itself
        this.isInline = isInline;
        this.addNew = addNew;
        var table = document.createElement("table");
        this.tbod = document.createElement("tbody");
        table.appendChild(this.tbod);
        this.fields = new Array();
        this.children = new Array();
        for(var i in this.object) {
                this.fields[i] = new objectviewer.PropertyViewer(this, i);
        }
//ObjectViewer doesn't have a closing bracket in the book
        objviewer.PropertyViewer = function(objectViewer, name) {
                this.objectViewer = objectViewer;
                this.name = name;
                this.value = objectViewer.object['name'];
                this.rowTr = document.createElement("tr");
                this.rowTr.className = 'objViewRow';
                this.valTd = document.createElement("td");
                this.valTd.className = 'objViewValue';
                this.valTd.viewer = this; //This one have viewer again referring to PropertyViewer
                this.rowTr.appendChild(this.valTd);
                var valDiv = this.renderSimple();
                this.valTd.appendChild(valDiv);
                viewer.tbod.appendChild(this.rowTr); //How come viewer have tbod? viewer is referencing PropertyViewer and it doesn't have tbod in this object.
        }
        
        objviewer.PropertyViewer.prototype.renderSimple = function() {
                var valDiv = document.createElement("div");
                var valTxt = document.createElement(this.value);
                valDiv.appendChild(valTxt);
                if(this.spec.editable) {
                        valDiv.className += " editable";
                        valDiv.viewer = this;
                        valDiv.onclick = objviewer.PropertyViewer.editSimpleProperty;
                }
                return valDiv;
        }

I dont understand this. This code have 3 viewer, and all of them are referencing its own object. How come viewer.tbod.appendChild is working? From what I understand viewer.tbod shouldn’t work because viewer is referencing its own PropertyViewer and it doesn’t have tbod in its context. The tbod is in ObjectViewer not in propertyviewer. I put some comments there to outline what I dont understand. Thanks

2 

this.mainDiv.viewer = this; //ObjectViewer have its own viewer refering to itself

This is done because once you leave the function, the this keyword refers to a different object. What the above piece of code does is to save the reference that the current this keyword refers to, so that the reference can be referred to later on.


viewer.tbod.appendChild(this.rowTr); //How come viewer have tbod? viewer is referencing PropertyViewer and it doesn't have tbod in this object.

tbod is referring to the tbody element that is created in the previous function.