Wrox Programmer Forums
|
BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0
This is the forum to discuss the Wrox book Professional JavaScript for Web Developers by Nicholas C. Zakas; ISBN: 9780764579080
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 31st, 2006, 10:53 AM
Authorized User
 
Join Date: Mar 2006
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default Inheritance problems

I have several Widgets (in the example below, see Button) on a page that I attach events to via a page Controller (see Controller).

Each Widget inherits from the Widget class.

Problem I have, is that when I assign an event in the Controller, it seems like both the Buttons are getting the event added to their observers array. I can't really figure out why...

P.S The code below is simplified to show the issue. Error handling etc is removed for clarity.

/José Jeria

Code:
<html>
<body>
<div id="myFirstDiv">1: click me</div>
<div id="mySecondDiv">2: click me</div>
<script>
/**
 * Constructs a Widget object. 
 */
function Widget()
{
    this.observers = [];
}

/**
 * Adds listeners to observers array.
 *
 * @param oListener Object that will listen to events.
 */
Widget.prototype.addListener = function(oListener)
{
    this.observers.push(oListener);
}

/**
 * Notifies the observers.
 *
 * @param oWidgetEvent Normally I pass an object with properties here, but for this example, its a String.
 */
Widget.prototype.notifyListeners = function(oWidgetEvent)
{
    for(var i=0; i<this.observers.length; i++)
    {
        this.observers[i].actionPerformed(oWidgetEvent);
    }
}

/**
 * Button constructor
 *
 * @param sId Id of html element.
 */
function Button(sId)
{
    this.button = document.getElementById(sId);

    var oThis = this;

    this.button.onclick = function()
    {
        oThis.notifyListeners("test");
    }
}

/**
 * Inherit from Widget Class.
 */
Button.prototype = new Widget();

/**
 * Page controller constructor
 */
function Controller()
{
    this.firstButton = oFirstButton;
    this.secondButton = oSecondButton;

    this.attachListeners();
}

/**
 * Assigns events to components.
 */
Controller.prototype.attachListeners = function()
{
    this.firstButton.addListener(this);
    this.secondButton.addListener(this);
}

/**
 * What action to perform when a specific component fires an event.
 *
 * @param sWhatever Hardcoded string from the Button class.
 */
Controller.prototype.actionPerformed = function(sWhatever)
{
    alert(sWhatever);
}

// Create instances
var oFirstButton = new Button("myFirstDiv");
var oSecondButton = new Button("mySecondDiv");
var oController = new Controller();
</script>

</body>
</html>
__________________
José Jeria
 
Old March 31st, 2006, 11:16 AM
AGS AGS is offline
Wrox Technical Editor
 
Join Date: May 2005
Posts: 60
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi,

It seems your problem is described here:
http://www.coolpage.com/developer/ja...avascript.html

Best regards,
Alexei
 
Old March 31st, 2006, 12:44 PM
Authorized User
 
Join Date: Mar 2006
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for the quick answer Alexei. That is exactly what I am looking for.

Regards,

/José
 
Old March 31st, 2006, 01:07 PM
Authorized User
 
Join Date: Mar 2006
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Not quite sure if I understood it, but basically it now works by adding:
Code:
/**
 * Button constructor
 *
 * @param sId Id of html element.
 */
function Button(sId)
{
    Widget.call(this);
    this.button = document.getElementById(sId);

    var oThis = this;

    this.button.onclick = function()
    {
        oThis.notifyListeners("test");
    }
}
So it seems I didn't really need the following:
Code:
Button.prototype.constructor = Button;
Regards,

/José Jeria
 
Old March 31st, 2006, 02:51 PM
AGS AGS is offline
Wrox Technical Editor
 
Join Date: May 2005
Posts: 60
Thanks: 0
Thanked 0 Times in 0 Posts
Default

José,

If you are not quite sure about understanding this subject
 there is a reference to this issue in the book: last paragraph on page 93 and further on page 94.
In short: prototype's property represented by a reference value is shared between all instances of derived type.
And regarding more general subject of resolution property names on an object there is an appropriate section in a brilliant article (the best on JavaScript I've ever read) http://jibbering.com/faq/faq_notes/closures.html

Best regards,
Alexei

 
Old April 1st, 2006, 04:30 AM
Authorized User
 
Join Date: Mar 2006
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Alexei, thanks again.

Nice to get some professional help

:)

/José Jeria





Similar Threads
Thread Thread Starter Forum Replies Last Post
Inheritance michaelcode ASP.NET 2.0 Basics 5 September 26th, 2006 01:40 PM
Inheritance abhi_bth ASP.NET 1.0 and 1.1 Basics 0 September 23rd, 2006 10:03 AM
Need help with inheritance filip BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 1 August 25th, 2006 09:38 PM
c# inheritance bhohman C# 2 March 26th, 2004 01:47 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.