What on earth is going on here?
How can the Daughter-class contain data that's been set in Brother, and how should I make sure that data set in sibling classes doesn't interfere with eachother?
class Parent
data: {}
class Child extends Parent
age: 10
Son = new Child
Son.data.name = "John Doe"
Daughter = new Child
console.log Daughter.data # => { name: 'John Doe' }
The problem seems to be, that you're not using a constructor to initialize data for each instance. Instead, you're giving it an initial value that happens to sit on Animal which is mutable. Whenever you assign to instance.data.attribute, you are in fact modifying that shared object. If you had used an data: 1 instead, you would not have seen this sharing behavior.
This fixes your problem:
class Parent
constructor: () ->
@data = {}
Disclaimer: I'm not that well versed with JavaScript's prototypal inheritance, so the technical details I provided may not be correct, but the description of the phenomenon seems accurate.
class Parent
staticD: {}
constructor: ->
@data = {}
Compiles to:
Parent = (function() {
Parent.prototype.staticD = {};
function Parent() {
this.data = {};
}
return Parent;
})();
As you can see staticD is initalized only once at the creation of the "class", data on the other hand is initialized in the constructor and assigned a new, empty object every time an instance is created.
If you take your CS code and put it in the side-by-side editor on CoffeeScript's site (http://coffeescript.org/), you'll see that data is on the prototype of the Parent "class". Think of that prototype being the template for new functions (classes) that you create. That prototype either contains other functions or it contains variables available to all instances (like an OO static variable).
You're adding name to a "static" variable data. It will then be available to all instances that "derive" from Parent.
I'm not sure of the inner workings that go on there, but coming from an OO world, that's how I interpret it. I hope this helps.
GENERATED CODE VIA COFFEESCRIPT'S SITE
var Child, Daughter, Parent, Son,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Parent = (function() {
function Parent() {}
Parent.prototype.data = {};
return Parent;
})();
Child = (function(_super) {
__extends(Child, _super);
function Child() {
return Child.__super__.constructor.apply(this, arguments);
}
Child.prototype.age = 10;
return Child;
})(Parent);
Son = new Child;
Son.data.name = "John Doe";
Daughter = new Child;
alert(Daughter.data.name);
UPDATE Just noticed that the CS side-by-side window has a link feature. Here's a link to the side-by-side code.
UPDATE #2
In response to your question in the comments, I'm not sure exactly what you want to do, but you could do something like this:
class Parent
#data: {}
class Child extends Parent
constructor: (@name) ->
age: 10
sayHi: -> alert "Hi " + @name
Son = new Child "John Doe"
Daughter = new Child "Sarah Jane"
Son.sayHi()
Daughter.sayHi()
Perhaps keep the name variable (or the entire data variable) at the parent level and set it via a constructor and access it via a parent function.
Parent resetting the data property, but still makes no difference. Any ideas?
Child, which extends theParentprototype.