How does javascript class method know to call function or method when both have the same name?

Question

I was just going though some source code here on the index file of glide.js and saw the following code :

 mount (extensions = {}) {
    this._e.emit('mount.before')

    if (isObject(extensions)) {
      this._c = mount(this, extensions, this._e)
    } else {
      warn('You need to provide a object on `mount()`')
    }

    this._e.emit('mount.after')

    return this
  }

So basically mount (extensions = {}) {} is a method inside the Glide class and the mount being invoked inside this mount method is a function that is being imported like so:

import { mount } from './core/index'

My question is how does JavaScript differentiate between recursively calling the mount method or the imported function since both have the same name ?

note ::- code can be found here.

`mount (extensions = {}) {}` is a *method*, so you'd call it like `this.mount` or `someInstance.mount`. `mount(this, extensions, this._e)` is a *function*, so you don't call it through an object. — VLAZ, Jun 27 '19 at 12:25
The class method can only be called using `some_instance.mount(...)` — , Jun 27 '19 at 12:26
Are you asking why mount() is not calling Glide.mount instead? That's because it's javascript, to do that you'd have to call this.mount or even Glide.mount if your context doesn't matter. — Mathijs Segers, Jun 27 '19 at 12:27
Another way of saying the above comments is that methods belong to object instances and can't just be called by their name alone. It would be like standing in front of 20 people and saying "talk" when you only wanted one of them to say something. You'd have to qualify it by saying "Jim talk". In an object sense, you'd write `someInstance.mount()`. — Scott Marcus, Jun 27 '19 at 12:33

score 1 · Accepted Answer · edited Jun 27 '19 at 13:06

mount (extensions = {}) {} is a method, so you'd call it like this.mount or someInstance.mount. mount(this, extensions, this._e) is a function, so you don't call it through an object.

I guess this can be confusing if you look at it from an es5 point of view, as now it looks like a mount function is defined also consuming a mount function.

In es5 this will be similar to

mount = function() {};

Glide = {};
Glide.prototype.mount = function() { mount(); }

It all has to do with context and scoping. If you define a method on a class or object, you can't call it from your current context e.g. in your browser the "global scope" would be window.

var frank = () => {};

would be the same as

window.frank = () => {};

If you define functions within a function, those are not accessible outside, due to every function running into it's own scope. Then there is also the matter of the context, which I find hard to explain. That's why in your example, making a recursive call would be to do this.mount() where this is the class itself.

Some interesting reading on scope and context/closure at css-tricks https://css-tricks.com/javascript-scope-closures/

How does javascript class method know to call function or method when both have the same name?

1 Answers1