[jQuery] OT: simple javascript inheritance by john resig

[jQuery] OT: simple javascript inheritance by john resig

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>Based on the simple javascript inheritance snippet published by john resig (<a href="http://ejohn.org/blog/simple-javascript-inheritance/)"> http://ejohn.org/blog/simple-javascript-inheritance/)</a>, I'm developing some classes and an error is causing me some problems.</div><div>In this code sample I created a simple "person" class, and two classes inherits of it. Both "child" classes have a "projects" property (extended from the parent class).</div><div>
</div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">var Person = Class.extend({</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">projects: [],</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">addProject: function(name) {</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">this.projects.push(name);</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">}</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">});</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">
</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">var Employee = Person.extend({</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">init: function() {</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">this.addProject('New Project');</span></font></font></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;"> </span></font></font></i></span><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">}</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">});</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">
</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">var Boss = Person.extend({});</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">
</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">var n = new Employee();</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">console.log(n.projects.length);</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">
</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">var p = new Boss(true);</span></font></font></i></div><div><i><font class="Apple-style-span" face="Arial"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 11px;">console.log(p.projects.length);</span></font></font></i></div><div>
</div><div>
</div><div>If I follow the code I create a Employee isntance and add a project to it's queue. Then create a Boss class. At this point if I make a console.log of Boss projects I get the project stored by Employee. Why? They are different instances and must have different projects queues?</div><div>
</div><div>
</div><div>Thanks.</div><div>
</div><div>
</div><div>PD: One thing that I can do is initializing the projects property on every child constructor. But this supposes me a lot of changes on my actual code.</div></body></html>