How to call another function within the same object?

by

Standard JS functions use dynamic binding, this is dependent on who’s calling the method on runtime, so if we call it using role.test(), it will bind this to role.

Arrow functions bind this to the current context. For example, if the code was writtern in the browser’s console, this is bound to the window object. This is called static lexical binding, which means binding this to the closure it was defined in.

If you won’t use arrow functions, this will point to the object itself when called by role:

const role = {
    test(variable){
        this.toLog(variable);
    },
    toLog(variable) {
        console.log(variable);
    }
};

role.test(5);

In this case, we don’t want to bind this to the outer context, so we’ll skip the static binding in favor of the dynamic one.

However, if we’ll use this method as a callback, dynamic binding will change this according to who’s running the method. To prevent that, we’ll have to use bind to create an explicit static binding to role.

const role = {
  test(variable) {
      this.toLog(variable);
    },
    toLog(variable) {
      console.log(variable);
    }
};

let test = role.test;

try {
  test(20); // will throw an error - this.toLog is not a function - because this points to window
} catch (e) {
  console.log(e);
}

test = role.test.bind(role);

test(25); // will work because it's staticly binded to role

More Related Contents:

  1. How can I write a function that will format a camel cased string to have spaces?
  2. What do multiple arrow functions mean in JavaScript?
  3. Map vs Object in JavaScript
  4. Spread Syntax vs Rest Parameter in ES2015 / ES6
  5. How to destructure object properties with key names that are invalid variable names?
  6. ES6 template literals vs. concatenated strings
  7. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  8. What is the difference between ‘let’ and ‘const’ ECMAScript 2015 (ES6)?
  9. Is there a mechanism to loop x times in ES6 (ECMAScript 6) without mutable variables?
  10. Why are Objects not Iterable in JavaScript?
  11. Importing modules using ES6 syntax and dynamic path [duplicate]
  12. Is there any one-line analogy in ES6 for ES5 `module.exports = require(‘./inner.js’)`?
  13. How to destructure an object to an already defined variable? [duplicate]
  14. Webpack babel 6 ES6 decorators
  15. What is lexical ‘this’? [duplicate]
  16. ES6 `export * from import`?
  17. Inlining ECMAScript Modules in HTML
  18. this.setState is not a function [duplicate]
  19. Get parent class name from child with ES6?
  20. JavaScript Extending Class
  21. How can I export all functions from a file in JS?
  22. javascript import from ‘/folder’ with index.js
  23. Extract certain properties from all objects in array
  24. What’s the purpose of allowing duplicate property names?
  25. map function not working in React
  26. How to get the first element of Set in ES6 ( EcmaScript 2015)
  27. Split a Javascript class (ES6) over multiple files?
  28. Binding context when calling ES6 method. How to access object from within method called as callback?
  29. functional way to iterate over range (ES6/7) [duplicate]
  30. ES6 module scope

Leave a Comment