Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    208
    Thanks
    52
    Thanked 1 Time in 1 Post

    Academic question about objects

    I have been making frequent use of object constructor functions that
    are instantiated in the page prior to the onload event.

    For instance
    Code:
    <!-- preceding head related html -->
    <javascript src="blahObjectConstructorCode.js"></javascript>
    <javascript type....<the drill> >
    var shoes = new shoe()
    // object shoe has method this.getSize = function() {return 15}
    // and a method that assigns an event listener to a form element 
    // this.shoeHornHandler = function() { alert(this.getSize()+'is too small')}
    // key word this can be used here as this.getSize()
    // this.shoeHorn = function()
    //                          { var button = getElementById etc etc;
    // Key word this cannot be use to invoke shoeHornHandler 
    //addEventListener('click', function(){ shoes.shoeHornHandler() }) }
    // THE QUESTION How can you make it so the instance name isn't necessary
    window.onload = function()
       { shoes.shoeHorn() }
    </javascript>
    So the object code is invoked with new. Then the method shoeHorn is called
    as shoes.shoeHorn(). In This method, the name of the instantiated object
    has to be referred to. Using 'this' will not work.
    So the object constructor has been tied to the object instance.
    How would you pass the object instance reference back to the object
    code so the constructor can be used to instantiate other object instances.

    I have tried using 'this' in the addEventListener code to invoke methods
    and have not been able to get it to work. Since the object constructor has
    already been called it seems convoluted to pass the instance name back to
    it. I believe using object prototype will effect all of the instances of the
    same object.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Please, show us the real
    code for the shoe function.

    It could be that
    you have called ...

    var shoes = new shoe()

    before page is loaded so
    the form element does
    not yet exist and so
    a method that assigns an event listener to a form element
    will of course fail.

    Without the actual code
    this is only a guess ?

    Now I'm still guessing here
    but it seems to me that you
    would want a new button
    created each new instance
    created. It seems to me that
    your code as presented would
    attempt to assign multiple
    event handlers, one for each
    instance, to the same button.

    Now I'm not guessing when I
    say "objects" should be modeled
    after real world objects(things).
    You should have two instances of shoe,
    with the same properties except
    each should be a mirror image
    of the other. Different things
    could happen to each shoe like
    one could loose an heel or break
    a lace.
    Last edited by DaveyErwin; 12-24-2013 at 03:49 PM.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    208
    Thanks
    52
    Thanked 1 Time in 1 Post

    Real world code

    Code:
    function shoe(name)
    {
    this.name = name;
    this.getSize = function() {return 15}
    this.shoeHornHandler = function() { alert(this.getSize()+'is too small')}
    this.shoeHorn = function()
                            { 
                               var button = document.getElementById('shoeButton');
                               if(button)
                                {
                                  // HOW WOULD I CALL shoeHornHandler() IN AN ABSTRACT MANNER??
                                  // RATHER THAN BY REFERENCE TO THE SPECIFIC INSTANCE
                                  button.addEventListener('click', function(){ shoes.shoeHornHandler() }, false);
                                 }
                            }
    }
    As I have been thinking about it I could do
    var shoes = new shoe('shoes');
    then invoke the shoeHornHandler in the event listener as this[this.name].shoeHornHandler() ??? maybe

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    changes in red
    Code:
    function shoe(name)
    {
    this.name = name;
    that=this;
    this.getSize = function() {return 15}
    this.shoeHornHandler = function() { alert(this.getSize()+'is too small')}
    this.shoeHorn = function()
                            { 
                               var button = document.getElementById('shoeButton');
                               if(button)
                                {
                                  // HOW WOULD I CALL shoeHornHandler() IN AN ABSTRACT MANNER??
                                  // RATHER THAN BY REFERENCE TO THE SPECIFIC INSTANCE
                                  button.addEventListener('click', function(){ that.shoeHornHandler() }, false);
                                 }
                            }
    }
    you can also replace
    Code:
    button.addEventListener('click', function(){ that.shoeHornHandler() }, false);
    with
    Code:
    button.addEventListener('click', that.shoeHornHandler.bind(that), false);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    anotherJEK (12-25-2013)

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    208
    Thanks
    52
    Thanked 1 Time in 1 Post

    O.k....

    I am having trouble wrapping my grey matter around the use of "that".
    But I will try it out in some experimental situations to see what happens.

    Thanks for the suggestions

    Having set up hypothetical situation use of 'that' as has been presented
    does work ( but I am not enough of a programmer to understand why
    it works that way... 'that' presumably is global in scope but has not
    been initiated in the global scope and what connection does it have to
    the specific instance??)

    My interest is in a hypothetical situation where there is a form in a content
    management interface and the user enters data about a product in a catalog into
    a data base. So different shoe styles might be assigned price, manufacturer,
    etc. As each is addressed by the user a new shoe object is instantiated
    and the data entered and designated to that object instance actually is
    added as a property of the instance. Eventually the objects can be serialized
    and sent to a server in bulk to be entered into a data base.
    Last edited by anotherJEK; 12-25-2013 at 06:20 AM. Reason: having tested suggestions

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Here is something I posted
    a few days a go that's
    demonstrates the use
    of that = this

    http://www.codingforums.com/showthre...46#post1381446

    If you will ask specific questions
    about the use that=this in the code
    there I will answer them very
    carefully and thoughtfully.
    Last edited by DaveyErwin; 12-25-2013 at 04:18 PM.

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,135
    Thanks
    12
    Thanked 332 Times in 328 Posts
    Quote Originally Posted by anotherJEK View Post
    I am having trouble wrapping my grey matter around the use of "that".
    just a matter of automatic context changes. functions like setTimeout(), setInterval() and addEventListener() automatically set the context for this anew. therefore you need a Closure to preserve context.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    208
    Thanks
    52
    Thanked 1 Time in 1 Post

    bind() ??

    I have been looking for documentation on a built in method bind() and
    have not found any ( at least in the O'reily text Javascript, the Definitive
    Guide 5th ed). Is there a reference for this, otherwise where is this coming
    from?

    Code:
    button.addEventListener('click', that.shoeHornHandler.bind(that), false);
    normally, I wrap the code called by the eventListener in and anonymous
    function because if I don't, the code used in the call to addEventListener
    will run when the code is loaded. I am mystified about this syntax.

    I am aware of methods and functions in php: apply(), assert(), etc
    ( I know these don't apply to javascript unless they are written by
    the user)

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,135
    Thanks
    12
    Thanked 332 Times in 328 Posts
    Quote Originally Posted by anotherJEK View Post
    I have been looking for documentation on a built in method bind() and
    have not found any ( at least in the O'reily text Javascript, the Definitive
    Guide 5th ed). Is there a reference for this, otherwise where is this coming
    from?
    Function.bind() @ MDN. also have a look at Function.call() and Function.apply(), two similar functions of the Function object.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    anotherJEK (12-25-2013)

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    208
    Thanks
    52
    Thanked 1 Time in 1 Post

    O.K. this is thick....

    I did find two good articles about this topic:
    http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/[/url]

    and

    http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/[/url]

    I hope it is allowed to include these links.

    This is pretty thick stuff but I believe I am getting a better understanding.
    There is mention of the practice of that=this here also.

    A bit about me. I am not a pro developer. I am a hobbyist who does web related development in my retirement years.
    But I have been at it for over 10 years and have not made any money from it.

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by anotherJEK View Post
    I hope it is allowed to include these links.

    This is pretty thick stuff but I believe I am getting a better understanding.
    to put it simply, bind() is like call(): you set the meaning of "this" in its first argument, and other optional arguments after that. the big difference is that call() executes the function with the specified "this" right away, whereas bind() allow you to execute the function later on under the same parameters that would be executed by call(), no matter what happens to the function's environment or inherited "this" in the meanwhile.

    the reason you need "that" it is because there is only one "this" at any given time in JS, and it means different things to say, an object method, as it does a click event handler, the full js object instance and the clicked DOM element respectively.

    since one "this" is not enough to refer to both the object and the element, we simply duplicate the object's "this" as a local variable named "that" to avoid ambiguity in the eventual function execution.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

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