Cuál es la diferencia entre

var A = function () {
    this.x = function () {
        //do something
    };
};

y

var A = function () { };
A.prototype.x = function () {
    //do something
};

Los ejemplos tienen resultados muy diferentes.

Antes de mirar las diferencias, se debe tener en cuenta lo siguiente:

• El prototipo de un constructor proporciona una forma de compartir métodos y valores entre instancias a través de la [[Prototype]]propiedad privada de la instancia .
• Una función es este es fijado por qué se llama a la función o por el uso de bind (no se discute aquí). Cuando se llama a una función en un objeto (por ejemplo myObj.method()), esto dentro del método hace referencia al objeto. Cuando esto no se establece mediante la llamada o mediante el uso de bind , el valor predeterminado es el objeto global (ventana en un navegador) o en modo estricto, permanece indefinido.
• JavaScript es un lenguaje orientado a objetos, es decir, la mayoría de los valores son objetos, incluidas las funciones. (Las cadenas, los números y los booleanos no son objetos).

Así que aquí están los fragmentos en cuestión:

var A = function () {
    this.x = function () {
        //do something
    };
};

En este caso, a la variable Ase le asigna un valor que es una referencia a una función. Cuando esta función se llama usando A(), la función es esto no está establecido por la llamada por lo que por defecto es el objeto global y la expresión this.xes efectiva window.x. El resultado es que se asigna una referencia a la expresión de función en el lado derecho window.x.

En el caso de:

var A = function () { };
A.prototype.x = function () {
    //do something
};

ocurre algo muy diferente. En la primera línea, a la variable Ase le asigna una referencia a una función. En JavaScript, todos los objetos de funciones tienen una propiedad prototipo por defecto, por lo que no hay un código separado para crear un objeto A.prototype .

En la segunda línea, a A.prototype.x se le asigna una referencia a una función. Esto creará una propiedad x si no existe, o asignará un nuevo valor si lo hace. Entonces, la diferencia con el primer ejemplo en el que la propiedad x del objeto está involucrada en la expresión.

Otro ejemplo está abajo. Es similar al primero (y tal vez lo que querías preguntar):

var A = new function () {
    this.x = function () {
        //do something
    };
};

En este ejemplo, el newoperador se ha agregado antes de la expresión de la función para que la función se llame como un constructor. Cuando se llama con new, la función this está configurada para hacer referencia a un nuevo Objeto cuya [[Prototype]]propiedad privada está configurada para hacer referencia al prototipo público del constructor . Entonces, en la declaración de asignación, la xpropiedad se creará en este nuevo objeto. Cuando se llama como constructor, una función devuelve su este objeto por defecto, así que no hay necesidad de una separada return this;comunicado.

Para verificar que A tiene una propiedad x :

console.log(A.x) // function () {
                 //   //do something
                 // };

Este es un uso poco común de new ya que la única forma de hacer referencia al constructor es a través de A.constructor . Sería mucho más común hacer:

var A = function () {
    this.x = function () {
        //do something
    };
};
var a = new A();

Otra forma de lograr un resultado similar es usar una expresión de función invocada inmediatamente:

var A = (function () {
    this.x = function () {
        //do something
    };
}());

En este caso, se le Aasigna el valor de retorno de llamar a la función en el lado derecho. Aquí nuevamente, dado que esto no se establece en la llamada, hará referencia al objeto global y this.xes efectivo window.x. Como la función no devuelve nada, Atendrá un valor de undefined.

Estas diferencias entre los dos enfoques también se manifiestan si está serializando y des serializando sus objetos Javascript a / desde JSON. Los métodos definidos en el prototipo de un objeto no se serializan cuando serializa el objeto, lo que puede ser conveniente cuando, por ejemplo, desea serializar solo las porciones de datos de un objeto, pero no sus métodos:

