Calling a JavaScript function from a nested objects function fails

Question

On the simple example below and on JSFiddle here - https://jsfiddle.net/jasondavis/dnLzytju/ you can see the issue I have.

I can see why it could happen but I am not sure how to fix it while keeping the same JS structure.

The issue is when I define a JavaScript objects prototype functions and I have a 2nd level nested object which has a function and in that function I call a function on the parent/root level it fails.

This function from the code below this.nestedObject.nested_object_function() tries to call the function this.normal_function() however it fails and says:

Uncaught TypeError: this.normal_function is not a function
    at Object.nested_object_function (VM2493:79)

I assume the reason is that this is referencing this.nestedObject instead of the parent object.

If that is the case, then how can I call that function like I am trying to do from the nested object function and call a parent function?

I have also tried calling JsLibTest.normal_function() as a test from the this.nestedObject.nested_object_function() function but I get the same error.

    var JsLibTest = (function (document) {
        "use strict";
    
        var JsLibTest = function (){
          // run init() function on initiation of a new JsLibTest object
          this.init();
        };
    

    
        /**
         * JsLibTest prototype functions
         */
        JsLibTest.prototype = {
    
          init: function() {
    
            // as expected this function runs fine
            this.normal_function();
    
            // nested level objects functions run fune from parent level object function
            this.nestedObject.nested_object_function();
    
          },
    
    
          normal_function: function() {
              console.log('this.normal_function() ran');
          },
    
          nestedObject: {
          
          		// calling a function on the parent object fails here when called from this nested object function
              nested_object_function: function() {
              	this.normal_function();
                console.log('this.nestedObject.nested_object_function() ran');
              },
          }
    
        };
    
        return JsLibTest;
    })(document);
    

    
    // run it
    $(document).ready(function(){
      var Sidebar2 = new JsLibTest();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Mike Cluck · Accepted Answer · 2017-02-17 19:35:08Z

2

Your assessment is correct. this will be set to the nested object instead of the parent object and that's why it says the function is undefined.

What you need is a way of referencing the parent. Objects don't normally carry any information needed to reference an object which references them. This makes sense when you consider the fact that many objects can reference the same object internally.

You can either store a reference to the parent object and reference that in the nested function:

var nested = {
  g() {
    this.parent.f();
  }
};
var parent = {
  f() {
    console.log('called');
  }
};
nested.parent = parent;

nested.g();

or you can use Function.prototype.call (or something similar) to set the correct context.

var obj = {
  f() {
    console.log('called');
  },
  g() {
    this.nested.nested_f.call(this);
  },
  nested: {
    nested_f() {
      this.f();
    }
  }
};

obj.g();

Putting the last solution in to the context of your problem:

var JsLibTest = (function(document) {
  "use strict";

  var JsLibTest = function() {
    this.init();
  };

  JsLibTest.prototype = {

    init: function() {
      this.normal_function();

      // NOTICE: Using .call here to set the context
      this.nestedObject.nested_object_function.call(this);
    },


    normal_function: function() {
      console.log('this.normal_function() ran');
    },

    nestedObject: {
      nested_object_function: function() {
        this.normal_function();
        console.log('this.nestedObject.nested_object_function() ran');
      }
    }
  };

  return JsLibTest;
})(document);

// run it
$(document).ready(function() {
  var Sidebar2 = new JsLibTest();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Feb 17, 2017 at 19:35

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

2 Comments

JasonDavis Over a year ago

thanks for the multiple demos, the last solution seems like the best solution for myself. Also I have many large JS app being worked on now that use this same JS design so your answer will fix many problems I have! thank you!

Mike Cluck Over a year ago

@JasonDavis Fantastic! I'm glad I could help :)

Janne · Accepted Answer · 2017-02-17 19:50:23Z

1

You are correct that scope doesn't have access to the parent. Easy solution would be that you pass parent to the nested object like:

this.nestedObject.nested_object_function(this);

then in your nested function call parent as:

nested_object_function: function(self) {
    self.normal_function();
    alert('this.nestedObject.nested_object_function() ran');
}

since you pass this (parent) as self you can then call it from nested one.

answered Feb 17, 2017 at 19:50

Janne

1,73515 silver badges22 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2017-02-17 19:38:42Z

At first, the Object must be unique for Each, having a prototype:

this.nestedObject=Object.create(this.nestedObject);

var JsLibTest = function (){
      // run init() function on initiation of a new JsLibTest object
      this.init();
      //bind to childs:
      this.nestedObject.parent=this;
    };

Now you can use this.parent inside of your inner function...

this.parent.normal_function();

If you want this to be the parent, bind:

var JsLibTest = function (){
      // run init() function on initiation of a new JsLibTest object
      this.init();
      //bind to childs:
      for(i in this.nestedObject){
         var el=this.nestedObject[i];
         if(typeof el==="function"){
             this.nestedObject[i]=el.bind(this);
         }
       }
    };

To make it easier, may use sth like that ( a helper function):

getfunc:function(...a){
  a.reduce((obj,key)=>obj[key],this).bind(this);
}

Use like this:

JsLibTestInstance("nestedObject","nestedobject_function")();

Pytth · Accepted Answer · 2017-02-17 19:49:57Z

0

Yea, you are right that the this value in your JSLibTest.prototype.nestedObject function is pointing to nestedObject and not JSLibTest.

If you want to maintain the same call signature, you can declare nestedObject as an IIFE:

nestedObject: (function() {
  var that = this;

  return {
    nested_object_function: function() {
      console.log(that);
      //    this.normal_function();
      alert('this.nestedObject.nested_object_function() ran');
    }
  }
}())

https://jsfiddle.net/dnLzytju/1/

Note: You probably do not want to declare your prototype that way is it effectively deletes all the native prototype methods of the object.

To author your code in a similar way, consider using Object.assign to help you out.

var foo = Object.assign({}, Function.prototype, {
  bar() {
    console.log("Hello!")
  }
});

foo.bar();

answered Feb 17, 2017 at 19:49

Pytth

4,1961 gold badge28 silver badges32 bronze badges

1 Comment

JasonDavis Over a year ago

Your bar() example with Object.assign would that whole code need to be ran for each function on the object?

Collectives™ on Stack Overflow

Calling a JavaScript function from a nested objects function fails

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related