Search code examples
javascriptprototypejavascript-objectsjavascript-inheritance

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

Solution

  • 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}