Czym różni się funkcja this.function i prototype.function?

Question

Zważywszy na proste dziedziczenie JS, jaka jest praktyczna różnica w funkcji podstawowej między tymi dwoma przykładami? Innymi słowy, kiedy dana osoba powinna wybrać funkcję na "tym" zamiast na prototypie (lub na odwrót)?

Dla mnie drugi przykład jest łatwiejszy do strawienia, ale o ile więcej jest do tego?

funkcja zdefiniowana w ten sposób:

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

funkcja określona na prototypie:

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

funkcji na prototypie są tworzone tylko raz i dzielone między każdej instancji. Funkcje utworzone w konstruktorze są tworzone jako nowe obiekty dla każdego nowego obiektu utworzonego za pomocą konstruktora.

Zasadniczo funkcje powinny znajdować się na prototypie, ponieważ zazwyczaj nie będą modyfikowane dla różnych obiektów tego samego typu, a to ma niewielką pamięć/wydajność. Inne właściwości, takie jak obiekty i tablice, powinny być zdefiniowane w konstruktorze, chyba że chcesz utworzyć wspólną, statyczną właściwość, w takim przypadku powinieneś użyć prototypu.

jej łatwiej zobaczyć różnice z normalnych obiektów lub tablic zamiast funkcji

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

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

w przeciwieństwie do:

function Foo(){ 
} 

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

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