StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>That's just where prototypes fit in:</p> <pre><code>function AB() {};//empty object AB.prototype.function1 = function() { var self = this;//doesn't have access to self, but `this` will point to either A or B //do stuff }; var A = function() { var self = this;//constructor } var B = function() { var self = this;//constructor } A.prototype = new AB; A.prototype.constructor = A; B.prototype = new AB; B.prototype.constructor = B; //marginally shorter: A.prototype = B.prototype = new AB; A.prototype.constructor = A; B.prototype.constructor = B; //instances: var foo = new A(); var bar = new B(); console.log(foo.function1 === bar.function1);//logs true </code></pre> <p>Having said that, personally, I prefer to define my constructors <em>regularly</em>:</p> <pre><code>function A() { var self = this; } foo = new A(); console.log(Object.getPrototypeOf(foo).constructor.name);//logs A </code></pre> <p>Whereas your code assigns an anonymous function to a variable, which means that the constructor doesn't have a name:</p> <pre><code>foo = new A(); console.log(Object.getPrototypeOf(foo).constructor.name);//logs '' </code></pre> <p>It's not <em>that</em> big of a deal, but just so you know...</p> <hr> <p>Reference a method from the global (or any other) scope:</p> <pre><code>var virtualNewFunction = new A();//create object virtualNewFunction = virtualNewFunction.function1;//virtualNewFunction now references function1 virtualNewFunction(); </code></pre> <p>The closure will be accessible (exposed), still, but be <em>very</em> careful with <code>this</code>:</p> <pre><code>A = function() { var self = this; this.function1 = function() { console.log(this); console.log(self); }; } foo = new A(); foo.function1();//logs A twice foo = foo.function1 foo();//logs this -> window! self => A </code></pre> <p>An other possibility is <em>"borrowing"</em> a function:</p> <pre><code>A = function() { var self = this; this.function1 = function() { console.log(this); console.log(self); }; } B = function() {//no method var self = this; } foo = new A(); bar = new B(); foo.function1.apply(bar,[]);//call as though function1 was method of B </code></pre> <p>Again, be careful: in this case <code>this</code> logs <code>B</code>, but <code>self</code> still references <code>A</code>! You could build in certain <em>"safety nets"</em>:<br/></p> <pre><code> this.function1 = function() { self = this !== window && this !== self ? this : self;//redefine self to current caller object, unless it's window console.log(this); console.log(self); }; </code></pre> <p>But honestly, you might do well <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this" rel="nofollow">reading up on the this operator</a> to grasp all this referencing trickery. It's not <em>that</em> hard once you get the basics. Also check the <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" rel="nofollow">call</a> and <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" rel="nofollow">apply</a> methods for more details on how to <em>"share/borrow"</em> methods</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload