Q on constructors and OOP in js

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • ivanhoe

    Q on constructors and OOP in js

    I've got constructor like this(just short example):

    function Item() {
    this.elem = document.body.a ppendChild(docu ment.createElem ent('div'));
    this.elem.onmou seover = this.mOver;
    ...
    return this;
    }

    and mouse over method is something like:

    Item.prototype. mOver = function() {
    this.className= 'something';
    }

    now my question is about using 'this' inside function above...Am I
    right that it is acctually 'this' reference from onmouseover, thus
    referencing div element, not instance of Item class? How could I then
    access the instance of Item class , from within mOver method?


    It would be perfect if I could have only one object, the div element,
    and then I could easily add methods and properties, and there would be
    only one 'this' to work with....I know how to do it with 'regular' js,
    but how to put that in OO form, so that I can create a new instance
    with: new Item() ??


    thanx,
    ivan
  • Martin Honnen

    #2
    Re: Q on constructors and OOP in js



    ivanhoe wrote:
    [color=blue]
    > I've got constructor like this(just short example):
    >
    > function Item() {
    > this.elem = document.body.a ppendChild(docu ment.createElem ent('div'));
    > this.elem.onmou seover = this.mOver;
    > ...
    > return this;
    > }
    >
    > and mouse over method is something like:
    >
    > Item.prototype. mOver = function() {
    > this.className= 'something';
    > }
    >
    > now my question is about using 'this' inside function above...Am I
    > right that it is acctually 'this' reference from onmouseover, thus
    > referencing div element, not instance of Item class? How could I then
    > access the instance of Item class , from within mOver method?[/color]

    You could set
    this.elem.item = this;
    in the Item constructor and then access
    this.item
    in the onmouseever event handler.

    --

    Martin Honnen


    Comment

    • Thomas 'PointedEars' Lahn

      #3
      Re: Q on constructors and OOP in js

      ivanhoe wrote:[color=blue]
      > I've got constructor like this(just short example):
      >
      > function Item() {
      > this.elem = document.body.a ppendChild(docu ment.createElem ent('div'));[/color]

      You have tested the features before, have you not?

      <http://pointedears.de/scripts/test/whatami>
      [color=blue]
      > this.elem.onmou seover = this.mOver;
      > ...
      > return this;[/color]

      A constructor should not return anything.
      [color=blue]
      > }
      >
      > and mouse over method is something like:
      >
      > Item.prototype. mOver = function() {
      > this.className= 'something';
      > }
      >
      > now my question is about using 'this' inside function above...Am I
      > right that it is acctually 'this' reference from onmouseover, thus
      > referencing div element, not instance of Item class?[/color]

      `Item' is a prototype, not a class. ECMAScript < 4, JavaScript < 2
      and JScript < 6 use prototype-based inheritance.

      And yes, `this' within the mOver() method will refer to the calling
      object, which is the "div" element in the case the event listener for
      the "mouseover" event is called. However, yours is the proprietary
      approach, the standards compliant approach would be to add an event
      listener using the addEventListene r() method of the DOM object.
      [color=blue]
      > How could I then access the instance of Item class, from within
      > mOver method?[/color]

      As Martin said, but we are still not talking about classes.
      [color=blue]
      > It would be perfect if I could have only one object, the div element,
      > and then I could easily add methods and properties, and there would be
      > only one 'this' to work with....I know how to do it with 'regular' js,[/color]

      What do you consider "'regular' js"?
      [color=blue]
      > but how to put that in OO form,[/color]

      What do you consider "OO form"?
      [color=blue]
      > so that I can create a new instance with: new Item() ??[/color]

      I do not really understand what you intend to do. I assume that you want
      to add properties to objects. Fine. Just get a reference to the object
      and add properties (as long as the DOM lets you do it.) No prototype and
      no constructor required.

      If you rather want to add properties to all the "div" element objects,
      whether this is possible depends on the DOM. The "div" element is
      represented in the DOM of the UA as a host object, if that. Unless
      that DOM allows you to access the prototype of host objects, there is
      not a chance to do that. The Gecko DOM, e.g., allows to access the
      HTMLDivElement prototype, other DOMs AFAIK do not, so if you want that,
      you are required to iterate the collection of HTMLDivElement objects.


      PointedEars

      Comment

      • Lasse Reichstein Nielsen

        #4
        Re: Q on constructors and OOP in js

        Thomas 'PointedEars' Lahn <PointedEars@nu rfuerspam.de> writes:
        [color=blue]
        > A constructor should not return anything.[/color]

        It is perfectly legal for a Javascript funtion to return a value, even
        when it is meant to be used as a constructor. If the returned value
        is an object, it is used as the value of the "new" operator expression
        instead of the created object.

        In this case (returning "this") it's redundant, though.

        /L
        --
        Lasse Reichstein Nielsen - lrn@hotpop.com
        DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
        'Faith without judgement merely degrades the spirit divine.'

        Comment

        • Lasse Reichstein Nielsen

          #5
          Re: Q on constructors and OOP in js

          ivanhoe011@yaho o.com (ivanhoe) writes:
          [color=blue]
          > function Item() {
          > this.elem = document.body.a ppendChild(docu ment.createElem ent('div'));
          > this.elem.onmou seover = this.mOver;[/color]
          [color=blue]
          > and mouse over method is something like:
          >
          > Item.prototype. mOver = function() {
          > this.className= 'something';
          > }[/color]

          [color=blue]
          > now my question is about using 'this' inside function above...Am I
          > right that it is acctually 'this' reference from onmouseover, thus
          > referencing div element, not instance of Item class?[/color]

          If I read you correctly, then yes.
          The "this" operator refers to the object on which the function was
          called as a method. It's not bound to where the function was first
          assigned as a method. In Javascript, the function is independent of
          the objects it lives on, and only the way it is called defines what
          "this" refers to in its body.
          [color=blue]
          > How could I then access the instance of Item class , from within
          > mOver method?[/color]

          Change:
          this.elem.onmou seover = this.mOver;
          to
          var self = this;
          this.eleme.onmo useover = function(){ self.mOver(); };
          [color=blue]
          > It would be perfect if I could have only one object, the div element,
          > and then I could easily add methods and properties, and there would be
          > only one 'this' to work with....I know how to do it with 'regular' js,
          > but how to put that in OO form, so that I can create a new instance
          > with: new Item() ??[/color]

          Regular Javascript *is* object oriented. But I guess what you mean can
          be achieved by:

          function Item() {
          var elem = document.body.a ppendChild(docu ment.createElem ent('div'));
          elem.onmouseove r = Item.mOver;
          return elem;
          }
          Item.mOver = function() { /* whatever... */ };

          Then
          var someItem = new Item();
          would make someItem point to the element with the onmouseover already
          in place. However you could just write
          var someItem = Item();
          instead, so maybe just renaming "Item" to "createItem " and dropping the
          "new" would be better.

          /L
          --
          Lasse Reichstein Nielsen - lrn@hotpop.com
          DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
          'Faith without judgement merely degrades the spirit divine.'

          Comment

          • Thomas 'PointedEars' Lahn

            #6
            Re: Q on constructors and OOP in js

            Lasse Reichstein Nielsen wrote:[color=blue]
            > Thomas 'PointedEars' Lahn <PointedEars@nu rfuerspam.de> writes:[color=green]
            >> A constructor should not return anything.[/color]
            >
            > It is perfectly legal for a Javascript funtion to return a value, even
            > when it is meant to be used as a constructor. [...][/color]

            That is why I wrote "should not" and not "must not".


            PointedEars

            Comment

            • ivanhoe

              #7
              Re: Q on constructors and OOP in js

              Thomas 'PointedEars' Lahn <PointedEars@nu rfuerspam.de> wrote in message news:<410E673A. 8080103@Pointed Ears.de>...
              [..cut..][color=blue][color=green]
              > > It would be perfect if I could have only one object, the div element,
              > > and then I could easily add methods and properties, and there would be
              > > only one 'this' to work with....I know how to do it with 'regular' js,[/color]
              >
              > What do you consider "'regular' js"?
              >[color=green]
              > > but how to put that in OO form,[/color]
              >
              > What do you consider "OO form"?
              >[color=green]
              > > so that I can create a new instance with: new Item() ??[/color]
              >
              > I do not really understand what you intend to do. I assume that you want
              > to add properties to objects. Fine. Just get a reference to the object
              > and add properties (as long as the DOM lets you do it.) No prototype and
              > no constructor required.
              >[/color]

              well, no...just adding properies to existing objects using DOM methods
              is what i called 'regular' js...I know how to do it that way...since I
              was reading something about prototypes in js, I was curious about
              other aproach of creating custom objects using new(what I called OO
              way, which is pretty stupid name since I know js is all OO, but
              couldn't think of anything better :) )

              see below for what I hope is more clear explanation...
              [color=blue]
              > If you rather want to add properties to all the "div" element objects,
              > whether this is possible depends on the DOM. The "div" element is
              > represented in the DOM of the UA as a host object, if that. Unless
              > that DOM allows you to access the prototype of host objects, there is
              > not a chance to do that. The Gecko DOM, e.g., allows to access the
              > HTMLDivElement prototype, other DOMs AFAIK do not, so if you want that,
              > you are required to iterate the collection of HTMLDivElement objects.
              >
              >
              > PointedEars[/color]


              basicly I wanted a way to have an object that inherits DIV element, so
              that I can do new Item() and get my custom div element created in
              return...just like using document.create Element, and then adding stuff
              to it, but through use of prototypes....w hy do I need that? Well, no
              reason at all, just was wondering would it be possible....:)

              I know I can use prototype to change all DIV's, but is there a way to
              inherit it?

              Comment

              • ivanhoe

                #8
                Re: Q on constructors and OOP in js

                Lasse Reichstein Nielsen <lrn@hotpop.com > wrote in message news:<wu0hqmip. fsf@hotpop.com> ...
                [..cut..][color=blue]
                > Regular Javascript *is* object oriented. But I guess what you mean can
                > be achieved by:
                >
                > function Item() {
                > var elem = document.body.a ppendChild(docu ment.createElem ent('div'));
                > elem.onmouseove r = Item.mOver;
                > return elem;
                > }
                > Item.mOver = function() { /* whatever... */ };
                >
                > Then
                > var someItem = new Item();
                > would make someItem point to the element with the onmouseover already
                > in place. However you could just write
                > var someItem = Item();
                > instead, so maybe just renaming "Item" to "createItem " and dropping the
                > "new" would be better.
                >[/color]

                well, yes you're 100% right about that...but as I mentioned in other
                reply I don't really need this done anyhow, but I'm more of killing
                spare time by experimenting with creating custom objects and
                inheriting them, so I was hoping for stricly OO way of doing the
                exactly the same as your code does, but by inheriting DIV
                object(class, prototype, or how ever it's called in js terminology..),
                adding aditional functionality to it and then creating instance of it
                by using new...

                if it's possible, that is...if not, i'll have to go thinking of some
                new useless complication to ask about :))
                Thanx for helping in any case :)

                Comment

                Working...