We Keep Coding

Constructor property of an object

I came across this example while reading the prototype.
function Animal(){
this.name = 'Animal'
}
var animal1 = new Animal();
function Rabbit(){
this.canEat = true;
}
Rabbit.prototype = new Animal();
var r = new Rabbit();
console.log(r.constructor)
And the console is giving me Animal as the output for r.constructor, which is a little confusing as the constructor property should have returned Rabbit as r is created by invoking Rabbit with the new operator.
Also, if I invoke the Rabbit function before assigning the prototype it gives me the desired result.

Objects inherit constructor from their prototype (typically); they get their prototype from the prototype property of the constructor function that creates them when they're created (if they're created by a constructor function). Rabbit.prototype's constructor is incorrect, because of this:
Rabbit.prototype = new Animal();
That calls Animal to create a new instance, and assigns that instance as Rabbit.prototype. So its constructor, inherited from Animal.prototype, is Animal. You've replaced the default object that used to be on Rabbit.prototype (which had constructor set to Rabbit).
In general, that Rabbit.prototype = new Animal() is not the best way to set up inheritance. Instead, you do it like this:
Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;
and then in Rabbit:
function Rabbit() {
Animal.call(this); // ***
this.name = "Rabbit"; // Presumably we want to change Animal's deafult
this.canEat = true;
}
Three changes there:
We don't call Animal when setting up the inheritance, we just create a new object that uses Animal.prototype as its prototype, and put that on Rabbit.prototype.
We set constructor on the new object we've assigned to Rabbit.prototype.
We do call Animal when initializing the instance (in Rabbit).
Live Example:
function Animal(){
this.name = 'Animal'
}
var animal1 = new Animal();
function Rabbit() {
Animal.call(this); // ***
this.name = "Rabbit"; // Presumably we want to change Animal's deafult
this.canEat = true;
}
Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;
var r = new Rabbit();
console.log(r.constructor);
Or, of course, use ES2015+ class syntax, which handles this plumbing for you (along with a few other benefits).
class Animal {
constructor() {
this.name = "Animal";
}
}
class Rabbit extends Animal {
constructor() {
super();
this.name = "Rabbit";
this.canEat = true;
}
}
const r = new Rabbit();
console.log(r.constructor);

Javascript set base object when declare methods in prototype

I read that declaring object methods in prototype is good approach because it saves memory and allows to change implementation in any time for all objects.
But what i need to do when i need to set base object for object that uses prototype method declaration?
Example:
function Animal() {
this.age = 0;
this.weight = 0;
//other properties
}
Animal.prototype = {
//some methods for Animal
}
function Dog() {
//properties for Dog
}
Dog.prototype = {
//some methods for Dog
}
So, how can i set Animal as a base class(object) for Dog(because prototype property in Dog is implemented as custom object for methods)?

