SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Code:
    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    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.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •