Develop Reference

Is it possible to safely mix javascript class styles in an inheritance tree

I have picked up a piece of software which is fairly old and it has this form of "class" definition
function thisThing(parm1, parm2)
{
var self = new BaseThing(parm1);
self.val2 = parm2;
self.function2 = function() { ... }
return self;
}
I'd like to convert the whole hierachy to use the thisThing.prototype style of class, something like this
function thisThing(parm1, parm2)
{
var self = new BaseThing(parm1);
self.val2 = parm2;
return self;
}
thisThing.prototype = Object.create(BaseThing.prototype);
thisThing.prototype.constructor = thisThing;
thisThing.prototype = {
function2() { ... }
}
but I'm not sure if it is safe to mix the two styles.
Do I have to convert the whole hierarchy at once? Or can I do it a class at a time, and in which case do I need to do it top up, bottom down, or can I do it in the order I come across classes?
A note: Please don't suggest using ES6 classes, as they are not available in my current environment.

You've said that the old thisThing is called via new, which is good news in terms of whether you can mix things together (although we could work around it if not).
What you've shown as your desired form is quite non-standard, and thisThing.prototype is never used in it. I'm going to assume you mean you want to use standard constructor functions, which look like this:
function ThisThing(parm1, parm2) {
BaseThing.call(this, parm1);
this.parm2 = parm2;
}
ThisThing.prototype = Object.create(BaseThing.prototype);
ThisThing.prototype.constructor = ThisThing;
ThisThing.prototype.someMethod = function() {
// ...
};
Based on what you have in the question, you can go ahead and do that. (I do recommend the change in capitalization, it's the overwhelming standard for constructor functions.)
If there's any chance code might be calling it without new, you can make it tolerate that by detecting what's happened and handing off to new in the constructor:
function ThisThing(parm1, parm2) {
if (!(this instanceof ThisThing)) {
// Called without `new`; handle it
return new ThisThing(parm1, parm2);
}
BaseThing.call(this, parm1);
this.parm2 = parm2;
}
// ...
The thisThing you showed was using BaseThing as a constructor, so I assume (from that and the name) that it's already using the constructor pattern above.

You should be able to replace it like this. The only issue might be setting the param1 is a new BaseThing, so you might need to modify your old code.
by doing this you are using prototypical inheritance to get the methods of BaseThing.
Conversion like this can be mixed with your existing code with no problems so you can change one class at a time.
function ThisThing(param1, param2) {
this.val1 = param1
this.val2 = param2
}
ThisThing.prototype = new BaseThing
ThisThing.prototype.function2 = function() {}
var thing = new ThisThing(1, 2)
console.log(
thing instanceof BaseThing, // => true
thing instanceof ThisThing // => true
)

JavaScript Equivalent of Late Static Binding

In PHP, I have the following class definitions
class my_pet{
public static $name = "paulie";
public static function get_name(){
return static::$name;
}
}
class my_dog extends my_pet{
public static $name = "stacey";
}
When I echo using
echo my_dog::get_name();
I'll get "stacey".
If I change
return static::$name
to
return self::$name;
the answer turns to "paulie".
In JavaScript, I have the following object constructors
function my_pet(){
this.name = "paulie";
}
my_pet.prototype.get_name = function(){
return this.name;
}
function my_dog(){
this.name = "stacey";
}
my_dog.prototype = new my_pet();
my_dog.prototype.constructor = my_dog;
my_pet_instance = new my_dog();
When I call my method using
alert(my_pet_instance.get_name());
I will always get "stacey".
Is there a late static binding equivalent for JavaScript so I can get "paulie" instead of "stacey"?

In your JavaScript code, there's nothing static (or even "static-like").
To simulate static variables, you can attach properties directly to constructors:
function my_pet(){}
my_pet.name = "paulie";
function my_dog(){}
my_dog.name = "stacey";
However, to achieve what you're looking for, you may want to use the prototype chain instead:
function my_pet(){}
my_pet.prototype.name = "paulie";
function my_dog(){
this.name = "stacey";
}
my_dog.prototype = Object.create(my_pet.prototype);
var stacey = new my_dog();
console.log(stacey.name); //stacey
console.log(my_dog.prototype.name); //paulie
delete stacey.name; // no more shadowing
console.log(stacey.name); // paulie

While the semantics and mechanism are different in JavaScript, you can still access the sub-class value of the name property from the prototype object. Try adding this line to the end of your code:
my_dog.prototype.name; // returns "paulie"

Try this Class.js javascript library.
There are implemented 2 key properties in every dynamic and static this context - this.self and this.static.
It behaves in the same principle like late static binding in PHP. this.self and this.static contains class (prototype function) definition with build in properties Name, Namespace and Fullname. Read more in project README - Features.
Syntax is possible to customize in any way you are already used to write your classes (7th demo - Class.js - example to customize syntax).
It works in all old browsers without ES6 support, in Node, in Windows Script Host environment and also in Adobe scripts.
So the code above should looking like:
Class.Define('MyPet', {
Static: {
GetStaticName: function () {
return this.static.Name;
},
GetSelfName: function () {
return this.self.Name;
}
}
});
Class.Define('MyDog', {
Extend: MyPet
});
console.log(MyPet.GetSelfName()); // MyPet
console.log(MyDog.GetSelfName()); // MyPet
console.log(MyPet.GetStaticName()); // MyPet
console.log(MyDog.GetStaticName()); // MyDog

Adding a property to a "Class" in JavaScript

There are no actual classes in javascript. But you have to work with what you get.
Lets take this example "Class":
var example = function (string) {
this._self = string;
}
With the above, you could do something like:
var ex = new example("Hello People."),
display = ex._self; // returns "Hello People."
I thought that by using something like example.prototype.newFun = function(){} would add a new property to that "Class". But it isn't working in my code.
Here is the full code i'm testing:
var example = function (string) {
this._self = string;//public, var like, storage
}
var showExample = new example("Hello People");
showExample.prototype.display = function (a) {//code stops here, with error "Uncaught TypeError: Cannot set property 'display' of undefined"
return a;
}
console.log(showExample._self);
console.log(showExample.display("Bye"));
What i'm trying to do is add the display function to the example function as a "public function". I might be doing something wrong.

It's not the object that has the prototype, it's the function that you use to create the object:
var example = function (string) {
this._self = string;
}
example.prototype.display = function (a) {
return a;
};

Because there's no prototype for showExample - it's only an instance of example. Try to do this: example.prototype.display = function (a) {} and it will work.
Here's a bit more on classes in JavaScript:
3 Ways to "define" classes
This lovely SO question
I like the way Classy handles this and also how classes are implemented in CoffeeScript.

You can modify to the constructor of showExample ..
ex.
showExample.constructor.prototype.display = function (a) {
return a;
}

You try to add a method to the prototype of the instance of example (showExample). The instance has no prototype. Try example.prototype.display = function() {/*...*/}; (in other words, add the method to the prototype of the constructor of showExample, that is example) and check again. After that, all instances of example 'know' the display method, or in your words, display is 'public' to all instances.
You can add the method to the instance using showExample.display = function() {/*...*/};. Using that, only showExample knows the the display method.

in your case showExample is an object of example...
use
example.prototype.display = function(a)...

JavaScript : Create new object of a custom class based on an existing one (adding methods to it)

I use the iOS UI Automation framework to make sure my iPhone app rocks.
Everybody who uses this framework would tell you that it's great, but that it's lacking a lot of structure.
So I have to deal with instances of UIAWindow, which represent different screens of my app. To be more object-oriented, I'd like to have a specific class for each screen, so I could add specific methods, like
myScreen1.tapDoneButton();
var total = myScreen2.getNumberOfElements();
For the moment, I'm able to achieve this by passing the instances of UIAWindow to functions that will add the appropriate methods, like this :
function makeMainScreen(actualScreen)
{
actualScreen.constructor.prototype.getAddButton = function() {
return this.buttons()["add button"];
};
actualScreen.constructor.prototype.tapAddButton = function() {
this.getAddButton().tap();
};
// Add any desired method...
return actualScreen;
}
It works fine, I use it like this :
var mainScreen = makeMainScreen(app.mainWindow());
mainScreen.tapAddButton();
But that doesn't seem object-oriented enough, I would like to create real objects, using the new and this keywords, so I'd have a declaration like this :
function MainScreen(actualScreen){
// This line doesn't work : because 'this' is immutable
this = actualScreen;
this.tapAddButton = function(){
this.getAddButton().tap();
}
//...
}
And I'd use it like this :
var mainScreen = new MainScreen(app.mainWindow());
mainScreen.tapAddButton();
I thought I could save the actualScreen as a property of the object (Like in Grace Shao's answer below), and call all the methods on it, but I'd like keep the original UIAWindow methods.
Does anybody know how to do this?
Or perhaps what I'm trying to achieve doesn't make sense, in which case I'd be happy to know.

If I understand correctly, you could try the following:
function MainScreen(actualScreen){
this.screen = actualScreen;
}
MainScreen.prototype.tapAddButton = function () {
this.screen.getAddButton().tap();
};
MainScreen.prototype.getScreen = function () {
return this.screen;
};
//...
var mainScreen = new MainScreen(app.mainWindow());
mainScreen.tapAddButton();
You are correct that you cannot assign anything to this. You could also define the methods inside the constructor MainScreen, but they would be considered privileged members.
function MainScreen(actualScreen){
this.screen = actualScreen;
this.tapAddButton = function () {
this.screen.getAddButton().tap();
};
}
If you dont want them to be privileged members, it is better to define them outside the constructor. Otherwise, the members will be initialized over and over again everytime when you instantiate a new object.
Updated:
You could also wrappers for the methods of screen inside the constructor as below.
var prop;
for (prop in actualScreen) {
if (typeof actualScreen[prop] !== 'Function') {
continue;
}
this[prop] = function () {
return actualScreen[prop].apply(actualScreen, arguments);
};
}

Get object class from string name in javascript

I would like to get an object from its name in Javascript.
I'm working on an application which will need to load up some different context, I'm trying so to load different classes with the "inherit" jquery plugin. Everything works just fine, excepts that, when I need to instanciate a class I can't because I've only the name of the class and not the object directly.
Basically, I would like to find something like 'getClass(String name)'. Does anyone could help me ?

Don't use eval().
You could store your classes in a map:
var classes = {
A: <object here>,
B: <object here>,
...
};
and then just look them up:
new classes[name]()

JavaScript: Call Function based on String:
function foo() { }
this["foo"]();

You can perfectly use eval() without a security risk:
var _cls_ = {}; // serves as a cache, speed up later lookups
function getClass(name){
if (!_cls_[name]) {
// cache is not ready, fill it up
if (name.match(/^[a-zA-Z0-9_]+$/)) {
// proceed only if the name is a single word string
_cls_[name] = eval(name);
} else {
// arbitrary code is detected
throw new Error("Who let the dogs out?");
}
}
return _cls_[name];
}
// Usage
var x = new getClass('Hello')() // throws exception if no 'Hello' class can be found
Pros: You don't have to manually manage a map object.
Cons: None. With a proper regex, no one can run arbitrary code.

Do you mean this?
function Person(name){
this.name = name;
}
function getClass(str_name, args){
return new (window[str_name])(args);
}
var wong2 = getClass("Person", "wong2");
alert(wong2.name); // wong2