Object.create vs new

Question

次のコードは、コンストラクタでオブジェクトを作成するときに機能しますが、object.Createを実行すると正しく初期化されません。 functionName is not a function。私には2つの質問があります。 object.createが動作しないのはなぜですか？

同じCalculator関数内でコードを整理すると、newとobject.createの両方を使用できますか？

私はCalculator.prototypeにメソッドを追加してObject.createを行うことができますが、私のコードを両方のために現在の構造内で変更できるかどうか疑問に思っていましたか？

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

Answer 1

Object.createのコンストラクタ呼び出しはありません。

さまざまな方法で同様の結果が得られます。これらの線に沿って何かがあなたを助けている場合を参照してください：

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} 

Answer 2

少し遅れて、あなたは気づいたが、あなたの実装theresの中で、これはObject.prototype.constructorの代わりにポイントするコードCalculator.prototype.constructorに少なくとも一つの副作用でいることも電卓コンストラクタ、何をやっていることはプロトタイプチェーンのすべてのプロパティを上書きされ、あなたが望むものを新しいプロパティCalculator.prototype.method =() => { // some code }

Answer 3

Object.create() //This for inherit the parent object 

を追加するには、ドット表記を使用することがベストプラクティスであるオブジェクトをインスタンス化することです、あなたは次のようにそれを行うことができますthis：

var calc = new Calculator() //This will inherit it's prototype and execute the constructor for you. 

ない反対側の新しい側で動作します Object.create。ちょうどそれプロトタイプ継承についてより明確にし、インスタンス化し、背中のステップを取るようにする、私は例をご提供します：

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

上記の例はあまりにも冗長ですか？ （ここではES2015を参考にしてください）、これはノードv6以上にしか適用できないことに注意してください。

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