Inheritance With Knockout.js

I have some code like this: var A = function(a,b,c) { var self = this; self.a = ko.observable(a); ... self.function1 = ko.computed(function () { dothing(a);

Solution 1:

That's just where prototypes fit in:

functionAB()
{};//empty objectAB.prototype.function1 = function()
{
    var self = this;//doesn't have access to self, but `this` will point to either A or B//do stuff
};
var A = function()
{
    var self = this;//constructor
}
var B = function()
{
    var self = this;//constructor
}
A.prototype = newAB;
A.prototype.constructor = A;
B.prototype = newAB;
B.prototype.constructor = B;
//marginally shorter:
A.prototype = B.prototype = newAB;
A.prototype.constructor = A;
B.prototype.constructor = B;
//instances:var foo = newA();
var bar = newB();
console.log(foo.function1 === bar.function1);//logs true

Having said that, personally, I prefer to define my constructors regularly:

functionA()
{
    var self = this;
}
foo = newA();
console.log(Object.getPrototypeOf(foo).constructor.name);//logs A

Whereas your code assigns an anonymous function to a variable, which means that the constructor doesn't have a name:

foo = newA();
console.log(Object.getPrototypeOf(foo).constructor.name);//logs ''

It's not that big of a deal, but just so you know...

---

Reference a method from the global (or any other) scope:

var virtualNewFunction = new A();//create object
virtualNewFunction = virtualNewFunction.function1;//virtualNewFunction now references function1
virtualNewFunction();

The closure will be accessible (exposed), still, but be very careful with this:

A = function()
{
    var self = this;
    this.function1 = function()
    {
        console.log(this);
        console.log(self);
    };
}
foo = newA();
foo.function1();//logs A twice
foo = foo.function1foo();//logs this -> window! self => A

An other possibility is "borrowing" a function:

A = function()
{
    var self = this;
    this.function1 = function()
    {
        console.log(this);
        console.log(self);
    };
}
B = function()
{//no methodvar self = this;
}
foo = newA();
bar = newB();
foo.function1.apply(bar,[]);//call as though function1 was method of B

Again, be careful: in this case this logs B, but self still references A! You could build in certain "safety nets":

this.function1 = function()
    {
        self = this !== window && this !== self ? this : self;//redefine self to current caller object, unless it's window console.log(this);
        console.log(self);
    };

But honestly, you might do well reading up on the this operator to grasp all this referencing trickery. It's not that hard once you get the basics. Also check the call and apply methods for more details on how to "share/borrow" methods

Solution 2:

You could change the scope of the function by pulling it out of that object.

var function1 = function() {

}

var function2 = function() {

}

var A = function(a,b,c) {
  varself = this;
  self.a = ko.observable(a);
  ... 


  self.function1 = ko.computed(function1)

  self.function2 = ko.computed(function2)
}

Solution 3:

You could try using the underscore.js extend functionality to do the inheritance.

Solution 4:

var AB=function(){
    self=this;
    self.function1=function(){
                   //----something------
                  }
    self.function1=function(){
                   //----something------
                  }

   }


     var A=function(){
     varself=this;
     AB.apply(self,arguments);
     } 

    var B=function(){
     varself=this;
     AB.apply(self,arguments);
        }