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, Apr 22 '18 at 12:18
Actually I'm trying to invoke another method that would allow me to capture the variable values — Ichorville, Apr 22 '18 at 13:32
I think this is essentially [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — lonesomeday, Apr 22 '18 at 14:29

score 1 · Answer 1 · answered Apr 22 '18 at 12:17

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 '18 at 12:17

Katya Pavlenko

3,303
3
16
28

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. – Ichorville Apr 22 '18 at 12:59

Dev Ops · Accepted Answer · 2018-04-22T12:27:17.557

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.

This is incorrect: because it is an arrow function, `this` remains a reference to the `Test` object. — lonesomeday, Apr 22 '18 at 12:25
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. — Dev Ops, Apr 22 '18 at 12:34
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); — Ichorville, Apr 22 '18 at 13:09

How to expose method data out of Class scope in JavaScript

2 Answers2