ES5 version (still most common, but I wouldn't recommend it - see ES6 version)
Based on this post here you need to use Object.create like this:
function Animal() {}
Animal.prototype = {};
function Dog() {}
Dog.prototype = Object.create( Animal.prototype );
Also see this solution with Object.assign (sadly IE doesn't support it)
ES6 version
class Animal {
// all your methods come in here. No more prototype needed.
}
class Dog extends Animal {
}
You can already use ES6 even though most browsers don't completely support it yet. Use babel to transpile you JS.

You could define Animal as a function and use its constructor to set an instance of it in the Dog prototype :
Dog.prototype = new Animal();
More complete code :
var Animal = function () {
this.age = 0;
this.weight = 0;
this.age = function () {
return this.age;
}
// define other methods ...
// ...
return this;
};
var Dog = function () {
// overriding the age
this.age= 10;
// define or override methods ...
// ...
return this;
};
// Dog extends animal
Dog.prototype = new Animal();
// Creating an instance of Dog.
var dog = new Dog();

How to set the constructor of an Object without changing to a new Object?

In this related question, the answer for setting a constructor is like so:
function OldClass() {
alert("old class with incomplete constructor")
}
function ChangedClass(){
alert('new class with same prototype and more complete constructor');
}
ChangedClass.prototype = OldClass.prototype;
var theClassIWant = new ChangedClass();
This is not really setting the constructor, it's making a new object and inheriting the prototype. How can I set the constructor of an Object without changing to a new Object? Is it possible?
P.S. I want something like this:
//non working code
var Foo = function() {}
Foo.prototype.constructor = function(bar_val) {
this.bar = bar_val;
}
var fez = new Foo("cat")
console.log(fez.bar); // outputs: cat;

constructor is a property of the constructor function's prototype, which points to the function itself by default.
When you modify Foo.prototype.constructor, this property points to another function. However, the constructor function Foo remains. So when you create an object, you are still instantiate the constructor function Foo, not the one Foo.prototype.constructor points to.
This is why your code doesn't work. Then let's talk why we need to change the constructor and how to.
In ES5 and before, we take advantage of prototype to simulate a class inheritance mechanism. Which looks like this:
// parent class
function Person(name) {
this.name = name
}
// define parent method
Person.prototype.say = function() {
console.log(this.name)
}
// child class
function Coder(name, major) {
Person.call(this, name) // inherits parent properties
this.job = 'Coding'
this.major = major
}
// inherits properties and methods from parent prototype
Coder.prototype = new Person()
// define child method
Coder.prototype.work = function() {
console.log('I write ' + this.major)
}
// instantiate a child object
var me = new Coder('Leo', 'JavaScript')
console.log(me) // {name: "Leo", job: "Coding", major: "JavaScript"}
Everything looks perfect, but there a problem:
console.log(me.constructor) // Person
What? Isn't me constructed with Coder? Why?
Go back to the first line of this answer, read it again: constructor is a property of the constructor function's prototype.
Originally Coder.prototype.constructor is Coder itself. But with this line: Coder.prototype = new Person(), it got changed. Coder.prototype.constructor now equals Person.prototype.constructor, which is Person.
Well, some would say, try instanceof. Yes, that works:
me instanceof Coder // true
But it's also true for Person, because Coder is a sub class of it:
me instanceof Person // true
This doesn't make sense so we need to fix the constructor problem. That's why we use Coder.prototype.constructor = Coder after Coder.prototype = new Person(), to get back the original constructor.
Full code looks like this:
// parent class
function Person(name) {
this.name = name
}
Person.prototype.say = function() {
console.log(this.name)
}
// child class
function Coder(name, major) {
Person.call(this, name) // inherits parent class
this.job = 'Coding'
this.major = major
}
Coder.prototype = new Person() // inherits parent's prototype
Coder.prototype.constructor = Coder // get back constructor
Coder.prototype.work = function() {
console.log('I write ' + this.major)
}

myClass = {
constructor: function(text){
console.log(text);
}
}
let ob = Object.create(myClass);
ob.constructor("old constructor "); //Output: old constructor
myClass.constructor = function(){
console.log("new constructor ")
}
ob.constructor(); //Output: new constructor
You can do this with every property or function of a class.
Watch this Video here. It explains it perfectly.

Object.create vs new

The following code works when I create my object with the constructor but when I do object.Create it doesn't get initialized properly. functionName is not a function. I have two questions. Why isn't the object.create working ?
How would I organize my code within the same Calculator Function so I could use both new and object.create ?
I know I can add the methods to Calculator.prototype and do Object.create but I was wondering if my code can be changed within the current structure to allow for both ?
//var calc = new Calculator();
var calc = Object.create(Calculator);
function Calculator(){
this.array = [];
this.results = 0;
this.calculate = function(){
try{
results = eval(this.array.join(''));
this.array = [results];
return results;
}
catch(error){
alert('Wrong arguments provided');
return this.array.join('');
}
},
this.isNumber = function(str){
return !isNaN(parseFloat(str)) && isFinite(str);
},
this.addToOperationsArray = function(str){
if (this.array.length <= 0 && !this.isNumber(str)){ // Don't add operand before any number.
return;
}
this.array.push(str);
},
this.clearEverything = function(){
this.array = [];
}
}

There is no constructor invocation with Object.create.
You can get similar results in a multitude of ways. See if something along these lines helps you:
function Calculator() {
this.array = [];
this.results = 0;
}
Calculator.prototype = {
calculate: function() {
try {
results = eval(this.array.join(''));
this.array = [results];
return results;
} catch (error) {
alert('Wrong arguments provided');
return this.array.join('');
}
},
isNumber: function(str) {
return !isNaN(parseFloat(str)) && isFinite(str);
},
addToOperationsArray: function(str) {
if (this.array.length <= 0 && !this.isNumber(str)) { // Don't add operand before any number.
return;
}
this.array.push(str);
},
clearEverything: function() {
this.array = [];
}
};
// create using 'new'
var calc1 = new Calculator();
// create using 'Object.create'
// the constructor function is not called
// but properties of returned object can be passed to the function, and
// you can control the enumerable, writable, configurable properties
var calc2 = Object.create(Calculator.prototype, {
'array': {
value: [],
enumerable: true
},
'results': {
value: 0,
enumerable: true
}
});
// create using 'Object.create'
// and invoke the constructor with 'call',
// explicitly setting 'this'
var calc3 = Object.create(Calculator.prototype);
Calculator.call(calc3);
console.log(calc1); // Calculator {array: Array[0], results: 0}
console.log(calc2); // Object {array: Array[0], results: 0}
console.log(calc3); // Object {array: Array[0], results: 0}

Object.create() //This for inherit the parent object
what you want is to instantiate the object, you can do it like this:
var calc = new Calculator() //This will inherit it's prototype and execute the constructor for you.
Object.create works with new side by side not against. Just to make it more clear about prototype inheritance and instantiate, let's take step back, I'll provide you with example:
// CREATE || Object.create for inheritence by prototyping
var Thing = function (name) {
this.type = "universal";
this.name = name;
}
Thing.prototype = {
say: function(something) {
console.log(this.name + " say something " + something);
},
check_soul: function (){
console.log(this.name + " soul is " + this.type);
}
}
// constructor for God
var God = function(name){
Thing.call(this, name); // Execute parent constructor also with current context
this.type = "pure"; // overwrite the type
}
God.prototype = Object.create(Thing.prototype); // inherit God from Thing
God.prototype.constructor = God; // implement the constructor
// constructor for Demon
var Demon = function(name){
Thing.call(this, name);
this.type = "corrupted";
}
Demon.prototype = Object.create(Thing.prototype, {
say: {
value: function(something){ // Overwrite Thing prototype for say
console.info(this.name + " say: Let's destory " + something + "!");
}}
}); // inherit Demon from Thing
Demon.prototype.constructor = Demon;
/////////////////////////////////////////////////////////////////////////////////////
// NEW || new for instantiation
var anonymous = new Thing("Anonymous");
anonymous.check_soul();
var god = new God("Zeus");
god.check_soul();
god.say("omni");
var demon = new Demon("Lucifer");
demon.check_soul();
demon.say("human");
Example above is too verbose? (ES2015 here to help) note that this can only apply on node v6 and above.
// CREATE || Object.create for inheritence by prototyping
'use strict';
class Thing {
constructor (name){
this.type = "universal";
this.name = name;
}
say(something) {
console.log(this.name + " say something " + something);
}
check_soul() {
console.log(this.name + " soul is " + this.type);
}
}
class God extends Thing { // inherit God from Thing and implement the constructor
constructor (name){
super(name); // Execute parent constructor also with current context
this.type = "pure"; // overwrite the type
}
}
class Demon extends Thing { // inherit Demon from Thing and implement the constructor
constructor (name){
super(name); // Execute parent constructor also with current context
this.type = "corrupted"; // overwrite the type
}
say(something) { // Overwrite Thing prototype for say
console.info(this.name + " say: Let's destory " + something + "!");
}
}
/////////////////////////////////////////////////////////////////////////////////////
// NEW || new for instantiation
var anonymous = new Thing("Anonymous");
anonymous.check_soul();
var god = new God("Zeus");
god.check_soul();
god.say("omni");
var demon = new Demon("Lucifer");
demon.check_soul();
demon.say("human");

a little bit late, may be you have noticed, but in your implementation theres is at least one side effect in the code Calculator.prototype.constructor this will point to Object.prototype.constructor instead of the Calculator constructor, what are you doing is overwriting every property of the prototype chain, it is best practice to use dot notation to add new properties Calculator.prototype.method = () => { // some code }

Purpose of property copying to inheriting type

While playing around with the online TypeScript compiler, I've noticed that the creators chose to implement inheritance with the help of the following method (which I have made somewhat more readable):
var __extends = function(type, base) {
for (var prop in base) { // why copy the properties?
if (base.hasOwnProperty(prop)) {
type[prop] = base[prop];
}
}
function __() { // <- ?
this.constructor = type;
}
__.prototype = base.prototype.
type.prototype = new __();
};
The method is then used in the following manner:
var Item = (function () {
function Item() {
}
return Item;
})();
var Sword = (function (base) {
__extends (Sword, base);
function Sword() {
base.call(this);
}
return Sword;
})(Item);
I have a hard time understandind the implementation of the __extends method.
What is the purpose of manually copying all the properties from the extending type? Won't inheriting the prototype take care of that?
Is there a performance penalty when searching for properties in the prototype tree as opposed to directly copied properties?
The second part I also can't understand the purpose of. Instead of doing this:
function __() {
this.constructor = type;
}
__.prototype = base.prototype.
type.prototype = new __();
Couldn't this simply be implemented as:
type.prototype = base.prototype;

Great question. Let's break this down.
var __extends = function(type, base) {
// ** Begin static-side inheritance **
for (var prop in base) {
if (base.hasOwnProperty(prop)) {
type[prop] = base[prop];
}
}
// ** End static-side inheritance **
// ** Begin Object.create polyfill **
function __() { // <- ?
this.constructor = type;
}
__.prototype = base.prototype.
// ** End Object.create polyfill **
// ** Prototype setup **
type.prototype = new __();
};
First up is the static-side inheritance. TypeScript's type system enforces that if some type has a static method, a derived class also has that method (or a method whose signature is a subtype of the base class method). This is useful for things like factory patterns, e.g.:
class Car {
static create(name: string, topSpeed: number): Car {
// ...
return new this(/* ... */);
}
}
class RaceCar extends Car {
// RaceCar ignores topSpeed because it goes super fast
static create(name: string): RaceCar {
// ...
return new this(/* ... */);
}
}
class Truck extends Car {
}
function makeTestCar(t: typeof Car) {
return t.create('test', 60);
}
var car = makeTestCar(Car); // returns an instance of Car
var raceCar = makeTestCar(RaceCar); // returns an instance of RaceCar
var truck = makeTestCar(Truck); // OK, even though Truck doesn't explicitly implement 'create'
Note that in the last line, the Truck class got its create method via its base class Car. The copying is needed because Truck.__proto__ is not Car.
Next up we have the Object.create polyfill. It's not sufficient to write type.prototype = base.prototype because the __proto__ (AKA [[proto]]) and prototype members are not the same thing. Other answers on SO have given a better rundown of prototypal inheritance so I'll defer to those.
Finally the last line sets up the prototype of the constructor so that the created object has the correct __proto__

Extends copies prototype and static members (shallow copy). Statics are Parent.things and prototypes are Parent.prototype.things The way the prototype.things are copied is how the poly fill for Object create works.
var __extends = this.__extends || function (d, b) {
//Copies Item.things to Sword.things
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
//Copies Item.prototype.things to Sword.prototype.things
//this is a polyfill for Object.create
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var Sword = (function (_super) {
__extends(Sword, _super);
function Sword() {
_super.apply(this, arguments);
}
return Sword;
})(Iten);
Consider the following Typescript:
class Item {
public static DAMAGE = 0;
};
In JavaScript this will be:
var Item = (function () {
function Item() {
}
Item.DAMAGE = 0;
return Item;
})();
How would I use static DAMAGE? See the following example (simplefied JS);
//Using static to make general getters and setters
var Item = function(damage){
this._data = [];
this.set(Item.DAMAGE,damage)
};
Item.DAMAGE=0;
Item.prototype.get=function(dataIndex){
return this._data[dataIndex];
};
Item.prototype.set=function(dataIndex,val){
//maybe execute Item.rules[dataIndex].set(val) for validating value
this._data[dataIndex] = val;
return val;
};
var i = new Item(22);
//I could get damage using i.get(0)
//but the following reads more easily
i.get(Itesm.DAMAGE);
Introduction about constructor functions, prototype, inheritance, mix ins and the this value here: https://stackoverflow.com/a/16063711/1641941