Challenge with creating instances of a Javascript class

Question

Challenge with creating instances of a Javascript class

I'm currently delving into JavaScript OOP and have encountered an issue. While my code successfully works to change a class variable for a specific instance, it fails when I try to print the updated value in an event handler.

Initially setting "myname" with a default value, I later update it for a particular instance. However, when attempting to display the new value in the event handler, I still receive the default one instead.

Can anyone provide guidance on how to modify the code to address this issue?

Thank you!

function myClass () {}

myClass.prototype = 
{

    myname : "test",

    test  : function (filename)
    {
        var img = createSomething ();
        img.container = this;

        img.addEventListener('click', this.onClick);                    
    }, 


    onClick : function (e)
    {
        trace ("click: " + e.source.container.myname); // This will output "test" instead of the expected "dave"
    }

};



var instance = new myClass ();

instance.myname = "dave";

instance.test();

javascript oop

Answer 1

Answer №1

Although I am unfamiliar with trace() and e.source, when I implemented your code using console.log() and e.target.container.myname, it functioned flawlessly.

For reference: http://example.com/code-sample/

(please note that this example is optimized for browsers supporting addEventListener)

function customClass() {}

customClass.prototype = {
    
    myname: "trial",

    experiment: function(filename) {
        var picture = new Image();
        picture.src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image";
        picture.container = this;

        picture.addEventListener('click', this.onSelect, false);
        document.body.appendChild(picture);
    },
    onSelect: function(e) {
        console.log("chosen: " + e.target.container.myname); 
    }
};
var testInstance = new customClass();
testInstance.myname = "sam";
testInstance.experiment();

UPDATE: Improved compatibility of addEventListener by including the recommended 3rd argument, as advised by @Jane Doe.

Answer 2

Although I am unfamiliar with trace() and e.source, when I implemented your code using console.log() and e.target.container.myname, it functioned flawlessly.

For reference: http://example.com/code-sample/

(please note that this example is optimized for browsers supporting addEventListener)

function customClass() {}

customClass.prototype = {
    
    myname: "trial",

    experiment: function(filename) {
        var picture = new Image();
        picture.src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image";
        picture.container = this;

        picture.addEventListener('click', this.onSelect, false);
        document.body.appendChild(picture);
    },
    onSelect: function(e) {
        console.log("chosen: " + e.target.container.myname); 
    }
};
var testInstance = new customClass();
testInstance.myname = "sam";
testInstance.experiment();

UPDATE: Improved compatibility of addEventListener by including the recommended 3rd argument, as advised by @Jane Doe.

Answer 3

Answer №2

If you're looking to implement object-oriented programming (OOP), utilizing a bind function is essential. This method proves to be extremely beneficial when attaching event handlers that are specifically bound to your object rather than the global object.

function createBoundFunction(func, context) {
     return function() {
          return func.apply(context, Array.prototype.slice.call(arguments));
     }
}

Here is how you can apply this concept-

function CustomObject() {}

CustomObject.prototype = {

    name: "example",

    performAction: function(arg) {
        var element = document.createElement('div');
        element.innerText = arg;

        element.addEventListener('click', createBoundFunction(this.onClick, this), false);
        document.body.appendChild(element);
    },
    onClick: function(e) {
        // 'this' now refers to the instance of CustomObject
        console.log("Clicked: " + this.name); 
    }
};
var customInstance = new CustomObject();
customInstance.name = "Alice";
customInstance.performAction();

Note: It's common practice for constructor functions (or 'Classes') to begin with an uppercase letter.

Answer 4

If you're looking to implement object-oriented programming (OOP), utilizing a bind function is essential. This method proves to be extremely beneficial when attaching event handlers that are specifically bound to your object rather than the global object.

function createBoundFunction(func, context) {
     return function() {
          return func.apply(context, Array.prototype.slice.call(arguments));
     }
}

Here is how you can apply this concept-

function CustomObject() {}

CustomObject.prototype = {

    name: "example",

    performAction: function(arg) {
        var element = document.createElement('div');
        element.innerText = arg;

        element.addEventListener('click', createBoundFunction(this.onClick, this), false);
        document.body.appendChild(element);
    },
    onClick: function(e) {
        // 'this' now refers to the instance of CustomObject
        console.log("Clicked: " + this.name); 
    }
};
var customInstance = new CustomObject();
customInstance.name = "Alice";
customInstance.performAction();

Note: It's common practice for constructor functions (or 'Classes') to begin with an uppercase letter.

Answer 5

Answer №3

Please be aware that this response may not directly address the question at hand.

If you're delving into OOP with Javascript, I highly suggest utilizing the Class class developed by the renowned John Resig. You can find more information about it here: http://ejohn.org/blog/simple-javascript-inheritance/

It truly streamlines the process of inheritance...

Answer 6

Please be aware that this response may not directly address the question at hand.

If you're delving into OOP with Javascript, I highly suggest utilizing the Class class developed by the renowned John Resig. You can find more information about it here: http://ejohn.org/blog/simple-javascript-inheritance/

It truly streamlines the process of inheritance...

Challenge with creating instances of a Javascript class

Answer №1

Answer №2

Answer №3

Similar questions

Which is the better choice for accessing and manipulating JSON files – using Ajax or the Node fs module?

Transforming the output from a processor into an array structure

javascript utilizing key inputs

What could be causing variations in the performance of my Speech Recognition code each time I run it?

Why does the array format of the values saved in app.locals seem to disappear when they are accessed in the view?

Show a picture upon hovering the button

"Troubleshooting the issue of AngularJS $http patch request failing to send

Utilizing Nicknames in a JavaScript Function

Dynamic parallax effect with scroll wheel on WebKit

Struggling to map JSON data (received from WCFRest) onto an HTML table

Timeout set to run indefinitely

What is the best way to keep a div element fixed on the page no matter where you scroll?

Utilizing Google Tag Manager for Efficiently Managing Multiple Schema Product Reviews with JSON-LD and Variables

Position the vertical bar directly adjacent to the form input field

Remove array element by key (not numerical index but string key)

Trouble getting Fontawesome icons to accept color props when using react functional components with tailwindcss

npm fails during the build process due to webpack issues

Is there a way for me to obtain the full error message after a failed fetch request?

ShadowCamera is absent in Three.js

Creating a legend in a pie chart with AmCharts: Easy steps to follow!