1

I'm trying to attach a class method to an element so that it references that instance of the class.

//EXAMPLE

class Default{
    constructor(){
        this.parent = null
    }

    assemble(){
        var form = document.createElement('form'); //CREATE FORM ELEMENT
        var btn = document.createElement('button'); //CREATE BUTTON ELEMENT
        this.parent = form; //DECLARE PARENT (CONSTRUCTOR)
        btn.type = 'button';
        btn.innerHTML = 'click me';
        btn.addEventListener('click',this.submit);
        form.appendChild(btn);
        return form;
    }   
}

class Form extends Default{
    submit(){
        console.log(this.parent); //should return instantiated form value for property parent but doesn't (undefined)
        console.log(this); //returns reference to the button element itself not the class (Form)
    }
}

//CALLED

var route={
    init:()=>{      
        var form = new Form();
        var formBuild = form.assemble();
        document.body.appendChild(formBuild);
    }   
};
document.addEventListener('DOMContentLoaded',route.init);

Question: Why is the Form class method submit() returning the button element itself and not the instantiated class?

  • Your question is a bit confusing I created a [codepen](http://codepen.io/anon/pen/VmMpzN?editors=1111) with your code and everything works as I would expect it to. What exactly is the result you want to achieve? – Dario Nov 28 '16 at 20:54
  • @Dario I'm trying to have the button return the parent which would be the form element in this example `this.parent` but `this` doesn't refer the instantiated object at all. –  Nov 28 '16 at 20:55
  • Just to make sure, in the code pen I linked `this.parent` references the form itself but you want `this` to return the form as well? – Dario Nov 28 '16 at 21:00
  • @Dario no, so your codepen example calls the `submit` method on the form object, where my example calls it via a click event on the button element. –  Nov 28 '16 at 21:01
  • The problem is merely how you bind the `submit` method and how `this` is decided when it's called. `btn.addEventListener('click', this.submit.bind(this))` – deceze Nov 28 '16 at 21:10
  • @deceze yeah thats exactly what I was looking to do, I just feel if that is the case and you have to bind the method every time, you might as well just create a global function outside the class. What your thoughts on that `bind()` vs. global function? –  Nov 28 '16 at 21:19
  • No. The fact that context is decided at *call time* is a quirk of JavaScript you need to understand and accept; don't throw out OOP with the bath water just for that. – deceze Nov 28 '16 at 21:36
  • @deceze yeah good point. Thanks! –  Nov 28 '16 at 21:47

1 Answers1

-3
class Default{
    constructor(){
        this.parent = null
    }

    assemble(){
        var form = document.createElement('form'); //CREATE FORM ELEMENT
        var btn = document.createElement('button'); //CREATE BUTTON ELEMENT
        btn.parent = form; //DECLARE PARENT (CONSTRUCTOR)
        btn.type = 'button';
        btn.innerHTML = 'click me';
        btn.addEventListener('click',this.submit);
        form.appendChild(btn);
        return form;
    }   
}
Harminder
  • 141
  • 1
  • 8