Object.create vs new

Question

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 = [];
    }
}

`Object.create` expects a prototype that is, an object. `Calculator` isn't only a constructor but also a function object. So you merely pass a function object to `Object.create`, which isn't invoked. — , Jul 29 '16 at 17:48
@LUH3417 Damn! I just invoked the function inside the Object.create and it works. — Yasin Yaqoobi, Jul 29 '16 at 17:52
Um, It shouldn't work, because `Calculator` doesn't return anything. Please show the invocation. — , Jul 29 '16 at 17:55
You are right. I think the page didn't get refreshed properly. Tried again and it is not working or maybe you jinxed it. — Yasin Yaqoobi, Jul 29 '16 at 17:59
Ok so if I explicitly return this in my constructor. Invoking it directly in Object.create works. WTF !!! More confusion. — Yasin Yaqoobi, Jul 29 '16 at 18:00
If you're in strict mode `Calculator` would just return `undefined` (or the window object in normal mode). You just can't use `Object.create` with constructors. Look into [MDN](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/create) for more information. — , Jul 29 '16 at 18:02
Thank you. I get your point. I thought "this" is implicit returned in object.create as well but it is only for the constructor. This definitely guided me to the right direction. I think. — Yasin Yaqoobi, Jul 29 '16 at 18:05

score 3 · Accepted Answer · answered Aug 02 '16 at 14:09

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}

Thank you. Your answer to my previous question was the key to all of this. — Yasin Yaqoobi, Aug 02 '16 at 18:37

score 2 · Answer 2 · answered Feb 26 '17 at 02:51

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");

score 0 · Answer 3 · answered Jan 02 '17 at 02:18

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 }

Object.create vs new

3 Answers3