My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Friday, February 13, 2009

After the Array, subclassed String

As I wrote months ago in this documentation about JavaScript prototypal inheritance, subclass native data type is not that simple (almost not possible at all) but since JS is loads of weird bits and bops, I often try to break its documented limits.

It was the Array, some time ago, now it is about time for String.

The concept is similar, if you subclass a native data type its methods will return that native data type like instance, so concat, charAt, toString, etc etc, will return a String unless we do not override every inherited method (so performances wont be that good).

Subclassed String

(function(Function, slice, push){
// from WebReflection: Subclassed String
function String(String){
if(arguments.length) // clever constructor, accepts more than a string as argument
String.prototype = new Function;
(new String) + ""; // exception in FireFox
var join = Array.prototype.join;
String.prototype.toString = String.prototype.valueOf = function(){
return, "");
}catch(e){ // no way to retrieve the length with FireFox
String.prototype.toString = String.prototype.valueOf = function(){
for(var Array = [], i = 0; Array[i] = this[i]; i++);
return Array.join("");
(window.$ || ($ = {})).String = String; // let's put this in a namespace
})(String, Array.prototype.slice, Array.prototype.push);

That's it, every String.prototype.method should act as it has been called via native String with probably every browser.


concat, charAt, charCodeAt, toLowerCase, etc, etc will be almost the same of native strings but the constructor will be a bit slower (instances instead of regular "strings").
On the other hand, in every browser the returned instance will be an Array like String, so ...

new $.String("Here", " ", "we", " ", "are!")[0];

will be exactly the char "H" in every compatible browser.


To create a valid alternative that will NOT be an instanceof String we could use the same Stack trick:

// every browser
(function(Function, join, push){
function String(String){
String.prototype.length = 0;
String.prototype.valueOf = String.prototype.toString = function(){
return, "");
// here we can add every String prototype to the $.String prototype
(window.$ || ($ = {})).String = String;
})(String, Array.prototype.join, Array.prototype.slice, Array.prototype.push);

Have fun ;-)


Anonymous said...

I would be interested to know why one would need your solution in the first place : )

What exactly doesn't work when you subclass a String?

Also, unless I missed something, you didn't mention exactly which browsers you tested this on.

Andrea Giammarchi said...

It is just an experiment against the fact that native constructors are not simple to subclass (to be honest, it is not possible at all for different reasons).

You cannot subclass a string because IE, FireFox and others will throw an exception whatever you do with every new instance.

To avoid this problem, you have to manage toString and valueOf methods, override the length, and in the case of FireFox, find an alternative way to retrieve the length since toString with an Aray join, for example, will NOT work.

Just try to assign a stirng as prototype (or new String) and you will understand these problems ;)

Anonymous said...

is being denied by firefox!

What a pity, Mosaic Killer went rogue again.

Seems like it's about time for this old NN zombie to once again go back to its grave and finally stay there.

For good!