StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>The main difference between Extends and Implements is that Implement changes the class's prototype, while Extend creates a copy. This means that if you implement a change into a class all instances of that class will inherit that change instantly, while if you use Extend then all existing instances will remain the same. </p> </blockquote> <p>this is a quote from the mootorial, check it out. <a href="http://mootorial.com/wiki/mootorial/02-class/#implement-vs.-extend" rel="noreferrer">http://mootorial.com/wiki/mootorial/02-class/#implement-vs.-extend</a></p> <p>as for the testing - I would very much recommend you build some sample cases with ninja classes and putting them on to <a href="http://www.jsfiddle.net" rel="noreferrer">http://www.jsfiddle.net</a> - then ask for some analytical advice or the mootools mail list on google or on IRC (irc.freenode.net#mootools), SO does not seem to get many hits from the mootools core team. Ideally, you want to talk to somebody like aaron newton, arian, cpojer or rpflo :)</p> <hr> <h1><strong>update:</strong> I even blogged about this but I was wrong. There simply is a difference in the order in which mutators like <code>Extends</code> and <code>Implements</code> are brought in. You can implement and extend but you need to declare Extends first for it to work.</h1> <p>Read more here: <a href="http://fragged.org/mootools-pattern-fun-class-implements-extends-at-the-same-time_1359.html" rel="noreferrer">http://fragged.org/mootools-pattern-fun-class-implements-extends-at-the-same-time_1359.html</a></p> <hr> <p><strong>update</strong> Turns out, there are some cases where this is useful. Here is the problem:</p> <pre><code>var ninja = new Class({ kill: function() { alert("kill!"); } }); var human = new Class({ initialize: function(){ alert("i r human!"); } }); var badass = new Class({ Implements: [ninja], Extends: human, initialize: function() { alert("i r badass and.. "); this.parent(); this.kill(); } }); new badass(); // i r badass, i r human, this.kill is not a function exception. </code></pre> <p>... simply does not work. You need class <strong>human</strong> to implement <strong>ninja</strong> instead and class <strong>badass</strong> to simply extend <strong>human</strong>. Aside from the side-effect of humans getting a new kill method (which they may or may not know about), it will mean that badass will be able to use .kill as well as call upon his direct parent human.</p> <p>Why not rewrite things the way you want them and w/o complications? Because you may be extending a native class like Request.JSONP and then decide to mixin a new storage class into your extended one. True story... Either way, you may not have the luxury of refactoring certain classes available to you. </p> <p>An interesting pattern to overcome this (consider the human class your request.jsonp, defined elsewhere) - if you just want to add more methods and properties to the class you are extending but don't plan to reuse the mixin class (ninja):</p> <pre><code>human.implement(new new Class({ kill: function() { alert("kill!"); } })); var badass = new Class({ Extends: human, initialize: function() { alert("i r badass and.. "); this.parent(); this.kill(); } }); new badass(); // // i r badass, i r human, kill! </code></pre> <p>Arguably, you could just do <code>human.implement({ method: function });</code> but a class can be so much more.</p> <p>If you want to have a saved reference to your ninja class for other uses, the above would would be the same as this (if you plan to reuse your mixin):</p> <pre><code>var ninja new Class({ kill: function() { alert("kill!"); } }); human.implement(new ninja); // this is what differs from say - instantiation + shared inherited properties. // also, a constructor will work. // the alternative would just do: // human.prototype.kill = function() { alert("kill"); } var badass = new Class({ Extends: human, initialize: function() { alert("i r badass and.. "); this.parent(); this.kill(); } }); new badass(); // // i r badass, i r human, kill! </code></pre> <p>Hope this helps somebody. Here's a practical example where I am extending Request.JSONP with an additional storage class as a mixin: <a href="http://jsfiddle.net/dimitar/YacZe/" rel="noreferrer">http://jsfiddle.net/dimitar/YacZe/</a></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