We Keep Coding

Extending a base page object in Protractor with __proto__

The following code works perfectly... but it would seem using __proto__ is considered controversial. Is this true in the confines of Protractor/Nodejs? And if so, how else could I accomplish the same thing?
Given a basePage:
var BasePage = function() {
this.to = function() {
browser.get(this.url);
};
};
module.exports = new BasePage;
And a page that would extend BasePage:
var basePage = require('../pages/basePage.js');
var MyPage = function() {
this.__proto__ = basePage; // extend basePage...
this.url = 'http://myPage.com';
};
module.exports = new MyPage;
When a test calls:
var myPage = require('../pages/myPage.js');
it('should go to page', function() {
myPage.to();
};
Then win?

but it would seem using__proto__ is considered controversial.
Yes.
Is this true in the confines of Protractor/Nodejs?
Yes, even though at least in the known environment you can be sure that it works.
And if so, how else could I accomplish the same thing?
There is no reason to set the __proto__ in the constructor like you do. That's what the .prototype property was made for! This will work exactly like your code:
var basePage = require('../pages/basePage.js');
var MyPage = function() {
this.url = 'http://myPage.com';
};
MyPage.prototype = basePage; // extend basePage...
module.exports = new MyPage;
However, it's a bit strange that you export instances of your constructor. If your goal is to create singleton objects, don't use constructors and new. If your goal is to create a "class", you should export the constructor function (and do inheritance a bit different).

In the snippet below you can play around with different ideas involving prototypal inheritance. My personal take is that it's more conventional to call the base class constructor inside the subclass constructor. That way you can use your code in any browser as well as in Node.
var baseDiv = document.getElementById("base");
var subDiv = document.getElementById("sub");
var BaseClass = function BaseClassConstructor(div) {
this.div = div;
};
BaseClass.prototype.text = "I'm the base class!";
BaseClass.prototype.to = function BaseClassTo() {
this.div.innerHTML = this.text;
}
// This SubClass calls the base class constructor on its "this" context.
var SubClass = function SubClassConstructor(div) {
BaseClass.call(this, div);
};
// The prototype is then constructed by cloning the base class prototype.
SubClass.prototype = Object.create(BaseClass.prototype);
SubClass.prototype.text = "I'm the sub class!";
var b = new BaseClass(baseDiv);
var s = new SubClass(subDiv);
s.to();
b.to();
<div id="base"></div>
<div id="sub"></div>

Replacing __proto__ with prototype

I tend to write my Javascript "classes" in c-style.
In C# (for example) we do this
public class Parent {
// stuff
}
public class Child : Parent {
// Protected and public stuff from Parent will be accessible
}
In JS I found the equivalent of this by using proto, in example
var namespace = namespace || {};
namespace.Parent = function() {
// Public variables
self.pubVariable = "I am accessible";
// Private variables
var priVariable = "I'm not accessible outside of self";
// ctor
function self() {}
return self;
}
namespace.Child = (function() {
this.__proto__ = new namespace.Parent();
// ctor
function self() {}
self.init = function() {
// Prints the pubVariable
console.log(pubVariable);
};
return self;
})($);
// Call it (statically)
namespace.Child.init();
While this works it is Webkit and Mozilla only. I've understood that this could somehow be achievable using prototype but can't figure out how. Any advice is appreciated. Thanks!

For parent/child classes, I would do something like this
// your parent class
var Parent = function() {
// parent constructor
console.log("parent constructor!");
// some public properties
this.foo = "foo";
this.bar = "bar";
// a private data member
var secret = "123456";
};
// a parent function
Parent.prototype.something = function() {
console.log("something!");
}
// your child class
var Child = function() {
// call parent constructor
Parent.call(this);
// child constructor
console.log("child constructor!");
// override bar
this.bar = "override!";
};
// the magic!
// child prototype build from parent prototype
Child.prototype = Object.create(Parent.prototype, {constructor: {value: Child}});
Example usage
var c = new Child();
c.something();
// => parent constructor!
// => child constructor!
// => something!
c.foo //=> "foo"
c.bar //=> "override!"
If you're using "namespacing" the concept is identical.
EDIT
Per your comment, here's and added demonstration
var Foo = function(){};
Foo.prototype.hello = function(){ return "hello!"; };
var foo = new Foo();
// call our hello method
// this calls foo.__proto__.hello
foo.hello(); //=> "hello!"
// override `hello` method for this instance
foo.hello = function(){ return "こんにちは"; };
// call our hello method again
// this calls foo.hello because it is defined directly on our instance
// (it has a higher precedence in the lookup chain)
foo.hello(); //=> "こんにちは"
// remove the override
delete foo.hello;
// call our hello method again
// this goes back to calling foo.__proto__.hello
foo.hello(); //=> "hello!"
// remove the method prototype
delete Foo.prototype.hello
// call our hello method one last time
// spoiler: it's gone!
foo.hello(); //=> TypeError: Object [object Object] has no method 'hello'
As you can see, you lose this functionality by directly defining methods on the instance using this.something = function(){};. I personally prefer defining methods on the prototype because of the added flexibility. This way, the prototype really works like a blueprint. You get all the pre-defined behavior; you can modify if necessary and revert to the original whenever you want, all on a per-instance basis.
ONE MORE THING
In our last example, we had a prototype method and an instance method override. Is there a way to call the original method too? Let's see!
var Foo = function(){};
Foo.prototype.hello = function(){ return "hello!"; };
var foo = new Foo();
foo.hello = function(){ return "こんにちは！"; }
// call override method
foo.hello(); //=> "こんにちは！"
// call original method
Foo.prototype.hello.call(foo); //=> "hello!"
// japanese just one more time...
foo.hello(); //=> "こんにちは！"
This would work too, but I never really have the need. I suppose the benefit is you don't need to know the original class this way :)
// call original method from the instance
foo.__proto__.hello.call(foo); //=> "hello!"
PROTOTYPES!

I think, you want this
// namespace
var namespace = namespace || {};
// Parent Class
namespace.Parent = function() {
this.pubVariable = "I am accessible";
var priVariable = "I'm not accessible outside of this";
}
// Child class
namespace.Child = function() {
// namespace.Parent.call(this);
this.init = function()
{
// returns Parent class' pubVariable
// inherited by namespace.Child.prototype
return this.pubVariable;
}
};
// inherit Parent class
namespace.Child.prototype = new namespace.Parent();
var kid = new namespace.Child();
console.log(kid.init()); // I am accessible
If you use namespace.Parent.call(this) then Child class will have it's own copy of pubVariable but now Child class is using Parent's pubVariable.
Also, if you want to share methods from parent class with sub classes then you should add methods in the parent class' prototype, like this
namespace.Parent = function() { //... }
namespace.Parent.prototype.aMethodInParent = function(){ //... };
So, when you will inherit it in a subclass like this
namespace.Child = function() { // ... };
namespace.Child.prototype = new namespace.Parent();
Another Sub/Child Class
namespace.AnotherChild = function() { // ... };
namespace.AnotherChild.prototype = new namespace.Parent();
In this case both sub/child classes will use the same aMethodInParent() method from their parent class.
DEMO.

Prototype for private sub-methods

I have code that looks like this:
var baseClass = function() {
// CODE
var subClass = function() {
// MORE CODE
}
}
Adding methods to baseClass is fine, I just use
baseClass.prototype.newMethod = function () {
// NEW CODE
}
My question is how should I add methods to subClass? Is the only way to simply make it a public method?
######## EDIT ##############
OK so I've rearranged the code so the subClass is outside the baseClass. I pass in baseClass so subClass can still access the properties of the instance of baseClass.
var baseClass = function() {
var base = this;
this.property_a = 1;
this.property_b = 5;
var sub = new subClass(base);
// CODE
}
var subClass = function(parent) {
var sub = this;
this.property_c = 1;
this.method_a = function() {
return sub.property_c + parent.property_a;
}
// MORE CODE
}
this is fine and works, but now I have a new problem of when I add a method using prototype:
subClass.prototype.method_b = function(){
return sub.property_c + parent.property_b;
}
I get an error saying parent isn't defined.
Basically I have a fairly simple web application that has two sides, a viewing side and an editing side. I build the base class which includes everything necessary for viewing, and I want to add the methods required for editing in a different file so they're only loaded when a user is on the editing page.

Why do you declare that subclass in the base class? Doesn't make sense to me.
You can add to the subclass's prototype whereever it is in you scope. In your code it would be
var baseClass = function() {
// CODE
var subClass = function() {
// MORE CODE
}
subClass.prototype = {
...
}
}
But I'd suggest to put it out of the base class constructor. If you want it private for some reason, add a closure:
(function(){
baseClass = function() { // public
// CODE
}
baseClass.prototype = {...};
var subClass = function() { // private
// MORE CODE
}
subClass.prototype = Object.create(baseClass.prototype);
subClass.prototype.newMethod = function () { ... }
})()
EDIT to answer the extended question:
Ah, subClass doesn't inherit from baseClass! We had expected that, otherwise it may be OK to have it inside the constructor. Then, the same prototype could have been added to each of the different subClass constructors:
var subproto = {
method_b: = function(){
// manipulate "this"
},
...
};
function baseClass() {
// some code
function sub() {
// is a constructor for subs which belong to this specif base intance
...
}
sub.prototype = subproto; // the sub constructors of each base instance
// have the same prototype
var x = new sub(),
y = new sub(); // example usage of the sub constructor
}
baseClass.prototype = {...}
Else, if you want one common sub constructor (outside of function baseClass), you may give the base instance the sub belongs to as an argument to the constructor - as you did. Of course the sub (both internal and external methods) can only access public properties of that base instance.
The mistake you made in your rearranged code is that your prototype ("external") methods tried to access the private parent variable from the sub constructor. As you say, "error saying parent isn't defined".
var subClass = function(parent) {
var sub = this;
this.parent = parent; // make it public
this.property_c = 1;
this.method_a = function() {
return sub.property_c + parent.property_a;
}
// MORE CODE
}
subClass.prototype.method_b = function(){
// prototype functions can only access public properties
// i.e. privileged methods, public attributes and other prototype properties
return this.property_c + this.parent.property_b;
}

You will have to define the methods in the same context as you define subClass:
var baseClass = function() {
// CODE
var subClass = function() {
// MORE CODE
}
subClass.prototype.newMethod = function () { ... }
}
If that's not possible, then you will need to expose subClass to the appropriate context or provide a mechanism from baseClass to extend subClass.

If you really want to keep the subclass private, you could hide the definitions in a closure:
var BaseClass = (function() {
function BaseClass() { ... };
function SubClass() { ... };
BaseClass.prototype.foo = function() { ... };
SubClass.prototype.foo = function() { ... };
return BaseClass;
})();
I have personally found this kind of closure-enforced protection to be more trouble than it's worth (ex, makes debugging more difficult)… But if you wanted to do it, that's how you would.

javascript inheritance with protected variables

Is it possible in javascript to have a variable that is not able to access out side the class's functions, but is able to be accessed by classes that inherit it? I.E:
class1 has protected var x = 4;
class2 inherits class1;
class2.prototype.getVar = function(){return /* parent, uber, super, whatever */ this.x;};
var cl2 = new class2();
console.log(cl2.x) // undefined
console.log(cl2.getVar()) // 4

No. Prototypal inheritance is limited to properties of objects.
Variables within the constructor are only available to other code in that variable scope.
You could probably come up with something like...
function cls1() {
var a = 'foo';
this.some_func = function() {
alert(a);
};
}
function cls2() {
cls1.apply(this, arguments);
var cls1_func = this.some_func;
var b = 'bar'
this.some_func = function() {
cls1_func.apply(this, arguments);
alert(b);
};
}
var x = new cls2;
x.some_func(); // alert "foo" alert "bar"
Or to make it more specific to your pseudo code...
function class1() {
var x = 4;
this.getVar = function() {
return x;
};
}
function class2() {
class1.apply(this, arguments);
var cls1_get_var = this.getVar;
this.getVar = function() {
return cls1_get_var.apply(this, arguments);
};
}
class2.prototype = Object.create( class1.prototype );
var cl2 = new class2;
console.log(cl2.x) // undefined
console.log(cl2.getVar()) // 4

I think you need to use a closure to achieve what your trying to do. Something like this:
Class1 = function() {
var x = 4;
return {
getVar: function() {
return x;
}
}
} ();// executes the function immediately and returns an
//an object with one method - getVar. Through closure this method
//still has access to the variable x
Class2 = function() { };// define a constructor function
Class2.prototype = Class1;//have it inherit from Class1
Cl2 = new Class2();//instantiate a new instance of Class2
console.log(Cl2.x);//this is undefined
console.log(Cl2.getVar());//this outputs 4
This is one of the neat things about javascript in that you can achieve the same things in javascript as you would in a class based language without all the extra key words. Douglas Crockford (always good to consult about javascript) explains prototypal inheritance here
Edit:
Just had a second look at your question.If you want newly created methods in your class to access the variable in the base class then you would have to call the getVar method within your own method.Like such:
Class2 = function() {
this.getVar2 = function() {
return this.getVar();
}
};
console.log(Cl2.getVar2()) //outputs 4

JavaScript prototypal inheritance workaround

Here is an example:
var Box = function() {
this.id = generateUniqueId();
};
Box.prototype = {
add:function(parent) {
parent.appendChild(this.elm);
}
};
var NewBox = function() {
this.newThing = true;
};
NewBox.prototype = new Box();
NewBox.prototype.remove = function() {
this.elm.parentNode.removeChild(this.elm);
};
var a = new NewBox();
var b = new NewBox();
alert(a.id); // alerts 0
alert(b.id); // also alerts 0! :#
I would like to have a and b (basically each time I create a NewBox) have their own id. I understand that NewBox is using prototypal inheritance and is thus inheriting from a single instance of the generated id that it gets from Box, but I would like it so that each NewBox gets its own id without having to explicitly say that inside the NewBox constructor.
Maybe it's impossible or I'm doing something really wrong, so please help!
Thanks a lot!

In your example, the Box constructor gets executed only when you set the NewBox.prototype object.
You could workaround this by calling the Box constructor function inside NewBox with the Function.prototype.apply method, to set the this value and forward all the argument values, for example:
//..
var NewBox = function() {
Box.apply(this, arguments);
this.newThing = true;
};
//..
var a = new NewBox();
var b = new NewBox();
// assuming your `generateUniqueId` function
// increments a number
alert(a.id); // will alert 1
alert(b.id); // will alert 2
Now, each time the NewBox constructor is called to create a new object instance (new NewBox();), it will call the Box function to apply all its logic on it. This will help you to avoid repeating the logic of the parent constructor over and over.
The apply, is used call the "parent" constructor function setting the this value to the object instance that is being created by the NewBox constructor and we pass all arguments provided to this function.
Your example also shows a common problem, when you express inheritance relationship through NewBox.prototype = new Box(); the Box constructor gets called and it has side effects, this new object will be initialized and your generateUniqueId function will be executed for the first time, if you want to avoid that, you need to either use a temp constructor, just to make a new object that inherits from Box.prototype, or use the new ECMAScript 5 Object.create method for the same purpose, for example:
function inherit(o) {
function Tmp() {}
Tmp.prototype = o;
return new Tmp();
}
//.....
NewBox.prototype = inherit(Box.prototype);
Or:
NewBox.prototype = Object.create(Box.prototype);
In that way, you express the same inheritance hierarchy without running your Box constructor that first time, avoiding any side effect that it might cause.
At last but not least, whenever you replace a function's prototype property is always recommended to restore the constructor property of this new prototype object, otherwise it will point to the wrong function.
In your example, since you replace the NewBox.prototype with a new instance of Box, the NewBox.prototype.constructor property will point to Box, (your instances are affected, e.g. a.constructor === Box; // true) instead of to NewBox as you would expect, we need to set it back, e.g.:
NewBox.prototype = someObject; // as any of the examples above
NewBox.prototype.constructor = NewBox;
You could abstract those details into a function, as I did in the inherit function above:
function inherits(child, parent) {
var obj, Tmp = function () {};
Tmp.prototype = parent.prototype;
obj = new Tmp();
child.prototype = obj;
child.prototype.constructor = child;
}
//...
// instead of setting the `NewBox.prototype` manually
inherits(NewBox, Box); // "NewBox inherits from Box"
//...

Maybe it's impossible or I'm doing something really wrong, so please help!
You're doing something wrong.
If you want instance-specific values, initialize them in the constructor, not the prototype.

Matt Ball has the right idea. Instead try:
var Box = (function(){
var numberOfBoxes = 0;
function() {
this.id = numberOfBoxes++;
}
})();
Or in the case you want all your (different) classes to have unique ids:
var generateUniqueID = (function(){
var runningCount = 0;
return function (){
return runningCount++;
}
})();
var Box = function() {
this.id = generateUniqueId();
};
var NewBox = function() {
this.id = generateUniqueId();
this.newThing = true;
};