How to expose method data out of Class scope in JavaScript

Question

I have a library that's implemented using ES6 and I have an init method, when invoked draws a button on the view. And some internal changes takes place within a the "this.Object" variable. How can I expose the click event that's added to the button outside the Class scope so that the developer can have access to it ?

My Library Class

 class Test {
    constructor(selector) {
        this.selector = document.querySelector(selector);
        this.Object = {};
    }

    init(content = null) {
        if (content == null) {
            this.selector.innerHTML = `
                <button id="test_btn" type="button">Click Me!</button>
            `;

            this.Object = {
                'name': 'test'
            };

            this.button = document.getElementById('test_btn');
            this.button.addEventListener('click', (event) => {
                console.log(this.Object);
                // how to return the variable value which is outside of the class Scope
            });
        } return this.selector, this.Object;
    }
}
module.exports = (selector) => {
    return new Test(selector);
};

When I use the library in the html, how can I get the value of "this.object" which is now an altered value within the init method and how to print the new value of "this.object" within the html content ?

Below is the html Code where I use my library

 <body>
    <div class="">Hello World</div>
    <!-- minfied version of my library -->
    <script src="build/Test.min.js" charset="utf-8"></script>

    <script type="text/javascript">
        // intialise library functionality
        Test('div').init();

        // console.log(this.new_Object)
        // How to access the object from here
    </script>
</body>

How can I expose the click event that's added to the button outside the Class scope so that the developer can have access to it ?

If the post needs more clarification, feel free to express your thoughts in the comments. Any help would be appreciated on this matter.

PS: This is traditional JavaScript and no jQuery is involved and I try to keep it that way

You can assign the event handler to a variable in a outer scope. — Nianyi Wang
– Nianyi Wang, Commented Apr 22, 2018 at 12:18
Actually I'm trying to invoke another method that would allow me to capture the variable values — Ichorville
– Ichorville, Commented Apr 22, 2018 at 13:32
I think this is essentially How do I return the response from an asynchronous call?. — lonesomeday
– lonesomeday, Commented Apr 22, 2018 at 14:29

Katya Pavlenko · Accepted Answer · 2018-04-22 12:17:04Z

1

here is the solution: https://jsfiddle.net/fmvomcwn/

  module.exports = Test;

  /////
  const t = new Test('div');
  t.init();

  console.log(t.Object);

You should create new object from Test and the you'll have access to its fields

answered Apr 22, 2018 at 12:17

Katya Pavlenko

3,4033 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ichorville Over a year ago

I can access the attributes like you have pointed out ! But its still not my requirement. What I want to do is to get the variable value from the console.log under Test('div').init(); every time a user clicks the button. in your case the output is coming from the dynamic event which is inside the class.

Dev Ops · Accepted Answer · 2018-04-22 12:27:17Z

0

class Test {
    constructor(selector) {
        this.selector = document.querySelector(selector);
        this.Object = {};
    }

    init(content = null) {
        if (content == null) {
            var self = this;
            
            this.selector.innerHTML = `
                <button id="test_btn" type="button">Click Me!</button>
            `;

            this.Object = {
                'name': 'test'
            };

            this.button = document.getElementById('test_btn');
            this.button.addEventListener('click', (event) => {
                console.log(self.Object);
                // how to return the variable value which is outside of the class Scope
            });
        }
    }
}
//module.exports = (selector) => {
//    return new Test(selector);
//};

// intialise library functionality
var test = new Test('div');
test.init();

console.log(test.Object)
// How to access the object from here

<body>
    <div class="">Hello World</div>
</body>

When you call and event handler, the 'this' in the handler is set either the window or the element (depends on which browser). So in order to the the internal object via the click you have 2 options:

Either you cache a internal variable to 'this' when you init e.g.var self = this;, and use that cached value in the event handler, or
You create an actual event handler function and bind that function to the instance of your class;

An example of point 1 above, which is the simplest.

edited Apr 22, 2018 at 12:27

answered Apr 22, 2018 at 12:18

Dev Ops

968 bronze badges

3 Comments

lonesomeday Over a year ago

This is incorrect: because it is an arrow function, this remains a reference to the Test object.

Dev Ops Over a year ago

My apologies, I did not know this. I only saw it now when I added the snippet. Thank you. The only issue then it that the original poster did not return this from init, or did not first instantiate the class to get an instance reference, then run init() on that. This way the instance var can be used to access the internal objects.

Ichorville Over a year ago

Sorry I have missed out the part of returning the values from init. I made some changes to the code where I need to get the new value of the object at console.log(this.new_Oblect);

Collectives™ on Stack Overflow

How to expose method data out of Class scope in JavaScript

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related