Referencing an object's function from another function using JavaScript [duplicate]

Question

I have the following JS object in my code:

var myLibrary = {
  name: "John",

  // Functions
  func1: function() {
    alert(this.name);
  },
  func2: function() {
    this.func1();
  },

  // On DOM loaded
  onDOMLoaded: function() {
    this.func1();
    this.func2();
  }
}

document.addEventListener('DOMContentLoaded', myLibrary.onDOMLoaded);

When I reference this code using a script tag, I get the following error (in reference to the call in func2):

Uncaught TypeError: this.func1 is not a function

This is especially weird because if I call the functions from within the DOM, they work perfectly. For example:

<button onclick="myLibrary.func1()">Func 1</button>
<button onclick="myLibrary.func2()">Func 2</button>

Clicking on the buttons does exactly what I want them to. What am I doing wrong here? And how can I fix this issue? Thanks for any help!

A demo can be found here: https://jsfiddle.net/gLxvsze0/

Where in the document are you inserting the script element that references the external library? — Scott Marcus
– Scott Marcus, Commented Jul 15, 2020 at 22:02
That doesn't answer the question I'm asking you. In a Fiddle, you hook up external references differently than you do in actual code. Please just tell us where in the HTML document you've included the script element that references your library. — Scott Marcus
– Scott Marcus, Commented Jul 15, 2020 at 22:06
In HTML event handlers, this refers to the HTML element that received the event — nathan.medz
– nathan.medz, Commented Jul 15, 2020 at 22:11

Ramil Garipov · Accepted Answer · 2020-07-15 22:11:03Z

1

You should read about this is JS.

When you call myLibrary.func1() the function will be called with myLibrary context. But when you call just func1 (ie func1 = myLibrary.func1; func1()) this will be called with global Window context.

To solve your problem, you can use bind method, that creates new function linked with provided context:

document.addEventListener('DOMContentLoaded', myLibrary.onDOMLoaded.bind(myLibrary));

answered Jul 15, 2020 at 22:11

Ramil Garipov

4732 silver badges7 bronze badges

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

Comments

user3094755 · Accepted Answer · 2020-07-15 22:16:56Z

1

I think the simplest solution to the context issue is...

document.addEventListener('DOMContentLoaded',() => { myLibrary.onDOMLoaded(); });

answered Jul 15, 2020 at 22:16

user3094755

1,64117 silver badges24 bronze badges

Collectives™ on Stack Overflow

Referencing an object's function from another function using JavaScript [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related