Prototipo de palabra clave en Javascript

Que es prototype propiedad, y por qué es necesario? Hasta ahora, he aprendido que esto proporciona acceso público a información más intrínseca y privada. prototype del objeto; ¿Es eso correcto?

Además, ¿cuál es la diferencia entre las siguientes declaraciones?

MyConstructor.age = 30;
MyConstructor.prototype.age = 30;

En resumen, necesito una mejor comprensión de la palabra clave prototype.

Gracias

“Prototipo” es algo que juega un papel en los objetos.

En Javascript, todo es un objeto. Cada objeto tiene una clase, y por lo tanto hereda la prototype de ese tipo

Por ejemplo, tome una matriz simple: var a = []. Puedes hacer operaciones con él, como a.push(10). ¿De dónde viene esto? push ¿De dónde viene el método? Del prototipo de Array objeto, que a es.

Puede agregar sus propios métodos a Array objetos simplemente definiéndolos en el prototype objeto. Por ejemplo:

Array.prototype.sortNum = function() {this.sort(function(a, b) {return a - b});};

De esta manera puedes hacer algo como a.sortNum() con todos arreglos, incluso los creados antes de que definiera el sortNum método.

(Nota: por razones de compatibilidad, generalmente no se recomienda extender el prototipo de objetos nativos como Arrays. Pero este ejemplo en particular suele ser una adición bienvenida, así como la normalización de métodos como map y forEach para navegadores más antiguos).

(Sólo nunca jamás extender Object.prototype! A menos que no te importe estropearlo for...in declaraciones, la in operador y este tipo de casos).

Si desea definir sus propias clases, como el nombre MyConstructor sugiere, tendrás que definir su prototype para definir los métodos para todas las instancias de esa clase:

function MyConstructor(name) {this.name = name};
MyConstructor.prototype = {
    print: function() {return this.name;}
};

var mc = new MyConstructor("foo");
alert(mc.print()); // alerts "foo"

Puede definir más que solo funciones en prototypes, también:

MyConstructor.prototype.age = 30;

alert(mc.age); // alerts 30

Tenga cuidado cuando haga esto para definir valores de objeto “predeterminados”, porque cambiarlo puede causar un cambio en todos instancias de esa clase.

Pero esto viene bien con Object.defineProperty:

Object.defineProperty(MyConstructor.prototype, "wholeString", {
    get: function() {return this.name + "=" + this.age;},
    set: function(v) {this.name = v.substring(3);}
});

alert(mc.wholeString); // alerts "foo = 30"

(Desafortunadamente, IE

cuando defines MyConstructor.age = 30 en cambio, lo que en realidad estás haciendo es definir un miembro del función MyConstructorasi que mc.age sería indefinido. Cada instancia de MyConstructor hereda los métodos y miembros definidos en MyConstructor.prototypeno los de la función MyConstructor.

Hay mucho más que decir, en realidad. Los objetos pueden ser de una subclase de otra clase, heredando así la prototype de la superclase, también. Por ejemplo, document.body es una instancia de HTMLBodyElementque es una subclase de HTMLElementque es una subclase de Element y así sucesivamente, hasta que consigas Object como la superclase superior. Asi que, document.body hereda todos los métodos definidos en el prototipo de HTMLBodyElement, HTMLElement, Element y Object. Esto se llama la cadena prototipo.

Hacer lo mismo con objetos personalizados es un poco complicado:

function Class() {};
Class.prototype.foo = function() {alert("foo");};

function Subclass() {};
Subclass.prototype = new Class();
Subclass.prototype.bar = function() {alert("bar");};

var a = new Class(), b = new Subclass();
a.foo(); // alerts"foo"
a.bar(); // throws an error
b.foo(); // alerts "foo"
b.bar(); // alerts "bar"

a instanceof Class;    // true
a instanceof Subclass; // false
b instanceof Class;    // true
b instanceof Subclass; // true

En JavaScript, los objetos de función tienen un .prototype propiedad. El valor de esta propiedad es un objeto. Si la función se usa como constructor, las instancias resultantes se heredan de ese objeto “prototipo”.

Ejemplo:

var Dog = function () {}; // the constructor function

Dog.prototype.bark = function () {}; // adding a method to Dog.prototype

var dog1 = new Dog; // creating a new instance

dog1.bark(); // the instance inherits the "bark" method from Dog.prototype

Tenga en cuenta que el .prototype propiedad (de los objetos de función) no es lo mismo que la [[Prototype]] propiedad interna. Todos los objetos contienen este último. Es una referencia interna al prototipo de un objeto. (En el ejemplo anterior, el dog1 objetos [[Prototype]] se refiere a Dog.prototype.) Por otro lado, solo los objetos de función tienen un .prototype propiedad (lo que tiene sentido ya que solo los objetos de función se pueden usar como constructores).

var foo = function () {};
foo.bar = 5;
foo.prototype.foobar = 10;

var x = new foo();
x.bar; // undefined
x.foobar; // 10

Editar: Además, puedes hacer

foo.prototype.foobar = 20;
x.foobar; // 20