Attach a class method to event handler

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

    Attach a class method to event handler

    Hi guys,

    until now I make so:

    [html]
    <div id="my_div"><!-- content --></div>

    [simple-js]
    MyClass.prototy pe.doSomething = function( ) {};
    MyClass.prototy pe.assignFun = function( )
    {
    var selfObj = this;
    document.getEle mentById('my_di v').onclick = function ( e )
    {
    selfObj.doSomet hingWith( e || event );
    }
    }

    How do I avoid the closure of my object reference?
    And MyClass is not a Singleton...
  • Peter Michaux

    #2
    Re: Attach a class method to event handler

    On May 29, 8:36 am, Ugo <priv...@nospam .itwrote:
    Hi guys,
    >
    until now I make so:
    >
    [html]
    <div id="my_div"><!-- content --></div>
    >
    [simple-js]
    MyClass.prototy pe.doSomething = function( ) {};
    MyClass.prototy pe.assignFun = function( )
    {
    var selfObj = this;
    document.getEle mentById('my_di v').onclick = function ( e )
    {
    selfObj.doSomet hingWith( e || event );
    }
    >
    }
    >
    How do I avoid the closure of my object reference?
    And MyClass is not a Singleton...
    if you want to avoid the closure then don't create one with selfObj.

    MyClass.prototy pe.doSomething = function( ) {};
    MyClass.prototy pe.assignFun = function( )
    {
    document.getEle mentById('my_di v').onclick = function ( e )
    {
    MyClass.prototy pe.doSomethingW ith( e || event );
    }

    }

    or perhaps even

    MyClass.prototy pe.doSomething = function( ) {};
    MyClass.prototy pe.assignFun = function( )
    {
    document.getEle mentById('my_di v').onclick =
    MyClass.prototy pe.doSomethingW ith;
    }


    It may be a mistake to be thinking in terms of "MyClass" as JavaScript
    doesn't have classes.

    Peter

    Comment

    • Thomas 'PointedEars' Lahn

      #3
      Re: Attach a class method to event handler

      Peter Michaux wrote:
      On May 29, 8:36 am, Ugo <priv...@nospam .itwrote:
      >until now I make so:
      >>
      >[html]
      ><div id="my_div"><!-- content --></div>
      >>
      >[simple-js]
      >MyClass.protot ype.doSomething = function( ) {};
      >MyClass.protot ype.assignFun = function( )
      >{
      > var selfObj = this;
      > document.getEle mentById('my_di v').onclick = function ( e )
      > {
      > selfObj.doSomet hingWith( e || event );
      > }
      >}
      >>
      >How do I avoid the closure of my object reference?
      MyClass.prototy pe.assignFun = function() {
      document.getEle mentById('my_di v').onclick = (function(o) {
      return function(e) {
      o.doSomethingWi th(e || window.event);
      };
      })(this);
      };

      That said, you should avoid mixing "DOM Level 0" and DOM Level 2 features in
      one statement; at least you should feature-test both before you mix them.
      Such Reference Worms[tm] are error-prone anyway. Consider this (still
      error-prone because of the partially proprietary, apparently untestable
      approach):

      MyClass.prototy pe.assignFun = function() {
      if (isMethod(docum ent, "getElementById "))
      {
      var target = document.getEle mentById('my_di v');
      if (target)
      {
      target.onclick = (function(o) {
      return function(e) {
      o.doSomethingWi th(e || window.event);
      };
      })(this);
      }
      }
      };
      >And MyClass is not a Singleton...
      >
      if you want to avoid the closure then don't create one with selfObj.
      >
      MyClass.prototy pe.doSomething = function( ) {};
      MyClass.prototy pe.assignFun = function( )
      {
      document.getEle mentById('my_di v').onclick = function ( e )
      {
      MyClass.prototy pe.doSomethingW ith( e || event );
      }
      }
      While this is not the least equivalent to the original, `MyClass' is the
      bound "variable" of the closure then.
      or perhaps even
      >
      MyClass.prototy pe.doSomething = function( ) {};
      MyClass.prototy pe.assignFun = function( )
      {
      document.getEle mentById('my_di v').onclick =
      MyClass.prototy pe.doSomethingW ith;
      }
      It is getting worse. Now the method of the prototype object will be called
      as a method of the Global Object.
      It may be a mistake to be thinking in terms of "MyClass" as JavaScript
      doesn't have classes.
      That, at least, is correct.


      PointedEars
      --
      var bugRiddenCrashP ronePieceOfJunk = (
      navigator.userA gent.indexOf('M SIE 5') != -1
      && navigator.userA gent.indexOf('M ac') != -1
      ) // Plone, register_functi on.js:16

      Comment

      • RobG

        #4
        Re: Attach a class method to event handler

        On May 30, 10:35 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
        wrote:
        [...]
        That said, you should avoid mixing "DOM Level 0" and DOM Level 2 features in
        one statement; at least you should feature-test both before you mix them.
        Such Reference Worms[tm] are error-prone anyway. Consider this (still
        error-prone because of the partially proprietary, apparently untestable
        approach):
        >
        MyClass.prototy pe.assignFun = function() {
        if (isMethod(docum ent, "getElementById "))
        {
        var target = document.getEle mentById('my_di v');
        if (target)
        {
        target.onclick = (function(o) {
        return function(e) {
        o.doSomethingWi th(e || window.event);
        };
        })(this);
        }
        Doesn't that create a circular reference to the DOM element referenced
        by target? Should that be avoided by using, at this point:

        target = null;

        }
        };

        --
        Rob

        Comment

        • Peter Michaux

          #5
          Re: Attach a class method to event handler

          On May 29, 5:35 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
          wrote:
          Peter Michaux wrote:
          On May 29, 8:36 am, Ugo <priv...@nospam .itwrote:
          until now I make so:
          >
          [html]
          <div id="my_div"><!-- content --></div>
          >
          [simple-js]
          MyClass.prototy pe.doSomething = function( ) {};
          MyClass.prototy pe.assignFun = function( )
          {
          var selfObj = this;
          document.getEle mentById('my_di v').onclick = function ( e )
          {
          selfObj.doSomet hingWith( e || event );
          }
          }
          >
          How do I avoid the closure of my object reference?
          >
          MyClass.prototy pe.assignFun = function() {
          document.getEle mentById('my_di v').onclick = (function(o) {
          return function(e) {
          o.doSomethingWi th(e || window.event);
          };
          })(this);
          };
          >
          That said, you should avoid mixing "DOM Level 0" and DOM Level 2 features in
          one statement; at least you should feature-test both before you mix them.
          Such Reference Worms[tm] are error-prone anyway. Consider this (still
          error-prone because of the partially proprietary, apparently untestable
          approach):
          >
          MyClass.prototy pe.assignFun = function() {
          if (isMethod(docum ent, "getElementById "))
          {
          var target = document.getEle mentById('my_di v');
          if (target)
          {
          target.onclick = (function(o) {
          return function(e) {
          o.doSomethingWi th(e || window.event);
          };
          })(this);
          }
          }
          };
          >
          And MyClass is not a Singleton...
          >
          if you want to avoid the closure then don't create one with selfObj.
          >
          MyClass.prototy pe.doSomething = function( ) {};
          MyClass.prototy pe.assignFun = function( )
          {
          document.getEle mentById('my_di v').onclick = function ( e )
          {
          MyClass.prototy pe.doSomethingW ith( e || event );
          }
          }
          >
          While this is not the least equivalent to the original, `MyClass' is the
          bound "variable" of the closure then.
          >
          or perhaps even
          >
          MyClass.prototy pe.doSomething = function( ) {};
          MyClass.prototy pe.assignFun = function( )
          {
          document.getEle mentById('my_di v').onclick =
          MyClass.prototy pe.doSomethingW ith;
          }
          >
          It is getting worse. Now the method of the prototype object will be called
          as a method of the Global Object.
          It wasn't clear what the code in the original post was doing or even
          if the doSomething function uses "this". Without a complete question a
          complete answer is not possible.

          [snip]

          Peter

          Comment

          • Thomas 'PointedEars' Lahn

            #6
            Re: Attach a class method to event handler

            Peter Michaux wrote:
            On May 29, 5:35 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
            wrote:
            >Peter Michaux wrote:
            >>[...]
            >>MyClass.proto type.doSomethin g = function( ) {};
            >>MyClass.proto type.assignFun = function( )
            >>{
            >> document.getEle mentById('my_di v').onclick = function ( e )
            >> {
            >> MyClass.prototy pe.doSomethingW ith( e || event );
            >> }
            >>}
            >>
            >While this is not the least equivalent to the original, `MyClass' is the
            >bound "variable" of the closure then.
            >>
            >>or perhaps even
            >>>
            >>MyClass.proto type.doSomethin g = function( ) {};
            >>MyClass.proto type.assignFun = function( )
            >>{
            >> document.getEle mentById('my_di v').onclick =
            >> MyClass.prototy pe.doSomethingW ith;
            >>}
            >It is getting worse. Now the method of the prototype object will be called
            >as a method of the Global Object.
            >
            It wasn't clear what the code in the original post was doing or even
            if the doSomething function uses "this". Without a complete question a
            complete answer is not possible.
            You are winding around the issue.

            It does not matter whether the purpose of the code was clear (to you) or
            not; using the `this' reference in a prototype method and using the
            reference to the prototype object there are clearly not the same thing, nor
            are assigning the reference to a prototype method versus assigning a
            reference to a Function object that calls this prototype method (as
            inherited through the prototype chain). So it cannot be expected to have
            the same outcome, and is therefore not the least equivalent to one another.

            Host objects aside, consider this (in Fx 2.0.0.14):

            function MyObject(answer ) {
            this.bar = function() {
            window.alert(an swer);
            };
            }

            MyObject.protot ype.foo = function() {
            // 42
            this.bar();

            // 23,function MyObject...
            MyObject.protot ype.bar();

            var f = MyObject.protot ype.bar;

            // 23,[Window]
            f();
            };

            MyObject.protot ype.bar = function() {
            window.alert([23, this.constructo r]);
            }

            (new MyObject(42)).f oo();

            Trimming quotes a bit more would increase the chance of your postings being
            recognized in the future.


            PointedEars
            --
            var bugRiddenCrashP ronePieceOfJunk = (
            navigator.userA gent.indexOf('M SIE 5') != -1
            && navigator.userA gent.indexOf('M ac') != -1
            ) // Plone, register_functi on.js:16

            Comment

            • Laurent vilday

              #7
              Re: Attach a class method to event handler

              Thomas 'PointedEars' Lahn a écrit :
              Trimming quotes a bit more would increase the chance of your postings being
              recognized in the future.
              FFS, who do you think you are ? Go to hell !

              --
              laurent

              Comment

              • Ugo

                #8
                Re: Attach a class method to event handler

                >>[simple-js]
                >>MyClass.proto type.doSomethin g = function( ) {};
                >>MyClass.proto type.assignFun = function( )
                >>{
                >> var selfObj = this;
                >> document.getEle mentById('my_di v').onclick = function ( e )
                >> {
                >> selfObj.doSomet hingWith( e || event );
                >> }
                >>}
                >>>
                >>How do I avoid the closure of my object reference?
                >
                MyClass.prototy pe.assignFun = function() {
                document.getEle mentById('my_di v').onclick = (function(o) {
                return function(e) {
                o.doSomethingWi th(e || window.event);
                };
                })(this);
                };
                >
                That said, you should avoid mixing "DOM Level 0" and DOM Level 2 features in
                one statement;
                i.e.?
                Where did I mix?
                So, if I am not mistaken, you make a closure too:
                your approach is more elegant, but you close the parameter "o" of the
                anonymous function, or not?
                at least you should feature-test both before you mix them.
                it was only example...

                Comment

                • Peter Michaux

                  #9
                  Re: Attach a class method to event handler

                  On May 30, 4:43 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                  wrote:
                  Peter Michaux wrote:
                  On May 29, 5:35 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                  wrote:
                  Peter Michaux wrote:
                  >[...]
                  >MyClass.protot ype.doSomething = function( ) {};
                  >MyClass.protot ype.assignFun = function( )
                  >{
                  > document.getEle mentById('my_di v').onclick = function ( e )
                  > {
                  > MyClass.prototy pe.doSomethingW ith( e || event );
                  > }
                  >}
                  >
                  While this is not the least equivalent to the original, `MyClass' is the
                  bound "variable" of the closure then.
                  >
                  >or perhaps even
                  >
                  >MyClass.protot ype.doSomething = function( ) {};
                  >MyClass.protot ype.assignFun = function( )
                  >{
                  > document.getEle mentById('my_di v').onclick =
                  > MyClass.prototy pe.doSomethingW ith;
                  >}
                  It is getting worse. Now the method of the prototype object will be called
                  as a method of the Global Object.
                  >
                  It wasn't clear what the code in the original post was doing or even
                  if the doSomething function uses "this". Without a complete question a
                  complete answer is not possible.
                  >
                  You are winding around the issue.
                  No I'm not.
                  It does not matter whether the purpose of the code was clear (to you) or
                  not;
                  If the question is not clear then many answers are possible.
                  using the `this' reference in a prototype method
                  There was no use of "this" in the original question.
                  and using the
                  reference to the prototype object there are clearly not the same thing, nor
                  are assigning the reference to a prototype method versus assigning a
                  reference to a Function object that calls this prototype method (as
                  inherited through the prototype chain). So it cannot be expected to have
                  the same outcome, and is therefore not the least equivalent to one another.
                  But it may have acceptable outcome. The question was not clear. That
                  was actually one point I was making with my original answer.

                  [snip]


                  Peter

                  Comment

                  • Thomas 'PointedEars' Lahn

                    #10
                    Re: Attach a class method to event handler

                    Peter Michaux wrote:
                    On May 30, 4:43 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                    wrote:
                    >Peter Michaux wrote:
                    >>On May 29, 5:35 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                    >>wrote:
                    >>>Peter Michaux wrote:
                    >>>>[...]
                    >>>>MyClass.pro totype.doSometh ing = function( ) {};
                    >>>>MyClass.pro totype.assignFu n = function( )
                    >>>>{
                    >>>> document.getEle mentById('my_di v').onclick = function ( e )
                    >>>> {
                    >>>> MyClass.prototy pe.doSomethingW ith( e || event );
                    >>>> }
                    >>>>}
                    >>>>
                    >>>While this is not the least equivalent to the original, `MyClass' is the
                    >>>bound "variable" of the closure then.
                    >>[...]
                    >>It wasn't clear what the code in the original post was doing or even
                    >>if the doSomething function uses "this". Without a complete question a
                    >>complete answer is not possible.
                    >You are winding around the issue.
                    >
                    No I'm not.
                    You are overlooking something important, then.
                    >It does not matter whether the purpose of the code was clear (to you) or
                    >not;
                    >
                    If the question is not clear then many answers are possible.
                    True. However, a good answer would at least provide an equivalent solution
                    to the presented problem (which was, without doubt, how to avoid closures).
                    Yours did not provide an equivalent solution. (Mine did provide a
                    equivalent solution, but maybe no solution to the OP's problem. Insofar
                    both of us might have failed to provide a good answer.)
                    >using the `this' reference in a prototype method
                    >
                    There was no use of "this" in the original question.
                    My example shows that this does not matter. Literally.

                    I have trimmed the quote more so that you may see the point more easily.


                    PointedEars
                    --
                    Anyone who slaps a 'this page is best viewed with Browser X' label on
                    a Web page appears to be yearning for the bad old days, before the Web,
                    when you had very little chance of reading a document written on another
                    computer, another word processor, or another network. -- Tim Berners-Lee

                    Comment

                    • Peter Michaux

                      #11
                      Re: Attach a class method to event handler

                      On May 30, 12:33 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                      wrote:
                      Peter Michaux wrote:
                      On May 30, 4:43 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                      wrote:
                      Peter Michaux wrote:
                      >On May 29, 5:35 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
                      >wrote:
                      >>Peter Michaux wrote:
                      >>>[...]
                      >>>MyClass.prot otype.doSomethi ng = function( ) {};
                      >>>MyClass.prot otype.assignFun = function( )
                      >>>{
                      >>> document.getEle mentById('my_di v').onclick = function ( e )
                      >>> {
                      >>> MyClass.prototy pe.doSomethingW ith( e || event );
                      >>> }
                      >>>}
                      >
                      >>While this is not the least equivalent to the original, `MyClass' is the
                      >>bound "variable" of the closure then.
                      >[...]
                      >It wasn't clear what the code in the original post was doing or even
                      >if the doSomething function uses "this". Without a complete question a
                      >complete answer is not possible.
                      You are winding around the issue.
                      >
                      No I'm not.
                      >
                      You are overlooking something important, then.
                      >
                      It does not matter whether the purpose of the code was clear (to you) or
                      not;
                      >
                      If the question is not clear then many answers are possible.
                      >
                      True. However, a good answer would at least provide an equivalent solution
                      to the presented problem (which was, without doubt, how to avoid closures).
                      Yours did not provide an equivalent solution. (Mine did provide a
                      equivalent solution, but maybe no solution to the OP's problem. Insofar
                      both of us might have failed to provide a good answer.)
                      >
                      using the `this' reference in a prototype method
                      >
                      There was no use of "this" in the original question.
                      >
                      My example shows that this does not matter. Literally.
                      >
                      I have trimmed the quote more so that you may see the point more easily.
                      I can see that you have done a very nice job at trimming the quotes.

                      Peter

                      [snip] <-- see how I trimmed your signature.

                      Comment

                      Working...