理解Javascript中的类和继承 - 新模式

Question

I'm designing an OOP inheritance pattern for many applications I'm building. Javascript has many ways of doing this, but I stumbled on a pattern I really like. But now I'm struggling with the need for a separation of classes and instances.

I have a base object called Root. And it has a main method called inherit. To create a new object you use

var Person = Root.inherit({
    name : "",
    height : 0,
    walk : function() {},
    talk : function() {}
});

Then to create an "instance" you would

var sally = Person.inherit({
    name : "sally",
    height : "5'6"
});

sally can .talk() and she can walk() and she has a .name and a .height You can make more people the same way.

If you want a constructor you use

var Person = Root.inherit({
    _construct : function() {
        // do things when this object is inherited from
    },
    name : "",
    height : 0,
    walk : function() {},
    talk : function() {}
});

It also has the ability to have init, when the object is first defined in code (singletons use this)

var Person = Root.inherit({
    _init : function() {
        // called at runtime, NOT called if an object is inherited from me
    },
    name : "",
    height : 0,
    walk : function() {},
    talk : function() {}
});

So as you can see, everything uses .inhert(). There are no classes and no instances really. Everything is an instance of something. The only real problem I found so far is that there is no concept of "type", but you can always just check for a method if you need to. Also you can't protect a 'class', as a 'class' can be changed during execution if the developer accidentally changed it, or meant to change it.

So my question is: Is there a need in javascript to have an explicitly and controlled separation of class structure and instances of the class? Are there any issues with treating every object as an instance?

Answer 1

No there's no need since Javascript is a Prototypal based language, meaning that classes are not involved. You are just creating clones of the objects.

http://en.wikipedia.org/wiki/Prototype-based_programming

As far as the concept of type, the type is object.

A good read for more info about this would be Javascript Patterns by Stoyan Stefanov he has several different creational patterns that address your concerns, including examples that implement Design Patterns from the gang of four's design patterns. http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752

Answer 2

So my question is: Is there a need in javascript to have an explicitly and controlled separation of class structure and instances of the class? Are there any issues with treating every object as an instance?

Not really, if you're happy with it, it's fine.

The more normal form of JavaScript inheritance does much the same thing. You'll frequently see structures like this ( severely cut down for brevity) :

function Base() {
}
Base.prototype.foo = function() {
};

function Derived() {
}
Derived.prototype = new Base();

...and of course, new Base() is also how you create instances of Base . So your system is quite similar.

Again, the above is a sketch , not a full example. For one thing, usually you'd see construction and initialization separated out, so you don't literally see Derived.prototype = new Base() so much as something that creates an object with Base 's prototype but without actually calling Base (which Derived would do later), but you get the idea. Granted that statement somewhat weakens the similarity with your system, but I don't think it breaks it at all.

At the end of the day, it's all about objects (instances), which are either used directly (your sally ) or indirectly by providing features to other objects ( Person , Root ) by cloning or by setting them up as the prototype of the other object.

Answer 3

Javascript's inheritance is prototypical which means everything object is an instance. You actually have to do extra work to get the classical inheritance.

Answer 4

This is how I work in javascript

// this is class
function person(){

    // data is member variable 
     this.name = null;
     this.id = null;

    //member functions 
     this.set_name = _set_name;
     this.get_name = _get_name;
     this.set_id = _set_id;
     this.get_id = _get_id;

 function _set_name(name){
    this.name = name;
 } 

 function _get_name(name){
    return this.name;
 }

     function _set_id(id){
    this.id = id;
 } 

 function _get_id(id){
    return this.id;
 }
}

// this is instance
var yogs = new person();

    yogs.set_id(13);
    yogs.set_name("yogs");

hope it may help

Answer 5

Start with some basic object...

// javascript prototypes - callback example - javascript objects

function myDummyObject () {
    that = this;
} // end function myDummyObject ()

// begin dummy object's prototype
myDummyObject.prototype = {
    that : this,

    // add a simple command to our dummy object and load it with a callback entry
    say : function () {
        var that = this;

        console.log('speaking:');
        that.cb.run("doSay");
    }
} // end myDummyObject proto        

extend with a sub prototype..

// here we addon the callback handler... universally self sufficient object
var cb = {
    that : this, // come to papa ( a link to parent object [ myDummyObject ] )

    jCallback : new Array(new Array()),     // initialize a javascript 2d array 
    jCallbackID : -1,                       // stores the last callback id

    add: function(targetFnc, newFunc) {
        var that = this;
        var whichID = that.jCallbackID++;

        // target, addon, active
        that.jCallback[that.jCallback.length] =  { 'targetFunc' : targetFnc,  'newFunc' : newFunc,  'active' : true, 'id': whichID };

        return whichID; // if we want to delete this later...      
    }, // end add

    run: function(targetFnc) {
        var that = this;

        for(i=0;i <= that.jCallback.length - 1;i++) // go through callback list
            if( that.jCallback[i]['targetFunc'] == targetFnc  && that.jCallback[i]['active'] == true )
                that.jCallback[i]['newFunc'](); // run callback.
    }, // end run

    remove: function (whichID) {
        var that = this;
        console.log('removing:' + whichID); 

        for(i=0;i <= that.jCallback.length - 1;i++) // go through callback list
            if( that.jCallback[i]['id'] == whichID  )
                that.jCallback[i]['newFunc'](); // run callback.
    } // end remove
}                                                               

// add the object to the dummy object...
myDummyObject.prototype.cb = cb;

Example:

var testing = new myDummyObject();

testing.cb.add('doSay', function () { console.log('test: 213123123'); } );

// test remove...
var testid = testing.cb.add('doSay', function () { console.log('test: 12sad31'); } );
testing.cb.remove(testid);

testing.cb.add('doSay', function () { console.log('test: asdascccc'); } );
testing.cb.add('doSay', function () { console.log('test: qweqwe'); } );
testing.cb.add('doSay', function () { console.log('test: d121d21'); } );
testing.cb.add('doSay', function () { console.log('test: wwww'); } );


testing.say();

Answer 6

This always seemed the easiest for me to understand... Just create a new instance of the inherited class and then loop through its variables and methods and add them to the main one.

var myPerson = new Person()

var myPerson.firstName = 'john';
var myPerson.lastName = 'smith';
var myPerson.jobTitle = 'Programmer';    

var Person = function(){

    //Use this to inherit classes 
    this._extendedClass = new Person_Job();
    for(var i in this._extendedClass){
        this[i] = this._extendedClass[i];
    }
    delete this._extendedClass;

    this.firstName = '';
    this.lastName = '';
}

var Person_Job = function() {

    this.jobTitle = '';

}