Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Assigning prototype inside constructor

Tags:

javascript

I have this code:

var MyClass = function(b) {
    this.a = b;
    this.getA = function() {
        return that.a;
    }
}

var SecondClass = function(b) {
    this.prototype = new MyClass(b);
    this.getB = function() {
        return 6;
    }
}

var a = new SecondClass(2);
console.log(a.getA());

The output tells me that a has no method called getA()

I assumed that doing this.prototype = new MyClass() inside the constructor for SecondClass would cause it to inhert methods from MyClass?

I'm sure there are better ways to do this, but I am trying to understand the behaviour of the prototype keyword.

like image 710
user350325 Avatar asked Apr 23 '13 15:04

user350325


People also ask

How to access variables in a constructor function using a prototype?

Accessing variables in a constructor function using a prototype method with JavaScript? For this, use a “prototype”. JavaScript objects inherit properties and methods from a prototype. For accessing variables, we have also used the “this” in JavaScript. To run the above program, you need to use the following command −

What is the constructor method?

The constructor method is a special method for creating and initializing an object created within a class. The source for this interactive example is stored in a GitHub repository.

Is it possible to assign a constructor to a primitive value?

One can assign the constructor property for any value except null and undefined since those don't have a corresponding constructor function (like String, Number, Boolean etc.), but values which are primitives won't keep the change (with no exception thrown).

What does the constructor of an object return?

The constructor property returns a reference to the Object constructor function that created the instance object. Note that the value of this property is a reference to the function itself, not a string containing the function's name.


2 Answers

prototype is a special property of the constructor function, not of the instance.

When you call the constructor function with new Func(), the engine will create a new object which inherits from Func.prototype and then sets this inside the constructor function to refer to the new object.

So, aside from this.prototype just being an ordinary property, the inheritance already took place when the assignment takes place.

Since you are not assigning any methods to MyClass.prototype, you don't have to do anything with prototype inheritance here. All you have to do is apply MyClass to the newly created instance using .call [MDN]:

var SecondClass = function(b) {
    MyClass.call(this, b);
    this.getB = function() {
        return 6;
    }
};

However, you should add all methods that are shared by instances to the prototype and then let each instance of SecondClass inherit from it. This is how a complete setup could look like:

var MyClass = function(b) {
    this.a = b;
}
MyClass.prototype.getA = function() {
    return this.a;
};

var SecondClass = function(b) {
    // call parent constructor (like 'super()' in other languages)
    MyClass.call(this, b);
}
// Setup inheritance - add 'MyClass.prototype' to the prototype chain
SecondClass.prototype = Object.create(MyClass.prototype);
SecondClass.prototype.getB = function() {
    return 6;
};

var a = new SecondClass(2);
console.log(a.getA());

All of this will become easier in ES6.

like image 93
Felix Kling Avatar answered Oct 10 '22 22:10

Felix Kling


A property called "prototype" is only interesting on objects that are functions. Assigning a value to the "prototype" property in your constructor has no effect (in this case); what matters would be the "prototype" property of the constructor function itself.

SecondClass.prototype = new MyClass();

or something. The prototype object of a constructor is shared among all the instances constructed, so having the prototype vary by a constructor parameter also doesn't make a lot of sense.

Another thing you could do would be to call the "MyClass" constructor from inside "SecondClass":

function SecondClass(b) {
  MyClass.call(this, b);
  this.getB = function() {
    return 6;
  };
}

That would have the effect of making the this that's constructed in the new SecondClass() call be decorated by the "MyClass" constructor. It wouldn't really be inheritance, but you'd get a "getA" function.

like image 23
Pointy Avatar answered Oct 10 '22 23:10

Pointy