Thanks man, just signed up for the course. Good share. I think I understand scope (i.e. inner function access to outer scope but not vice versa) and by extension closures in JS, but what I am struggling with is definitely the internal [[Prototype]] property on objects. I really, really, REALLY don't like it. Why can't it just be classes and instances like PHP??
If you really, really, REALLY dislike prototypal Object-oriented programming in Javascript, I do have an idea on how you can "help" it.
First off, about your code, it does seem like an interesting way to go about it. However, I'm not entirely sure how you would distinguish Objects from Classes now (I'm using these terms loosely - there aren't exactly Classes in Javascript).
Note that any modification to Foo.bar would affect Test.bar and Bar.bar. On the other hand, assigning Bar.bar to something else only affects Test.bar because it erases the value of Bar.bar (which is a reference to Foo.bar) and assigns it something else. Test.bar, following the prototypal chain, references Bar.bar, and thus, is affected.
Code:
var Foo = {
bar: function () {
console.log('FooBar')
}
};
var Bar = Object.create(Foo);
var Test = Object.create(Bar);
Bar.bar === Foo.bar; // true
This is, actually, a good thing for methods. We want methods to reference their parent's methods - and for any override to only influence the overridden class' methods and its children.
However, this is not a good thing for instance data fields (or values). We want every object instance to have a unique value (or state) that they keep track of.
This is the classical idea of Object-oriented programming that we are familiar with.
------
Next, you would be pleased that in ECMAscript 6, they are trying to introduce
some syntactic sugar (classes, extends and static).
------
Finally, in CS1101S (where we use a slightly modified version of Javascript), Objects Inheritance and construction was slightly modified to resemble a more classical form of Object-oriented programming.
First, let us consider this piece of
Java code:
Code:
// This describes a TwoDimensionalCoodinate Class
class TwoDimensionalCoordinate {
// public (not good design, but we'll leave it for now) data fields
public int x;
public int y;
// public constructor takes in 2 parameters
public TwoDimensionalCoordinate(int x, int y) {
this.x = x;
this.y = y;
}
// public method for incrementing x and y
public void incrementX() {
this.x = this.x + 1;
}
public void incrementY() {
this.y = this.y + 1;
}
}
// This describes a ThreeDimensionalCoordinate class that extends TwoDimensionalCoordinates
class ThreeDimensionalCoordinate extends TwoDimensionalCoordinates {
// public data field
public int z;
// public constructor for ThreeDimensionalCoordiante
public ThreeDimensionalCoordinate(int x, int y, int z) {
super(x, y); // Note: This is required (and must be the first line in a constructor), but Java "helps" put this in if you "forgot"
this.z = z;
}
// public methods for incrementing z
public void incrementZ() {
this.z = this.z + 1;
}
@override
// public method for incrementing x is faster in ThreeDimensionalCoordinates
public void incrementX() {
this.x = this.x + 2;
}
class SandBoxMain {
public static void main(String args[]) {
TwoDimensionalCoordinate xy = new TwoDimensionalCoordinate(3, 5);
ThreeDimensionalCoordinate xyz = new ThreeDimensionalCoordinate(4, 7, 8);
xy.incrementX(); // 3 becomes 4
xy.incrementY(); // 5 becomes 6
xyz.incrementX(); // Overridden method; 4 becomes 6
xyz.incrementY(); // Inherited method; 7 becomes 8
System.out.println(xy.x);
System.out.println(xy.y);
System.out.println(xyz.x);
System.out.println(xyz.y);
System.out.println(xyz.z); // This instance has a z parameter
}
}
As you can see from the above (WOT) snippet, we have classes, constructors, and the extends keyword.
Java creates new classes using the new keyword and by calling the constructor with a function call-like syntax. Inside the parenthesis, we put in the arguments required for the constructor.
Most people are familiar with the above style. Excellent. In CS1101S, we attempt to change the declaration of Objects such that it resembles a class, constructor and extending model too.
The final "product" looks like this:
Code:
// This serve as the "constructor" for the "class"
function TwoDimensionalCoordinate(x, y) {
// ALL class-related [B]parameters-only[/B] uses this.<parameter>
// ALL data fields that are NOT STORED uses var keyword
this.x = x;
this.y = y;
}
// ALL class-related [B]methods-only[/B] go into the prototype
TwoDimensionalCoordinate.prototype.incrementX = function() {
this.x = this.x + 1;
};
TwoDimensionalCoordinate.prototype.incrementY = function() {
this.y = this.y + 1;
};
function ThreeDimensionalCoordinate(x, y, z) {
// This is the mandatory super(x, y);
// Here, we[B] demand[/B] you write this line (if inheriting) in the[B] first[/B] line of your subclass constructor
TwoDimensionalCoordinate.call(this, x, y);
// data fields
this.z = z;
}
// We also need the "extends" keyword to tell the program that ThreeDimensionalCoordinate is a subclass of TwoDimensionalCoordinate
ThreeDimensionalCoordinate.Inherits(TwoDimensionalCoordinate);
ThreeDimensionalCoordinate.prototype.incrementZ = function() {
this.z = this.z + 1;
};
// Overriding methods for subclasses is completely the same as declaring methods
ThreeDimensionalCoordinate.prototype.incrementX = function() {
this.x = this.x + 2;
};
var xy = new TwoDimensionalCoordinate(3, 5);
var xyz = new ThreeDimensionalCoordinate(4, 7, 8);
xy.incrementX(); // 3 becomes 4
xy.incrementY(); // 5 becomes 6
xyz.incrementX(); // override; 4 becomes 6
xyz.incrementY(); // inherited; 7 becomes 8
xy.x;
xy.y;
xyz.x;
xyz.y;
xyz.z; // This instance has a z parameter
// Extra checks
xy instanceof TwoDimensionalCoordinate; // true
xy instanceof ThreeDimensionalCoordinate; // false
xyz instanceof TwoDimensionalCoordinate; // true
xyz instanceof ThreeDimensionalCoordinate; // true
As you can see, if we can achieve the above, Objects in javascript will look very... classical.
We get the instance parameter independence that we are familiar with - changing xy.x doesn't change xyz.x. And we get the method chaining that we are familiar with (this helps with speed) - before we override ThreeDimensionalCoordinate.incrementX, ThreeDimensionalCoordinate.incrementX === TwoDimensionalCoordinate.incrementX. Hence, if we change the parent classes' implementation of incrementX, it correctly modifies its children classes' implementations too. On the other hand, changing the children's implementation
does not affect the parent in any way.
Now, I do not claim I know how the CS1101S team did it, but I guessed (reverse-engineered) that they probably included a line of code right at the start of the Javascript code:
Code:
Function.prototype.Inherits = function(parentObj) {
this.prototype = Object.create(parentObj.prototype);
};
That's all. If you insert this snippet right at the top of the above javascript snippet, you get the behavior desired.
Now, I'm pretty sure some of the programmers here would immediately come in to denounce such blasphemy - extending natives are frowned upon by some.
Also, note that this method does not support multiple inheritance (not that I think much people would use it).
Finally, when using such a solution, you want to
very carefully brief collaborators to avoid "Inherits" like it is a reserved keyword. If someone created another function with parameter this.Inherits = <something else>;, you might run into trouble with "subclasses" of this function.
-------------
On a closing note, about concerns related to confusion between function calls and Object instance calls.
I'd suggest you use standards. For example, most programmers capitalize the first letter of the class name, while they don't capitalize the first letter of a function name. The name, thus, represents our intention for creating that function.
Therefore:
Code:
var a = new twoblahblah(3, 4); // This will ring alarm bells (named like a function - should not have new)
var b = Twoblahblah(3, 4); // This will ring alarm bells (named like a class - should have new)
------------------
Credits for Ideas: CS1101S team from NUS SoC
