Javascript: access object scope members within higher order function

Question

Domain model

var Question = function(text, answerType){
    this.id = 0
    this.text = text;
}

var Form = function(){
    this.questions = [] 
    this.addQuestion = function(question){
        question.id = this.questions.length + 1
        this.questions.push(question)
    }
}

Renders a Form

var FormRenderer = function(){
    this.wrapperSelector = "#wrapper"
    this.render = function(form){
       // how to access renderQuestion member of FormRenderer within the higher-order function?
       $(form.questions).each( function(){ **this.renderQuestion(form, this) }**) 
    }

    this.renderQuestion = function(form, question){
        var questionDomId = "question" + question.id

        var questionText = '<input type="text" size="75" name="questionText" value="'+ question.text +'" /><br/><br/><br/>'
        var questionWrapper  = "<div id='" + questionDomId + "'>" + questionText + "</div>"

        // how do i access wrapperSelector member of FormRender when renderQuestion is called as higher-order function?
        **$(this.wrapperSelector).append(questionWrapper)** 
    }
}

Client code

var q1= new Question("question1", "Text Box")
var form = new Form()
form.addQuestion(q1)

var formRenderer = new FormRenderer()
formRenderer.render(form)

The question is the same as the title. I have asked help for a specific example above with Javascript comments. Any help is appreciated.

Please note that each is the higher-order-function, not renderQuestion. Btw, this looks to me like inappropriate usage of each - just use a for-loop and you don't have those problems. — Bergi
– Bergi, Commented Oct 20, 2012 at 12:15

user123444555621 · Accepted Answer · 2012-10-20 11:15:08Z

1

You need to store a reference to the object like so:

var FormRenderer = function(){
    this.wrapperSelector = "#wrapper"
    this.render = function(form){
       $(form.questions).each( this.renderQuestion) ;
    }

   var self = this; // <--------------- 

   this.renderQuestion = function(form, question){
        var questionDomId = "question" + question.id

        var questionText = '<input type="text" size="75" name="questionText" value="'+ question.text +'" /><br/><br/><br/>'
        var questionWrapper  = "<div id='" + questionDomId + "'>" + questionText + "</div>"

        // now use self instead of this
        $(self.wrapperSelector).append(questionWrapper);
    }
}

answered Oct 20, 2012 at 11:15

user123444555621

154k27 gold badges118 silver badges126 bronze badges

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

1 Comment

Bergi Over a year ago

In your case, the form parameter is the array index.

techfoobar · Accepted Answer · 2012-10-20 11:33:02Z

0

You can get the parent object instance in this inside the member functions, by calling them like below.

if object is your instance, and func is a member function inside which you want this to be your instance itself, then you can call the member function as:

obj.func.call(obj, <params>);

instead of

object.func(<params>);

In your case, this would be:

var fR = new FormRenderer(<params>);
...
fR.renderQuestion.call(fR, <params>);

Your renderQuestion can use this just like outside. i.e.

var FormRenderer = function(){
    this.wrapperSelector = "#wrapper"
    ...
    this.renderQuestion = function(form, question){

        // this refers to the object itself, so you can call        
        $(this.wrapperSelector).append(...);
    }
}

answered Oct 20, 2012 at 11:33

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

1 Comment

Bergi Over a year ago

fR.renderQuestion.call(fR, <params>); would be absolutely equal to fR.renderQuestion(<params>);. However, that was not the question - the OP's problem is that this does not point to the instance when the method is fed into jQuery.each

Rag · Accepted Answer · 2012-10-20 12:51:38Z

0

Had to restructure a little to solve the problem based on input from Pumbaa80 and Bergi. Thanks for your answers.

var FormRenderer = function(){
    this.render = function(form){
        var formEventHandler = new FormEventHandler(form)
        $(form.questions).each(new RenderQuestion(formEventHandler).render)
    }

    RenderQuestion = function(formEventHandler){
        this.formEventHandler = formEventHandler
        this.wrapperSelector = "#wrapper"
        var self = this
        this.render = function(index, question){
            var questionDomId = "question" + question.id

            // generate elements
            var questionText = '<input type="text" size="75" name="questionText" value="'+ question.text +'" /><br/>'
            var questionWrapper  = "<div id='" + questionDomId + "'>" + questionText + "</div>"

            // append to dom
            $(self.wrapperSelector).append(questionWrapper)
        }
    }
}

answered Oct 20, 2012 at 12:51

Rag

1,4434 gold badges20 silver badges37 bronze badges

1 Comment

Bergi Over a year ago

Instantiating a new instance of the local RenderQuestion each time render is called seems useless. Why don't you just pass a function which does those things?

Bergi · Accepted Answer · 2012-10-20 21:21:40Z

Don't use jQuery.each - it changes the this reference to something unusual. You could use ES 5.1 bind and the normal forEach like this:

FormRenderer.prototype.render = function(form) {
    form.questions.forEach(this.renderQuestion.bind(this, form));
};

I'd recommend to use a classical for-loop, which is much easier to read and faster than any higher-order-things:

FormRenderer.prototype.render = function(form) {
    for (var i=0; i<form.questions.length; i++)
        this.renderQuestion(form, form.questions[i]);
};

If you really wanted/needed to use jQuery.each, you'd need to preserve the reference to the current FormRenderer instance (this) in a variable:

FormRenderer.prototype.render = function(form) {
    var renderer = this;
    $.each(form.questions, function(i) {
        renderer.renderQuestion(form, this);
    });
};

Collectives™ on Stack Overflow

Javascript: access object scope members within higher order function

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related