Geek asks and answers

Understanding Classes and Inheritance in Javascript - New Template

I am developing an OOP inheritance pattern for many of the applications that I create. Javascript has many ways to do this, but I came across a sample that I really like. But now I'm struggling with the need to separate classes and instances.

I have a basic Root object. 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 .name and .height You can make more people the same.

If you want to use the 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 (use one-dot)

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() {}
});

, , .inhert(). . - . , , , "", , . "", "" , .

, : javascript ? - ?

+3
6

, : javascript ? - ?

, , .

JavaScript . ( ):

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

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

... , , new Base() , Base. , .

, , . -, , Derived.prototype = new Base() , -, Base prototype, Base ( Derived ), . , , , .

(), ( sally), , (Person, Root) .

+2

Javascript , , . , .

+1

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 this helps

+1
source

Start with the base object ...

// javascript prototypes - callback example - javascript objects

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

// begin dummy object 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

expandable with the prototype sub.

// 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();
0
source

It always seemed to me the easiest to understand ... Just create a new instance of the inherited class, and then execute 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 = '';

}
0
source

More articles:


All Articles