var A = function () { 
    this.objectsOwnProperties = "are serialized";
};
A.prototype.prototypeProperties = "are NOT serialized";
var instance = new A();
console.log(instance.prototypeProperties); // "are NOT serialized"
console.log(JSON.stringify(instance)); 
// {"objectsOwnProperties":"are serialized"} 

Preguntas relacionadas :

• ¿Qué significa que JavaScript es un lenguaje prototípico?
• ¿Cuál es el alcance de una función en JavaScript?
• ¿Cómo funciona la palabra clave "this"?

Nota al margen: puede que no haya ahorros significativos de memoria entre los dos enfoques, sin embargo, usar el prototipo para compartir métodos y propiedades probablemente usará menos memoria que cada instancia que tenga su propia copia.

JavaScript no es un lenguaje de bajo nivel. Puede no ser muy valioso pensar en la creación de prototipos u otros patrones de herencia como una forma de cambiar explícitamente la forma en que se asigna la memoria.

Como otros han dicho en la primera versión, el uso de "esto" da como resultado que cada instancia de la clase A tenga su propia copia independiente del método de función "x". Mientras que usar "prototipo" significará que cada instancia de la clase A usará la misma copia del método "x".

Aquí hay un código para mostrar esta sutil diferencia:

// x is a method assigned to the object using "this"
var A = function () {
    this.x = function () { alert('A'); };
};
A.prototype.updateX = function( value ) {
    this.x = function() { alert( value ); }
};

var a1 = new A();
var a2 = new A();
a1.x();  // Displays 'A'
a2.x();  // Also displays 'A'
a1.updateX('Z');
a1.x();  // Displays 'Z'
a2.x();  // Still displays 'A'

// Here x is a method assigned to the object using "prototype"
var B = function () { };
B.prototype.x = function () { alert('B'); };

B.prototype.updateX = function( value ) {
    B.prototype.x = function() { alert( value ); }
}

var b1 = new B();
var b2 = new B();
b1.x();  // Displays 'B'
b2.x();  // Also displays 'B'
b1.updateX('Y');
b1.x();  // Displays 'Y'
b2.x();  // Also displays 'Y' because by using prototype we have changed it for all instances

Como otros han mencionado, hay varias razones para elegir un método u otro. Mi muestra solo pretende demostrar claramente la diferencia.

Tome estos 2 ejemplos:

var A = function() { this.hey = function() { alert('from A') } };

vs.

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

La mayoría de las personas aquí (especialmente las respuestas mejor calificadas) trataron de explicar cómo son diferentes sin explicar POR QUÉ. Creo que esto está mal y si entiendes los fundamentos primero, la diferencia será obvia. Intentemos explicar los fundamentos primero ...

