Using Javascript to link object-oriented programming methods to events and better understand the 'this' keyword

Question

Using Javascript to link object-oriented programming methods to events and better understand the 'this' keyword

I am currently learning OOP Javascript but struggling with understanding the this keyword and working with events.

My goal is to bind a common event to multiple DOM objects while storing data about these objects in a global container for better performance.

Here is a simplified version of what I am trying to do:

function ClassThatDoesSomething() {
    /* holds node ids for processing in this.init */
    this.nodes = new Array();

    /* stores processed node data for quick access */
    this.nodeData = new Array();

    this.addNodes = function(/* ids */) {
        /* appends node ids to local variable (this.nodeData) */
    }

    function init() {
        /* gathers data from all nodes that were 
           added before and stores it in this.nodeData */

        /* the issue here is that 'this' refers to the window element*/

        addEvent(window,'scroll',this.scroll);
    }

    function scroll() {
        /* perform actions when user scrolls the page */

        /* 'this' also references the window element here */
    }
    addEvent(window,'load',this.init);
}

Later, in the document body, I could simply do this:

var Ctds = new ClassThatDoesSomething();

And then, add DOM elements like this:

Ctds.addNodes(ids);

No additional implementation code would be needed.

QUESTION: How can I access the instance of the JS class in the init and scroll methods instead of the window element.

It doesn't necessarily have to be done through the this keyword, but I haven't been able to find an alternative solution yet.

P.S.

addEvent is a basic function for attaching events, ensuring compatibility with IE and Firefox.
The code I currently have works fine in a procedural manner, but I am looking to refactor it using OOP principles.
As a side note, I've heard conflicting opinions about using getter/setter methods in JavaScript, is it acceptable to use them?

javascript oop event-handling this

Answer 1

Answer №1

I have observed that the methods init and scroll are not defined as instance methods in this case.

Therefore, you just need to add init to the load event without using this.init:

addEvent(window,'load',init); // "this." is not required

Similarly:

addEvent(window,'scroll',scroll);

If you do decide to make them class methods (e.g. this.scroll and this.init), you can store a reference to this and use it in an anonymous function passed to addEvent:

var self = this;

this.init = function() {
    addEvent(window, 'scroll', function() {
        self.scroll()
    })
};

this.scroll = function() { /* ... */ };

addEvent(window,'load',function() {
    self.init()
});

This concept is known as a closure.

Answer 2

I have observed that the methods init and scroll are not defined as instance methods in this case.

Therefore, you just need to add init to the load event without using this.init:

addEvent(window,'load',init); // "this." is not required

Similarly:

addEvent(window,'scroll',scroll);

If you do decide to make them class methods (e.g. this.scroll and this.init), you can store a reference to this and use it in an anonymous function passed to addEvent:

var self = this;

this.init = function() {
    addEvent(window, 'scroll', function() {
        self.scroll()
    })
};

this.scroll = function() { /* ... */ };

addEvent(window,'load',function() {
    self.init()
});

This concept is known as a closure.

Answer 3

Answer №2

var MyObject = function() {
    this.property = "value";
    var self = this;
    function innerFunction() {
        manipulateProperty(self.property);
    }
}

Answer 4

var MyObject = function() {
    this.property = "value";
    var self = this;
    function innerFunction() {
        manipulateProperty(self.property);
    }
}

Answer 5

Answer №3

this remains undefined until the function is executed. When you add an event listener, you are actually passing a function that does not retain its original scope. As a result, when the specified event occurs, the function is executed within the scope of the window object, causing this to refer to window. To ensure the function runs in a specific scope, you can create a new variable, like so:

var that = this;
...
addEvent(window,'scroll', function() {
    that.scroll()
});

Answer 6

this remains undefined until the function is executed. When you add an event listener, you are actually passing a function that does not retain its original scope. As a result, when the specified event occurs, the function is executed within the scope of the window object, causing this to refer to window. To ensure the function runs in a specific scope, you can create a new variable, like so:

var that = this;
...
addEvent(window,'scroll', function() {
    that.scroll()
});

Answer 7

Answer №4

Create a new function within the Function prototype that enables the binding of any function to any object:

Function.prototype.bind = function(object) {
   var __method = this;
   return function() {
      return __method.apply(object, arguments);
   };
};

Keep your event handlers organized within the instance:

function ClassThatPerformsAction() {

  this.events = {
    init: ClassThatPerformsAction.init.bind(this),
    scroll: ClassThatPerformsAction.scroll.bind(this),
    etc: ClassThatPerformsAction.etc.bind(this)
  };
  ...
}

