ejemplos - JavaScript: ¿Para qué se utilizan.extend y.prototype?

object.create javascript

Question

Soy relativamente nuevo en JavaScript y sigo viendo .extend y .prototype en bibliotecas de terceros que estoy usando. Pensé que tenía que ver con la biblioteca de JavaScript Prototype, pero estoy empezando a pensar que ese no es el caso. ¿Para qué se usan?

Answer 1

Algunas funciones extend en bibliotecas de terceros son más complejas que otras. Knockout.js por ejemplo, contiene uno mínimamente simple que no tiene algunos de los controles que hace jQuery:

function extend(target, source) {
if (source) {
for(var prop in source) {
if(source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}

Answer 2

El método extend , por ejemplo, en http://api.jquery.com/jQuery.extend/ o http://www.prototypejs.org/api/object/extend , copia todas las propiedades desde el origen hasta el objeto de destino.

Ahora, sobre la propiedad del prototype , es miembro de los objetos de función, es parte del núcleo del lenguaje.

Cualquier función se puede usar como un constructor para crear nuevas instancias de objetos. Todas las funciones tienen esta propiedad prototype .

Cuando utiliza el new operador con un objeto de función, se creará un nuevo objeto que heredará de su prototype constructor.

Por ejemplo:

function Foo () {
}
Foo.prototype.bar = true;
var foo = new Foo();
foo.bar; // true
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

Answer 3

La herencia de Javascript parece ser como un debate abierto en todas partes. Se puede llamar "El curioso caso del lenguaje Javascript".

La idea es que haya una clase base y luego extienda la clase base para obtener una característica similar a la herencia (no completamente, pero aún así).

La idea es obtener lo que realmente significa prototipo. No lo entendí hasta que vi el código de John Resig (cerca de lo que hace jQuery.extend ) escribí un fragmento de código que lo hace y afirma que las bibliotecas base2 y prototipo fueron la fuente de inspiración.

Aquí está el código.

 /* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? //b_super/b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don''t run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we''re overwriting an existing function
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we''re done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();

Hay tres partes que están haciendo el trabajo. Primero, recorre las propiedades y las agrega a la instancia. Después de eso, creas un constructor para luego agregarlo al objeto. Ahora, las líneas clave son:

// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;

Primero apunte el Class.prototype al prototipo deseado. Ahora, todo el objeto ha cambiado, lo que significa que necesita forzar el diseño a su propio diseño.

Y el ejemplo de uso:

var Car = Class.Extend({
setColor: function(clr){
color = clr;
}
});
var volvo = Car.Extend({
getColor: function () {
return color;
}
});

Lea más sobre esto aquí en Herencia de Javascript por la publicación de John Resig .

Answer 4

La herencia de Javascript se basa en prototipos, por lo que amplía los prototipos de objetos como Fecha, Matemáticas e incluso los propios.

Date.prototype.lol = function() {
alert(''hi'');
};
( new Date ).lol() // alert message

En el fragmento anterior, defino un método para todos los objetos Date (ya existentes y todos los nuevos).

extend es generalmente una función de alto nivel que copia el prototipo de una nueva subclase que desea extender desde la clase base.

Entonces puedes hacer algo como:

extend( Fighter, Human )

Y el constructor / objeto Fighter heredará el prototipo de Human , por lo que si defines métodos como live y die en Human entonces Fighter también los heredará.

Clarificación actualizada:

El significado de "alto nivel de funciones" .extend no está incorporado, pero a menudo lo proporciona una biblioteca como jQuery o Prototype.

Answer 5

.extend() es agregado por muchas bibliotecas de terceros para facilitar la creación de objetos desde otros objetos. Consulte http://api.jquery.com/jQuery.extend/ o http://www.prototypejs.org/api/object/extend para ver algunos ejemplos.

.prototype refiere a la "plantilla" (si se quiere llamar así) de un objeto, por lo que se agregan métodos al prototipo de un objeto (esto se ve mucho en las bibliotecas para agregar a String, Date, Math o incluso Function) esos métodos se agregan a cada nueva instancia de ese objeto.