a) Una función es un objeto en JavaScript. CADA objeto en JavaScript obtiene una propiedad interna (es decir, no puede acceder a ella como otras propiedades, excepto tal vez en navegadores como Chrome), a menudo referidos como __proto__(en realidad puede escribir anyObject.__proto__Chrome para ver a qué se refiere. Esto es solo eso , una propiedad, nada más. Una propiedad en JavaScript = una variable dentro de un objeto, nada más. ¿Qué hacen las variables? Señalan cosas.

Entonces, ¿a qué __proto__apunta esta propiedad? Bueno, generalmente otro objeto (explicaremos por qué más adelante). La única forma de forzar JavaScript para que la __proto__propiedad NO apunte a otro objeto es usarlo var newObj = Object.create(null). Incluso si hace esto, la __proto__propiedad TODAVÍA existe como una propiedad del objeto, simplemente no apunta a otro objeto, sino a él null.

Aquí es donde la mayoría de las personas se confunden:

Cuando crea una nueva función en JavaScript (que también es un objeto, ¿recuerda?), En el momento en que se define, JavaScript crea automáticamente una nueva propiedad en esa función llamada prototype. Intentalo:

var A = [];
A.prototype // undefined
A = function() {}
A.prototype // {} // got created when function() {} was defined

A.prototypees TOTALMENTE DIFERENTE de la __proto__propiedad. En nuestro ejemplo, 'A' ahora tiene DOS propiedades llamadas 'prototipo' y __proto__. Esta es una gran confusión para las personas. prototypey las __proto__propiedades no están relacionadas de ninguna manera, son cosas separadas que apuntan a valores separados.

Te preguntarás: ¿por qué JavaScript tiene __proto__propiedades creadas en cada objeto? Bueno, una palabra: delegación . Cuando llama a una propiedad de un objeto y el objeto no la tiene, entonces JavaScript busca el objeto al que hace referencia __proto__para ver si tal vez lo tiene. Si no lo tiene, entonces mira la __proto__propiedad de ese objeto y así sucesivamente ... hasta que la cadena termina. De ahí el nombre de prototipo de cadena . Por supuesto, si __proto__no apunta a un objeto y, en cambio, apunta a null, buena suerte, JavaScript se da cuenta de eso y lo devolverá undefinedpor la propiedad.

También puede preguntarse, ¿por qué JavaScript crea una propiedad llamada prototypepara una función cuando define la función? Porque trata de engañarte, sí, te engaña que funciona como lenguajes basados ​​en clases.

Continuemos con nuestro ejemplo y creemos un "objeto" a partir de A:

var a1 = new A();

Hay algo sucediendo en el fondo cuando sucedió esto. a1es una variable ordinaria a la que se le asignó un nuevo objeto vacío.

El hecho de que haya utilizado el operador newantes de una invocación de función A()hizo algo ADICIONAL en segundo plano. La newpalabra clave creó un nuevo objeto que ahora hace referencia a1y ese objeto está vacío. Esto es lo que sucede además:

Dijimos que en cada definición de función hay una nueva propiedad creada llamada prototype(a la que puede acceder, a diferencia de la __proto__propiedad) creada. Bueno, esa propiedad se está utilizando ahora.

Así que ahora estamos en el punto donde tenemos un a1objeto vacío recién horneado . Dijimos que todos los objetos en JavaScript tienen una __proto__propiedad interna que apunta a algo ( a1también lo tiene), ya sea nulo u otro objeto. Lo que hace el newoperador es que establece esa __proto__propiedad para que apunte a la prototypepropiedad de la función . Lee eso de nuevo. Básicamente es esto:

a1.__proto__ = A.prototype;

Dijimos que A.prototypeno es más que un objeto vacío (a menos que lo cambiemos a otra cosa antes de definirlo a1). Así que ahora básicamente a1.__proto__apunta a lo mismo que A.prototypeseñala, que es ese objeto vacío. Ambos apuntan al mismo objeto que se creó cuando sucedió esta línea:

A = function() {} // JS: cool. let's also create A.prototype pointing to empty {}

Ahora, sucede otra cosa cuando var a1 = new A()se procesa la declaración. Básicamente A()se ejecuta y si A es algo como esto:

var A = function() { this.hey = function() { alert('from A') } };

Todo lo que hay dentro function() { }se ejecutará. Cuando llegas a la this.hey..línea, thiscambia a a1y obtienes esto:

a1.hey = function() { alert('from A') }

No cubriré por qué los thiscambios, a1pero esta es una gran respuesta para aprender más.

Para resumir, cuando lo hace, var a1 = new A()hay 3 cosas que suceden en segundo plano:

1. Se crea un objeto vacío totalmente nuevo y se le asigna a1.a1 = {}

2. a1.__proto__la propiedad se asigna para apuntar a lo mismo que A.prototypeapunta a (otro objeto vacío {})

3. La función A()se está ejecutando con thisset en el nuevo objeto vacío creado en el paso 1 (lea la respuesta a la que hice referencia anteriormente sobre por qué thiscambia a1)

Ahora, intentemos crear otro objeto:

var a2 = new A();

Los pasos 1,2,3 se repetirán. ¿Notas algo? La palabra clave es repetir. Paso 1: a2será un nuevo objeto vacío, paso 2: su __proto__propiedad apuntará a lo mismo A.prototypey, lo más importante, paso 3: la función A()se ejecutará OTRA VEZ, lo que significa que a2obtendrá la heypropiedad que contiene una función. a1y a2tiene dos propiedades SEPARATE nombradas heyque apuntan a 2 funciones SEPARATE! Ahora tenemos funciones duplicadas en los mismos dos objetos diferentes que hacen lo mismo, oops ... Puede imaginar las implicaciones de memoria de esto si tenemos 1000 objetos creados new A, después de que todas las declaraciones de funciones toman más memoria que algo como el número 2. Entonces ¿Cómo evitamos esto?

¿Recuerdas por qué __proto__existe la propiedad en cada objeto? De modo que si recupera la yoManpropiedad en a1(que no existe), __proto__se consultará su propiedad, que si es un objeto (y en la mayoría de los casos lo es), verificará si contiene yoMan, y si no lo hace, consultará el objeto, __proto__etc. Si lo hace, tomará el valor de esa propiedad y se lo mostrará.

Entonces, alguien decidió usar este hecho + el hecho de que cuando crea a1, su __proto__propiedad apunta al mismo objeto (vacío) A.prototypeapunta y hace esto:

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

¡Frio! Ahora, cuando crea a1, nuevamente pasa por los 3 pasos anteriores, y en el paso 3, no hace nada, ya que function A()no tiene nada que ejecutar. Y si lo hacemos:

a1.hey

Verá que a1no contiene heyy comprobará su __proto__objeto de propiedad para ver si lo tiene, que es el caso.

Con este enfoque eliminamos la parte del paso 3 donde las funciones se duplican en la creación de cada nuevo objeto. En lugar de a1y a2tener una separada heypropiedad, ahora ninguno de ellos tiene. Lo cual, supongo, ya te habrás dado cuenta. Eso es lo bueno ... si entiendes __proto__y Function.prototype, preguntas como estas serán bastante obvias.

NOTA: Algunas personas tienden a no llamar a la propiedad Prototype interna, ya __proto__que he usado este nombre en la publicación para distinguirlo claramente de la Functional.prototypepropiedad como dos cosas diferentes.

En la mayoría de los casos, son esencialmente lo mismo, pero la segunda versión ahorra memoria porque solo hay una instancia de la función en lugar de una función separada para cada objeto.

Una razón para usar el primer formulario es acceder a "miembros privados". Por ejemplo:

var A = function () {
    var private_var = ...;

    this.x = function () {
        return private_var;
    };

    this.setX = function (new_x) {
        private_var = new_x;
    };
};

Debido a las reglas de alcance de javascript, private_var está disponible para la función asignada a this.x, pero no fuera del objeto.

El primer ejemplo cambia la interfaz solo para ese objeto. El segundo ejemplo cambia la interfaz para todos los objetos de esa clase.

El último problema con el uso en thislugar de prototypees que al anular un método, el constructor de la clase base todavía se referirá al método anulado. Considera esto:

BaseClass = function() {
    var text = null;

    this.setText = function(value) {
        text = value + " BaseClass!";
    };

    this.getText = function() {
        return text;
    };

    this.setText("Hello"); // This always calls BaseClass.setText()
};

SubClass = function() {
    // setText is not overridden yet,
    // so the constructor calls the superclass' method
    BaseClass.call(this);

    // Keeping a reference to the superclass' method
    var super_setText = this.setText;
    // Overriding
    this.setText = function(value) {
        super_setText.call(this, "SubClass says: " + value);
    };
};
SubClass.prototype = new BaseClass();

var subClass = new SubClass();
console.log(subClass.getText()); // Hello BaseClass!

subClass.setText("Hello"); // setText is already overridden
console.log(subClass.getText()); // SubClass says: Hello BaseClass!

versus:

BaseClass = function() {
    this.setText("Hello"); // This calls the overridden method
};

BaseClass.prototype.setText = function(value) {
    this.text = value + " BaseClass!";
};

BaseClass.prototype.getText = function() {
    return this.text;
};

SubClass = function() {
    // setText is already overridden, so this works as expected
    BaseClass.call(this);
};
SubClass.prototype = new BaseClass();

SubClass.prototype.setText = function(value) {
    BaseClass.prototype.setText.call(this, "SubClass says: " + value);
};

var subClass = new SubClass();
console.log(subClass.getText()); // SubClass says: Hello BaseClass!

Si cree que esto no es un problema, entonces depende de si puede vivir sin variables privadas y de si tiene la experiencia suficiente para saber una fuga cuando la vea. Además, tener que poner la lógica del constructor después de las definiciones del método es inconveniente.

var A = function (param1) {
    var privateVar = null; // Private variable

    // Calling this.setPrivateVar(param1) here would be an error

    this.setPrivateVar = function (value) {
        privateVar = value;
        console.log("setPrivateVar value set to: " + value);

        // param1 is still here, possible memory leak
        console.log("setPrivateVar has param1: " + param1);
    };

    // The constructor logic starts here possibly after
    // many lines of code that define methods

    this.setPrivateVar(param1); // This is valid
};

var a = new A(0);
// setPrivateVar value set to: 0
// setPrivateVar has param1: 0

a.setPrivateVar(1);
//setPrivateVar value set to: 1
//setPrivateVar has param1: 0

versus:

var A = function (param1) {
    this.setPublicVar(param1); // This is valid
};
A.prototype.setPublicVar = function (value) {
    this.publicVar = value; // No private variable
};

var a = new A(0);
a.setPublicVar(1);
console.log(a.publicVar); // 1

Cada objeto está vinculado a un objeto prototipo. Al intentar acceder a una propiedad que no existe, JavaScript buscará en el objeto prototipo del objeto esa propiedad y la devolverá si existe.

La prototypepropiedad de un constructor de funciones se refiere al objeto prototipo de todas las instancias creadas con esa función cuando se usa new.

En su primer ejemplo, está agregando una propiedad xa cada instancia creada con la Afunción.

var A = function () {
    this.x = function () {
        //do something
    };
};

var a = new A();    // constructor function gets executed
                    // newly created object gets an 'x' property
                    // which is a function
a.x();              // and can be called like this

En el segundo ejemplo, está agregando una propiedad al objeto prototipo al que Aapuntan todas las instancias creadas .

var A = function () { };
A.prototype.x = function () {
    //do something
};

var a = new A();    // constructor function gets executed
                    // which does nothing in this example

a.x();              // you are trying to access the 'x' property of an instance of 'A'
                    // which does not exist
                    // so JavaScript looks for that property in the prototype object
                    // that was defined using the 'prototype' property of the constructor

En conclusión, en el primer ejemplo se asigna una copia de la función a cada instancia . En el segundo ejemplo, todas las instancias comparten una única copia de la función .

¿Cual es la diferencia? => Mucho.

Creo que la thisversión se utiliza para habilitar la encapsulación, es decir, la ocultación de datos. Ayuda a manipular variables privadas.

Veamos el siguiente ejemplo:

var AdultPerson = function() {

  var age;

  this.setAge = function(val) {
    // some housekeeping
    age = val >= 18 && val;
  };

  this.getAge = function() {
    return age;
  };

  this.isValid = function() {
    return !!age;
  };
};

Ahora, la prototypeestructura se puede aplicar de la siguiente manera:

Diferentes adultos tienen diferentes edades, pero todos los adultos tienen los mismos derechos.
Entonces, lo agregamos usando un prototipo, en lugar de esto.

AdultPerson.prototype.getRights = function() {
  // Should be valid
  return this.isValid() && ['Booze', 'Drive'];
};

Veamos la implementación ahora.

var p1 = new AdultPerson;
p1.setAge(12); // ( age = false )
console.log(p1.getRights()); // false ( Kid alert! )
p1.setAge(19); // ( age = 19 )
console.log(p1.getRights()); // ['Booze', 'Drive'] ( Welcome AdultPerson )

var p2 = new AdultPerson;
p2.setAge(45);    
console.log(p2.getRights()); // The same getRights() method, *** not a new copy of it ***

Espero que esto ayude.

El prototipo es la plantilla de la clase; que se aplica a todas las instancias futuras de la misma. Mientras que esta es la instancia particular del objeto.

Sé que esto ha sido respondido a muerte, pero me gustaría mostrar un ejemplo real de las diferencias de velocidad.

Aquí estamos creando 2,000,000 de objetos nuevos con un printmétodo en Chrome. Estamos almacenando cada objeto en una matriz. Ponerse printel prototipo lleva aproximadamente la mitad del tiempo.

Permítame darle una respuesta más completa que aprendí durante un curso de capacitación de JavaScript.

La mayoría de las respuestas ya mencionaron la diferencia, es decir, cuando la creación de prototipos de la función se comparte con todas las instancias (futuras). Mientras que declarar la función en la clase creará una copia para cada instancia.

En general, no hay correcto o incorrecto, es más una cuestión de gusto o una decisión de diseño según sus requisitos. Sin embargo, el prototipo es la técnica que se utiliza para desarrollar de manera orientada a objetos, como espero que veas al final de esta respuesta.

Mostraste dos patrones en tu pregunta. Trataré de explicar dos más y trataré de explicar las diferencias si es relevante. Siéntase libre de editar / ampliar. En todos los ejemplos, se trata de un objeto de automóvil que tiene una ubicación y puede moverse.

Patrón de decorador de objetos

No estoy seguro si este patrón sigue siendo relevante hoy en día, pero existe. Y es bueno saberlo. Simplemente pasa un objeto y una propiedad a la función decoradora. El decorador devuelve el objeto con propiedad y método.

var carlike = function(obj, loc) {
    obj.loc = loc;
    obj.move = function() {
        obj.loc++;
    };
    return obj;
};

var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

Clases Funcionales

Una función en JavaScript es un objeto especializado. Además de ser invocada, una función puede almacenar propiedades como cualquier otro objeto.

En este caso Cares una función ( también objeto de pensamiento ) que se puede invocar como solía hacerlo. Tiene una propiedad methods(que es un objeto con una movefunción). Cuando Carse invoca extend, se llama a la función, que hace algo de magia, y extiende la Carfunción (objeto de pensamiento) con los métodos definidos dentro methods.

Este ejemplo, aunque diferente, se acerca más al primer ejemplo de la pregunta.

var Car = function(loc) {
    var obj = {loc: loc};
    extend(obj, Car.methods);
    return obj;
};

Car.methods = {
    move : function() {
        this.loc++;
    }
};

var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

Clases de prototipos

Los primeros dos patrones permiten una discusión sobre el uso de técnicas para definir métodos compartidos o el uso de métodos que se definen en línea en el cuerpo del constructor. En ambos casos, cada instancia tiene su propia movefunción.

El patrón prototípico no se presta bien para el mismo examen, porque el intercambio de funciones a través de una delegación prototipo es el objetivo mismo del patrón prototípico. Como otros señalaron, se espera que tenga una mejor huella de memoria.

Sin embargo, hay un punto interesante que debe saber: cada prototypeobjeto tiene una propiedad de conveniencia constructor, que apunta de nuevo a la función (objeto de pensamiento) al que vino adjunto.

Con respecto a las últimas tres líneas:

En este ejemplo, se Carvincula al prototypeobjeto, que se vincula constructora Carsí mismo, Car.prototype.constructores decir, es él Carmismo. Esto le permite descubrir qué función constructora construyó un determinado objeto.

amy.constructorLa búsqueda falla y, por lo tanto, se delega a Car.prototype, que tiene la propiedad de constructor. Y asi amy.constructores Car.

Además, amyes un instanceof Car. El instanceofoperador funciona al ver si el objeto prototipo ( Car) del operando derecho se puede encontrar en cualquier lugar de la amycadena prototipo ( ) del operando izquierdo .

var Car = function(loc) {
    var obj = Object.create(Car.prototype);
    obj.loc = loc;
    return obj;
};

Car.prototype.move = function() {
        this.loc++;
};

var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

console.log(Car.prototype.constructor);
console.log(amy.constructor);
console.log(amy instanceof Car);

Algunos desarrolladores pueden confundirse al principio. Vea el siguiente ejemplo:

var Dog = function() {
  return {legs: 4, bark: alert};
};

var fido = Dog();
console.log(fido instanceof Dog);

El instanceofoperador regresa false, porque Dogel prototipo no se puede encontrar en ninguna parte de fidola cadena de prototipos. fidoes un objeto simple que se crea con un objeto literal, es decir, simplemente delega a Object.prototype.

Patrones pseudoclásicos

Esta es realmente solo otra forma del patrón prototípico en forma simplificada y más familiar para aquellos que programan en Java, por ejemplo, ya que usa el newconstructor.

Realmente hace lo mismo que en el patrón prototípico, es simplemente una capa de azúcar sintáctica del patrón prototípico.

Sin embargo, la principal diferencia es que hay optimizaciones implementadas en los motores de JavaScript que solo se aplican cuando se usa el patrón pseudoclásico. Piense en el patrón pseudoclásico, una versión probablemente más rápida del patrón prototípico; Las relaciones de objeto en ambos ejemplos son las mismas.

var Car = function(loc) {
    this.loc = loc;
};

Car.prototype.move = function() {
        this.loc++;
};

var amy = new Car(1);
amy.move();
var ben = new Car(9);
ben.move();

Finalmente, no debería ser demasiado difícil darse cuenta de cómo se puede hacer la programación orientada a objetos. Hay dos secciones

Una sección que define propiedades / métodos comunes en el prototipo (cadena).

Y otra sección donde pones las definiciones que distinguen los objetos entre sí ( locvariable en los ejemplos).

Esto es lo que nos permite aplicar conceptos como superclase o subclase en JavaScript.

Siéntase libre de agregar o editar. Una vez más completo, podría hacer que este sea un wiki comunitario.

Creo que @Matthew Crumley tiene razón. Son funcionalmente , si no estructuralmente, equivalentes. Si usa Firebug para mirar los objetos que se crean new, puede ver que son los mismos. Sin embargo, mi preferencia sería la siguiente. Supongo que se parece más a lo que estoy acostumbrado en C # / Java. Es decir, definir la clase, definir los campos, el constructor y los métodos.

var A = function() {};
A.prototype = {
    _instance_var: 0,

    initialize: function(v) { this._instance_var = v; },

    x: function() {  alert(this._instance_var); }
};

EDITAR No quería decir que el alcance de la variable fuera privado, solo estaba tratando de ilustrar cómo defino mis clases en javascript. El nombre de la variable se ha cambiado para reflejar esto.

Como se discutió en otras respuestas, es realmente una consideración de rendimiento porque la función en el prototipo se comparte con todas las instancias, en lugar de la función que se crea para cada instanciación.

Puse un jsperf para mostrar esto. Hay una diferencia dramática en el tiempo que lleva crear una instancia de la clase, aunque en realidad solo es relevante si está haciendo muchas instancias.

http://jsperf.com/functions-in-constructor-vs-prototype

Piense en el lenguaje de tipo estático, las cosas en prototypeestáticas y las cosas en thisestán relacionadas con la instancia.