Now, when you refer to your events, they will automatically be bound to the class instance. For example:

function init() {
  addEvent(window,'scroll',ClassThatPerformsAction.events.scroll);
}

Answer 8

Create a new function within the Function prototype that enables the binding of any function to any object:

Function.prototype.bind = function(object) {
   var __method = this;
   return function() {
      return __method.apply(object, arguments);
   };
};

Keep your event handlers organized within the instance:

function ClassThatPerformsAction() {

  this.events = {
    init: ClassThatPerformsAction.init.bind(this),
    scroll: ClassThatPerformsAction.scroll.bind(this),
    etc: ClassThatPerformsAction.etc.bind(this)
  };
  ...
}

Now, when you refer to your events, they will automatically be bound to the class instance. For example:

function init() {
  addEvent(window,'scroll',ClassThatPerformsAction.events.scroll);
}

Answer 9

Answer №5

Closures can be utilized in this scenario:

function ObjectWithFunctionality() {
    var obj=this;
    // ...

    function initialize() {
        addListener(window,'scroll',obj.scroll);
    }
}

Answer 10

Closures can be utilized in this scenario:

function ObjectWithFunctionality() {
    var obj=this;
    // ...

    function initialize() {
        addListener(window,'scroll',obj.scroll);
    }
}

Answer 11

Answer №6

Follow these steps:

let CustomClass = function() {
    /* store node ids for processing in this.init */
    this.nodes = [];

    /* store processed node data for quick access */
    this.nodeData = [];
}

CustomClass.prototype.addNodes = function(/* ids */) {
    /* append node ids to local variable (this.nodeData) */
}

CustomClass.prototype.init = function() {
    /* collect data from all nodes that were added before and store it in this.nodeData */

    /* 'this' refers to the window element here */

    addEvent(window, 'scroll', this.scroll);
}

CustomClass.prototype.scroll = function() {
    /* perform actions when user scrolls the page */

    /* 'this' also refers to the window element here */
}

addEvent(window, 'load', this.init);

Answer 12

Follow these steps:

let CustomClass = function() {
    /* store node ids for processing in this.init */
    this.nodes = [];

    /* store processed node data for quick access */
    this.nodeData = [];
}

CustomClass.prototype.addNodes = function(/* ids */) {
    /* append node ids to local variable (this.nodeData) */
}

CustomClass.prototype.init = function() {
    /* collect data from all nodes that were added before and store it in this.nodeData */

    /* 'this' refers to the window element here */

    addEvent(window, 'scroll', this.scroll);
}

CustomClass.prototype.scroll = function() {
    /* perform actions when user scrolls the page */

    /* 'this' also refers to the window element here */
}

addEvent(window, 'load', this.init);

Answer 13

Answer №7

If you're facing some difficulties, try implementing this solution:

function ClassThatPerformsAction() {
...
    this.This = this;
...
}

Subsequently, within those troublesome functions, utilize 'This'.

Expecting this to be useful for you.

Answer 14

If you're facing some difficulties, try implementing this solution:

function ClassThatPerformsAction() {
...
    this.This = this;
...
}

Subsequently, within those troublesome functions, utilize 'This'.

Expecting this to be useful for you.

Using Javascript to link object-oriented programming methods to events and better understand the 'this' keyword

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Variability in the values returned by the useState hook

Tips for regularly retrieving information from a psql table

Verify that the user visits the URL in next.js

Get JSON data through AJAX using two different methods

Issue with state not being updated upon clicking "Save" button

Using NodeJS and Express: redirection fails to load the specified endpoint

Protractor sendKeys method on Modal dialog is failing due to element visibility issues

Is the Vue2 Template compiler malfunctioning?

How to prevent selecting future dates in Material UI date picker

Have the quotes within my markup been replaced with HTML entities?

using javascript to get array element when hovering

Error: Attempted to access undefined property 'renderMenu' in a promise without handling it

Do you notice a discrepancy in the number returned by Javascript's Date.getUTCDate() when the time component is set to

Having issues with a basic javascript bookmarklet that isn't functioning properly due to a clientside validation script error. Any suggestions on how

Customizing blockquote styling in QuillJS with a unique class

What are different ways to modify a bytearray within a file using angular js, whether it is an .xlsx or other

The API call for /api/users/create was resolved without a response, which could potentially lead to requests getting stuck. This issue was detected in

Troubleshooting: Issue with onclick event in vue.js/bootstrap - encountering error message "Variable updateDocument not found"

Executing an external function on an element as soon as it is created in AngularJS: tips and tricks

Does the resolve function within a Promise executor support async operations?