Qual è la differenza tra this.function e prototype.function?

Question

Data l'ereditarietà JS semplice, qual è la differenza pratica nella funzione di base tra questi due esempi? In altre parole, quando una persona dovrebbe scegliere di definire una funzione su "questo" anziché sul prototipo (o viceversa)?

Per me il secondo esempio è più semplice da digerire, ma quanto c'è di più in questo?

funzione definita su questo:

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

funzione definita prototipo:

//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

Funzioni sul prototipo vengono creati una sola volta e condivisi tra ogni istanza. Le funzioni create nel costruttore sono create come nuovi oggetti per ogni nuovo oggetto creato con il costruttore.

Come regola generale, le funzioni dovrebbero essere sul prototipo poiché generalmente non verranno modificate per oggetti diversi dello stesso tipo e questo ha un leggero vantaggio in termini di memoria/prestazioni. Altre proprietà come oggetti e matrici dovrebbero essere definite nel costruttore, a meno che non si voglia creare una proprietà statica condivisa, nel qual caso si dovrebbe usare il prototipo.

La sua più facile vedere le distinzioni con oggetti o array normali piuttosto che funzioni

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

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

in contrapposizione a:

function Foo(){ 
} 

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

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