通过变量重新初始化javascript函数对象

Question

This one is something that is fairly easy to do in PHP and I find my self in a situation where it would come in handy, but I do not believe the PHP trick will work.

Basically I want to use a variable passed from a function within an object to then reinitialize that object using the child (defined by the variable).

var View = function(){
    var fn = this;

    fn.load = function(name){
        return new name();
    }
}
var view = View.load('titleView');

This is a very early work on it, so forgive the fact that it looks so strange (still need to tinker more with the concept). But overall it should roughly show the concept.

Is there a way to basically recreate the current functions instance with a new function? To do this in the aspect I am thinking of I will need to use a variable rather then pass the new object. Is this possible? I am sure in some form it has to be. Any ideas/pointers? Google has been failing me since I am not sure of the right keywords for this.

EDIT: should also show the idea behind the "titleView" class

var titleView = function(){}

titleView.prototype = new View;

Answer 1

I think the easiest way to do this is via some kind of factory that can produce the types of views you are wanting. Something like this:

var View = (function() {
    var registry = {};

    return {
        register: function(type, fn) {
            if (typeof registry[type] === 'undefined') {
                registry[type] = fn;
                return true;
            }
            return false;
        },

        load: function(type) {
            return new registry[type]();
        }
    };
})();

var titleView = function() {
    this.name = 'titleView';
};
var subTitleView = function() {
    this.name = 'subTitleView';
}

View.register('titleView', titleView);
View.register('subTitleView', subTitleView);

var view = View.load('titleView');
console.log("Created view type: " + view.name);

view = View.load('subTitleView');
console.log("Created view type: " + view.name);

This would give the following ( allowing you to recreate view variable on the fly ):

// Created view type: titleView
// Created view type: subTitleView

If you try to do it the way your example is going, you'll have to use subclasses like so:

function Base() {
    this.name = "Base";
    this.load = function(fn) {
        fn.apply(this);
    }
}
function Other() {
    Base.apply(this, arguments);
    this.name = "Other";
}

var view = new Base();
console.log(view);

view.load(Other);
console.log(view);

// => Base { name: "Base", load: function }
// => Base { name: "Other", load: function }

However, with this method, after calling view.load(Other) , your view will still retain whatever properties/methods it had prior to calling load ( which may not be what you want ).

Answer 2

think this is what ur asking

var View = function(){
  this.load = function(name){
  return  name;
  }
}
var myView = new View;
var v = myView.load('titleView');
alert(v);