Was ist der Unterschied zwischen this.function und protot.function?

Question

Angesichts einfacher JS-Vererbung, was ist der praktische Unterschied in der Basisfunktion zwischen diesen beiden Beispielen? Mit anderen Worten, wann sollte eine Person entscheiden, eine Funktion auf "diesem" statt auf dem Prototyp (oder umgekehrt) zu definieren?

Für mich ist das zweite Beispiel leichter zu verdauen, aber wie viel mehr gibt es dazu?

Funktion folgt definiert:

//base 
var _base = function() { 
    this.baseFunction = function() { 
     console.log("Hello from base function"); 
    } 
}; 
//inherit from base 
function _ctor() { 
    this.property1 = "my property value"; 
}; 
_ctor.prototype = new _base(); 
_ctor.prototype.constructor = _ctor; 
//get an instance 
var instance = new _ctor(); 
console.log(instance.baseFunction); 

Funktion Prototyp definiert:

//base 
var _base = function() {}; 
_base.prototype.baseFunction = function() { 
    console.log("Hello from base function"); 
} 
//inherit from base 
function _ctor() { 
    this.property1 = "my property value"; 
}; 
_ctor.prototype = new _base(); 
_ctor.prototype.constructor = _ctor; 
//get an instance 
var instance = new _ctor(); 
console.log(instance.baseFunction); 

Answer 1

Funktionen auf dem Prototyp werden nur einmal erstellt und zwischen jeweils geteilt. Im Konstruktor erstellte Funktionen werden als neue Objekte für jedes neue Objekt erstellt, das mit dem Konstruktor erstellt wurde.

Als allgemeine Regel sollten Funktionen auf dem Prototyp sein, da sie im Allgemeinen nicht für verschiedene Objekte des gleichen Typs modifiziert werden, und dies hat einen leichten Speicher-/Leistungsvorteil. Andere Eigenschaften wie Objekte und Arrays sollten im Konstruktor definiert werden, es sei denn, Sie möchten eine gemeinsame statische Eigenschaft erstellen. In diesem Fall sollten Sie den Prototyp verwenden.

Sein leichter, die Unterschiede mit normalen Objekten oder Arrays zu sehen anstatt Funktionen

function Foo(){ 
    this.bar = []; 
} 
var fooObj1 = new Foo(); 
var fooObj2 = new Foo(); 

fooObj1.bar.push("x"); 
alert(fooObj2.bar) //[] 

im Gegensatz zu:

function Foo(){ 
} 

Foo.prototype.bar = [] 
var fooObj1 = new Foo(); 
var fooObj2 = new Foo(); 

fooObj1.bar.push("x"); 
alert(fooObj2.bar) //["x"]