title: Making `obj.someMethod()` available as `obj()` without preventing `obj` from behaving as a normal instance
body: <p>To avoid misunderstanding, let's agree on the meaning of certain words first. The following meanings are not universally accepted ones, I only suggest them as a context for this question.</p>
  
  <ul>
  <li><strong>function</strong> -- an instance of <code>Function</code>. It has a <em>procedure</em> associated with it.</li>
  <li><strong>object</strong> -- an instance of any other class. Does not have a procedure associated with it.</li>
  <li><strong>procedure</strong> -- a block of code that can be executed. In JS procedures  can only be found associated with <em>functions</em>.</li>
  <li><strong>method</strong> -- a function that is stored in a property of another object. Methods execute in their host objects' contexts.</li>
  </ul>
  
  <p>In JavaScript it is common that <em>objects</em> are customized with properties and methods, while <em>functions</em> don't. In other words, if you see this in code:</p>
  
  <pre><code>foo.bar   // Accessing a property on an instance
  foo.baz() // Calling a method on an instance
  </code></pre>
  
  <p>then <code>foo</code> is almost certainly an <em>object</em> and not a <em>function</em>.</p>
  
  <p>But technically <em>functions</em> are no different from <em>objects</em> (in fact, <em>functions</em> in JS are considered to be <em>objects</em>, it's just me distinguishing them for clarity).</p>
  
  <p>And if you do this: </p>
  
  <pre><code>const foo = function () { /*...*/ }
  foo()     // Calling the function's procedure
  foo.bar   // Accessing a property on the function
  foo.baz() // Calling a method on the function
  </code></pre>
  
  <p>...it will work just fine.</p>
  
  <p>I would like to introduce two more terms so that you can understand what I mean. I'm not trying to alter the rules of JavaScript here, just want to be understood.</p>
  
  <ul>
  <li><strong>function-object</strong> -- an <em>function</em> that is used as an <em>object</em>: has its own properties and/or methods.</li>
  <li><strong>main method</strong> -- the procedure of a <em>function-object</em> itself, as opposed to methods stored as properties on a <em>function-object</em>.</li>
  </ul>
  
  <p>Many JS libraries offer <em>function-objects</em>, for example jQuery and LoDash. I. e. you can do both <code>$()</code> and <code>$.map()</code>. </p>
  
  <hr>
  
  <p>Okay, now to the matter.</p>
  
  <p>I would like to be able to create my own <em>function-objects</em> with the following requirements:</p>
  
  <ol>
  <li>I should be able to use the ES2015 <code>class</code> declaration to describe the class of my <em>function-object</em>. Or at least the way of describing the class should be convenient enough. Imperatively assigning properties and methods to a <em>function</em> is not convenient.</li>
  <li>The <em>main method</em> of my <em>function object</em> should execute in the same context as its other <em>methods</em>.</li>
  <li>The <em>main method</em> and other <em>methods</em> should be bound to the same instance. For example if I have a <em>main method</em> and a normal <em>method</em> that both do <code>console.log(this.foo)</code>, then assigning to <code>myFunctionObject.foo</code> should modify the behavior of both the main mehtod and the other method.</li>
  </ol>
  
  <p>In other words, I want to be able to do this:</p>
  
  <pre><code>class Foo {
    constructor   () { this.bar = 'Bar'; }
    mainMethod    () { console.log(this.bar); }
    anotherMethod () { console.log(this.bar); }
  }
  </code></pre>
  
  <p>...but an instance of <code>Foo</code> should have <code>foo.mainMethod()</code> available simply as <code>foo()</code>.</p>
  
  <p>And doing <code>foo.bar = 'Quux'</code> should modify the behavior of both <code>foo()</code> and <code>foo.anotherMethod()</code>.</p>
  
  <p>Maybe there's a way to achieve it with <code>class Foo extends Function</code>?</p>