Introducción a JavaScript orientado a objetos

  • Enlace amigable (slug) de la revisión: Introducción_a_JavaScript_orientado_a_objetos
  • Título de la revisión: Introducción a JavaScript orientado a objetos
  • Id de la revisión: 266869
  • Creada:
  • Creador: inma_610
  • ¿Es la revisión actual? No
  • Comentario 1 words added, 1 words removed

Contenido de la revisión

JavaScript dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a sus diferencias en comparación con otros lenguajes.

Este artículo comienza con una Introducción a la programación orientada a objetos, a continuación, examina el modelo de objetos de JavaScript y, finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.

Revisión de JavaScript

Si no te sientes seguro acerca de conceptos de JavaScript como variables, tipos, funciones y ámbito de aplicación puedes leer sobre estos temas en Una nueva introducción a JavaScript . También puedes consultar la Guía de JavaScript 1.5 .

Programación orientada a objetos

La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados ​​en el mundo real. Utiliza diversas técnicas de paradigmas previamente establecidos, incluyendo la modularidad, polimorfismo y encapsulación. Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C #, C + +, Python, PHP, Ruby y Objective-C) son compatibles con la programación orientada a objetos (POO).

La programación orientada a objetos puede considerarse como el diseño de software a través de una conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para el equipo. En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos. Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.

Pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala. Gracias a su fuerte énfasis en la modularidad, el código orientado al objeto está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. 2

Terminología

Clase
Define las características del objeto.
Objeto
Un ejemplo de una clase.
Constructor
Un método llamado en el momento de la creación de un ejemplo.
Propiedad
Una característica del objeto como, por ejemplo, el color.
Método
Una capacidad del objeto como, por ejemplo, el recorrido.
Herencia
Una clase puede heredar características de otra clase.
Encapsulación
Una clase sólo define las características del objeto, un método sólo define cómo se ejecuta el método.
Abstracción
La conjunción de herencia compleja, métodos, propiedades de un objeto debe ser capaz de simular un modelo de la realidad.
Polimorfismo
Diferentes clases podrían definir el mismo método o propiedad.

Para una descripción más extensa de programación orientada a objetos, consulta Programación orientada a objetos en Wikipedia.

Programación basada ​​en prototipos

La programación basada ​​en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados ​​en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos. Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.

El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación autodesarrollado por David Ungar y Randall Smith. Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. 2

Programación orientada a objetos de JavaScript

Objetos de núcleo

JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String. El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método random().

alert (Math.random ());
Nota: este y todas los demás ejemplos suponen que una función llamada alert (como el que se incluye en los navegadores web) se define de forma global. La función alert no es en realidad una parte de JavaScript en sí misma.

Consulta Core JavaScript 1.5 Reference:Global Objects para obtener una lista de los objetos de núcleo en JavaScript.

Cada objeto en JavaScript es un ejemplo del objeto Object , por lo que hereda todas sus propiedades y métodos.

Objetos personalizados

La clase

JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java. Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase. En su lugar, JavaScript utiliza funciones como clases. Definir una clase es tan fácil como definir una función. En el ejemplo siguiente se define una nueva clase llamada Person (Persona).

function Person() { }

El objeto (ejemplo de clase)

Para crear un nuevo ejemplo de un objeto obj utilizamos la declaración new obj , asignando el resultado (que es de tipo obj ) a una variable para tener acceso más tarde.

En el ejemplo siguiente se define una clase llamada Person y creamos dos ejemplos ( person1 y person2 ).

function Person() { }
var person1 = new Person();
var person2 = new Person();
Por favor, consulta también Object.create para ver un método nuevo y alternativo de creación de ejemplos.

El constructor

El constructor es llamado en el momento de la creación de ejemplos (el momento en que se crea el ejemplo del objeto). El constructor es un método de la clase. En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor. Cada acción declarada en la clase es ejecutada en el momento de la creación de ejemplos.

El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso. La adición de métodos de la clase y sus definiciones se produce utilizando una sintaxis diferente que se describe más adelante en este artículo.

En el siguiente ejemplo, el constructor de la clase de Person muestra una alerta cuando crea un ejemplo de una Person .

function Person() {
  alert('Person instantiated');
}

var person1 = new Person();
var person2 = new Person();

La propiedad (atributo de objeto)

Las propiedades son variables contenidas en la clase, cada ejemplo del objeto tiene dichas propiedades. Las propiedades deben ajustarse a la propiedad prototipo de la clase (función), de modo que la herencia funcione correctamente.

Trabajar con propiedades dentro de la clase se realiza mediante la palabra clave this , que se refiere al objeto actual. El acceso (lectura o escritura) a una propiedad fuera de la clase se hace con la sintaxis: InstanceName.Property. Es la misma sintaxis utilizada por C + +, Java y algunos lenguajes más. (Dentro de la clase la sintaxis de this.Property se utiliza para obtener o establecer el valor de la propiedad.)

En el ejemplo siguiente definimos la propiedad gender (género) de la clase Person y la definimos en la creación de ejemplos.

function Person(gender) {
  this.gender = gender;
  alert('Person instantiated');
}

Person.prototype.gender = 'Person Gender';
var person1 = new Person('Male');
var person2 = new Person('Female');

/ / Muestra el género de persona1
alert ('person1 is a' + person1.gender); / / persona1 es Masculino (Male)

Los métodos

Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones. Llamar a un método es similar a acceder a una propiedad, pero se agrega () al final del nombre del método, posiblemente con argumentos.

En el siguiente ejemplo se define y utiliza el método sayHello() para la clase Person.

function Person(gender) {
  this.gender = gender;
  alert('Person instantiated');
}

Person.prototype.gender = 'Person Gender';
Person.prototype.sayHello = function()
{
  alert ('hello');
};

var person1 = new Person('Male');
var person2 = new Person('Female');

/ / Llama al método Person sayHello.
person1.sayHello(); // hola

En JavaScript los métodos son objetos de función regulares que están vinculados a una clase / objeto como una propiedad lo que significa que se puede invocar "fuera del contexto". Considera el siguiente código de ejemplo:

function Person(gender) {
  this.gender = gender;
}

Person.prototype.sayGender = function()
{
  alert (this.gender);
};

var person1 = new Person('Male');
var genderTeller = person1.sayGender;

person1.sayGender(); // alerta a 'Male' (masculino)
genderTeller(); // alerta a undefined (no definido)
alert (genderTeller === person1.sayGender); / / alerta a true (verdadero)
alert(genderTeller === People.prototype.sayGender); // alerta a true (verdadero)

Este ejemplo muestra muchos conceptos a la vez. Demuestra que no hay "métodos por objeto" en JavaScript ya que todas las referencias al método apuntan a la misma función, la que hemos definido en primer lugar en el prototipo. JavaScript "vincula" el actual "contexto del objeto" a la variable especial "this" cuando se invoca una función como un método (o propiedad para ser exactos) de un objeto. Esto equivale a llamar al método "call" (llamada) de los objetos de función de la siguiente manera:

genderTeller.call(person1); //alerta a 'Male'
Consulta más información al respecto en Function.call y Function.apply

Herencia

Un método para crear una clase como una versión especializada de una o más clases (JavaScript sólo es compatible con la herencia de clases individuales). La clase especializada que comúnmente se llama secundaria o niño, y la otra clase se denomina primaria o padre. En JavaScript esto se logra mediante la asignación de un ejemplo de la clase primaria a la clase secundaria y luego se hace la especialización.

{{ Note("JavaScript does not detect the child class prototype.constructor see Core JavaScript 1.5 Reference:Global Objects:Object:prototype property, so we must state that manually.") }}

En el ejemplo siguiente, se define la clase Student como una clase secundaria de Person . Luego redefinimos el método sayHello() y agregamos el método sayGoodBye().

/ / define la clase Person
function Person() {}

Person.prototype.walk = function(){};
Person.prototype.sayHello = function(){
  alert ('hola');
};

/ / define la clase Student
function Student() {
  / / Llama al constructor primario
  Person.call(this);
}

/ / hereda Person
Student.prototype = new Person();

/ / corrige el puntero del constructor porque apunta a Person
Student.prototype.constructor = Student;
 
/ / reemplaza el método sayHello
Student.prototype.sayHello = function(){
  alert ('hola, soy estudiante');
}

/ / agrega el método sayGoodBye
Student.prototype.sayGoodBye = function(){
  alert ('adiós');
}

var student1 = new Student();
student1.sayHello();
student1.sayGoodBye();

/ / comprueba la herencia
alert(student1 instanceof Person); // true  
alert(student1 instanceof Student); // true

Encapsulación

En el ejemplo anterior, Student no tiene que saber cómo se aplica el método walk() de la clase Person, pero, sin embargo, puede utilizar ese método. La clase Student no tiene que definir explícitamente ese método, a menos que queramos cambiarlo. Esto se denomina la encapsulación, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.

Abstracción

Un mecanismo que permite modelar la parte actual del problema de trabajo. Esto se puede lograr por herencia (especialización) o por composición. JavaScript logra la especialización por herencia y por composición al permitir que los ejemplos de clases sean los valores de los atributos de otros objetos.

La clase Función de JavaScript hereda de la clase de Objeto (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)

var foo = function(){};
alert( 'foo es una Función: ' + (foo instanceof Function) );
alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) );

 

Polimorfismo

Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos. Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).

Notas

Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.

Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.

Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.

Referencias

  1. {{ Ref() }} Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs...ript_1.5_Guide
  2. {{ Ref() }} wikipedia. "Programación orientada a objetos", http://es.wikipedia.org/wiki/Program...tada_a_objetos

{{ Block-title("Original Document Information") }}

  • Autor (es): Fernando Trasviña <f_trasvina at hotmail dot com>
  • Información de Copyright: © 1998-2005 por los distintos colaboradores mozilla.org, el contenido se encuentra disponible bajo una licencia Creative Commons

{{ languages( {"en": "en/Introduction_to_Object-Oriented_JavaScript"} ) }}

Fuente de la revisión

<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">JavaScript dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a sus diferencias en comparación con otros lenguajes.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Este artículo comienza con una Introducción a la programación orientada a objetos, a continuación, examina el modelo de objetos de JavaScript y, finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.</span></span></p>
<h2 name="JavaScript_Review"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Revisión de JavaScript</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si no te sientes seguro acerca de conceptos de JavaScript como variables, tipos, funciones y ámbito de aplicación puedes leer sobre estos temas en <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A re-introduction to JavaScript">Una nueva introducción a JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">También puedes consultar la <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Guía de JavaScript 1.5</a> .</span></span></p>
<h2 name="Object-oriented_programming"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Programación orientada a objetos</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados ​​en el mundo real.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Utiliza diversas técnicas de paradigmas previamente establecidos, incluyendo la modularidad, polimorfismo y encapsulación.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C #, C + +, Python, PHP, Ruby y Objective-C) son compatibles con la programación orientada a objetos (POO).</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La programación orientada a objetos puede considerarse como el diseño de software a través de una conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para el equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Gracias a su fuerte énfasis en la modularidad, el código orientado al objeto está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p>
<h2 name="Terminology"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Terminología</span></span></h2>
<dl> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Clase</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Define las características del objeto.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Objeto</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Un ejemplo de una clase.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Constructor</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Un método llamado en el momento de la creación de un ejemplo.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">Propiedad</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una característica del objeto como, por ejemplo, el color.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Método</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una capacidad del objeto como, por ejemplo, el recorrido.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Herencia</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Una clase puede heredar características de otra clase.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Encapsulación</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Una clase sólo define las características del objeto, un método sólo define cómo se ejecuta el método.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Abstracción</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">La conjunción de herencia compleja, métodos, propiedades de un objeto debe ser capaz de simular un modelo de la realidad.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Polimorfismo</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Diferentes clases podrían definir el mismo método o propiedad.</span></span></dd>
</dl>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Para una descripción más extensa de programación orientada a objetos, consulta <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" title="http://es.wikipedia.org/wiki/Programación_orientada_a_objetos">Programación orientada a objetos</a> en Wikipedia.</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Programación basada ​​en prototipos</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La programación basada ​​en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados ​​en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación autodesarrollado por David Ungar y Randall Smith.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p>
<h2 name="JavaScript_Object_Oriented_Programming"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Programación orientada a objetos de JavaScript </span></span></h2>
<h3 name="Core_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Objetos de núcleo</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método <code>random()</code>.</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">alert (Math.random ());</span></span>
</pre>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> este y todas los demás ejemplos suponen que una función llamada <code>alert</code> (como el que se incluye en los navegadores web) se define de forma global.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La función <code>alert</code> no es en realidad una parte de JavaScript en sí misma.</span></span></div>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core JavaScript 1.5 Reference/Global Objects">Core JavaScript 1.5 Reference:Global Objects</a> para obtener una lista de los objetos de núcleo en JavaScript.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cada objeto en JavaScript es un ejemplo del objeto <code>Object</code> , por lo que hereda todas sus propiedades y métodos.</span></span></p>
<h3 name="Custom_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Objetos personalizados</span></span></h3>
<h4 name="The_Class"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">La clase</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">En su lugar, JavaScript utiliza funciones como clases.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Definir una clase es tan fácil como definir una función.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En el ejemplo siguiente se define una nueva clase llamada Person (Persona).</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">function Person() { }</span></span>
</pre>
<h4 name="The_Object_.28Class_Instance.29"><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El objeto (ejemplo de clase)</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Para crear un nuevo ejemplo de un objeto <em><code>obj</code></em> utilizamos la declaración <code>new <em>obj</em></code> , asignando el resultado (que es de tipo <em><code>obj</code></em> ) a una variable para tener acceso más tarde.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En el ejemplo siguiente se define una clase llamada <code>Person</code> y creamos dos ejemplos ( <code>person1</code> y <code>person2</code> ).</span></span></p>
<pre><span class="plain"><span style="font-family:Courier New"><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">function Person() { }</span></span></span></span>
<span class="plain"><span style="font-family:Courier New"><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">var person1 = new Person();</span></span></span></span>
<span class="plain"><span style="font-family:Courier New"><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">var person2 = new Person();</span></span></span></span></pre>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por favor, consulta también <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="en/JavaScript/Reference/Global Objects/Object/create">Object.create</a> para ver un método nuevo y alternativo de creación de ejemplos.</span></span></div>
<h4 name="The_Constructor"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El constructor</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El constructor es llamado en el momento de la creación de ejemplos (el momento en que se crea el ejemplo del objeto).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El constructor es un método de la clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cada acción declarada en la clase es ejecutada en el momento de la creación de ejemplos.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La adición de métodos de la clase y sus definiciones se produce utilizando una sintaxis diferente que se describe más adelante en este artículo.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el siguiente ejemplo, el constructor de la clase de <code>Person</code> muestra una alerta cuando crea un ejemplo de una <code>Person</code> .</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">function Person() {</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert('Person instantiated');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person1 = new Person();</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person2 = new Person();</span></span>
</pre>
<h4 name="The_Property_.28object_attribute.29"><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La propiedad (atributo de objeto)</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las propiedades son variables contenidas en la clase, cada ejemplo del objeto tiene dichas propiedades.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las propiedades deben ajustarse a la propiedad prototipo de la clase (función), de modo que la herencia funcione correctamente.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Trabajar con propiedades dentro de la clase se realiza mediante la palabra clave <code>this</code> , que se refiere al objeto actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82-goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" style="">El acceso (lectura o escritura) a una propiedad fuera de la clase se hace con la sintaxis: <code>InstanceName.</code><code>Property</code>. Es la misma sintaxis utilizada por C + +, Java y algunos lenguajes más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84-goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" style="">(Dentro de la clase la sintaxis de <code>this.</code><code>Property</code> se utiliza para obtener o establecer el valor de la propiedad.)</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo siguiente definimos la propiedad <code>gender</code> (género) de la clase <code>Person</code> y la definimos en la creación de ejemplos.</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">function Person(gender) {</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">this.gender = gender;</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert('Person instantiated');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.prototype.gender = 'Person Gender';</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person1 = new Person('Male');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person2 = new Person('Female');</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">/ / Muestra el género de persona1</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert ('person1 is a' + person1.gender); / / persona1 es Masculino (Male)</span></span>
</pre>
<h4 name="The_methods"><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los métodos</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Llamar a un método es similar a acceder a una propiedad, pero se agrega <code>()</code> al final del nombre del método, posiblemente con argumentos.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el siguiente ejemplo se define y utiliza el método <code>sayHello()</code> para la clase <code>Person</code>.</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-100"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">function Person(gender) {</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-101"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">this.gender = gender;</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-102"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert('Person instantiated');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-103"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.prototype.gender = 'Person Gender';</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.prototype.sayHello = function()</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert ('hello');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">};</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person1 = new Person('Male');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person2 = new Person('Female');</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / Llama al método Person sayHello.</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">person1.sayHello(); // hola</span></span>
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En JavaScript los métodos son objetos de función regulares que están vinculados a una clase / objeto como una propiedad lo que significa que se puede invocar "fuera del contexto".</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Considera el siguiente código de ejemplo:</span></span></p>
<pre><span style="font-family:Courier New"><span class="goog-gtc-unit" id="goog-gtc-unit-115"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">function Person(gender) {</span></span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-116"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">this.gender = gender;</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-117"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-118"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.prototype.sayGender = function()</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-119"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-120"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">alert (this.gender);</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-121"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">};</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-122"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var person1 = new Person('Male');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-123"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var genderTeller = person1.sayGender;</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-124"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">person1.sayGender(); // alerta a 'Male' (masculino)</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-125"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">genderTeller(); // alerta a undefined (no definido)</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-126"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert (genderTeller === person1.sayGender); / / alerta a true (verdadero)</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-127"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert(genderTeller === People.prototype.sayGender); // alerta a true (verdadero)</span></span>
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-128"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este ejemplo muestra muchos conceptos a la vez.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-129"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Demuestra que no hay "métodos por objeto" en JavaScript ya que todas las referencias al método apuntan a la misma función, la que hemos definido en primer lugar en el prototipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-130"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">JavaScript "vincula" el actual "contexto del objeto" a la variable especial "this" cuando se invoca una función como un método (o propiedad para ser exactos) de un objeto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-131"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto equivale a llamar al método </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-131"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"call" (llamada) de </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-131"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">los objetos de función de la siguiente manera:</span></span></p>
<pre><span class="goog-gtc-unit" id="goog-gtc-unit-132"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">genderTeller.call(person1); //alerta a 'Male'</span></span>
</pre>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta más información al respecto en <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/JavaScript/Reference/Global Objects/Function/call">Function.call</a> y <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></span></span></div>
<h4 name="Inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Herencia</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-135"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Un método para crear una clase como una versión especializada de una o más clases <em>(JavaScript sólo es compatible con la herencia de clases individuales).</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-136"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La clase especializada que comúnmente se llama secundaria o niño, y la otra clase se denomina primaria o padre.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-137"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En JavaScript esto se logra mediante la asignación de un ejemplo de la clase primaria a la clase secundaria y luego se hace la especialización.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-138-goog-gtc-unit-139"><span class="goog-gtc-translatable goog-gtc-from-human" style="">{{ Note("JavaScript does not detect the child class <code>prototype.constructor</code> see <a href='\"en/Core_JavaScript_1.5_Reference/Global_Objects/Object/prototype\"'>Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a> property, so we must state that manually.") }}</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-140"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo siguiente, se define la clase <code>Student</code> como una clase secundaria de <code>Person</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-141"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Luego redefinimos el método <code>sayHello()</code> y agregamos el método <code>sayGoodBye()</code>.</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-142"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / define la clase Person</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-143"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">function Person() {}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-144"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.prototype.walk = function(){};</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-145"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.prototype.sayHello = function(){</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-146"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert ('hola');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-147"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">};</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-148"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">/ / define la clase Student</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-149"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">function Student() {</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-150"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / Llama al constructor primario</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-151"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Person.call(this);</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-152"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-153"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / hereda Person</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-154"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Student.prototype = new Person();</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-155"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / corrige el puntero del constructor porque apunta a Person</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-156"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Student.prototype.constructor = Student;</span></span>
 
<span class="goog-gtc-unit" id="goog-gtc-unit-157"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / reemplaza el método sayHello</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-158"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Student.prototype.sayHello = function(){</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-159"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert ('hola, soy estudiante');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-160"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-161"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / agrega el método sayGoodBye</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-162"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Student.prototype.sayGoodBye = function(){</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-163"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">alert ('adiós');</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-164"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-165"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var student1 = new Student();</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-166"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">student1.sayHello();</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-167"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">student1.sayGoodBye();</span></span>

<span class="goog-gtc-unit" id="goog-gtc-unit-168"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/ / comprueba la herencia</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-169"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert(student1 instanceof Person); // true </span></span> 
<span class="goog-gtc-unit" id="goog-gtc-unit-170"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert(student1 instanceof Student); // true</span></span>
</pre>
<h4 name="Encapsulation"><span class="goog-gtc-unit" id="goog-gtc-unit-171"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Encapsulación</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-172"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo anterior, <code>Student</code> no tiene que saber cómo se aplica el método <code>walk()</code> de la clase <code>Person</code>, pero, sin embargo, puede utilizar ese método. La clase <code>Student</code> no tiene que definir explícitamente ese método, a menos que queramos cambiarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-173"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se denomina <strong>la encapsulación</strong>, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.</span></span></p>
<h4 name="Abstraction"><span class="goog-gtc-unit" id="goog-gtc-unit-174"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Abstracción</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-175"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Un mecanismo que permite modelar la parte actual del problema de trabajo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-176"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se puede lograr por herencia (especialización) o por composición.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-177"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">JavaScript logra la especialización por herencia y por composición al permitir que los ejemplos de clases sean los valores de los atributos de otros objetos.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-178"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La clase Función de JavaScript hereda de la clase de Objeto (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)</span></span></p>
<p><code> </code></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-179"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">var foo = function(){};</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-180"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert( 'foo es una Función: ' + (foo instanceof Function) );</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-181"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) );</span></span>
</pre>
<p> </p>
<h4 name="Polymorphism"><span class="goog-gtc-unit" id="goog-gtc-unit-182"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Polimorfismo</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-183"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-184"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).</span></span></p>
<h2 name="Notes"><span class="goog-gtc-unit" id="goog-gtc-unit-185"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Notas</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-186"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-187"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-188"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.</span></span></p>
<h2 name="References"><span class="goog-gtc-unit" id="goog-gtc-unit-189"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Referencias</span></span></h2>
<ol> <li><span class="goog-gtc-unit" id="goog-gtc-unit-190-goog-gtc-unit-191-goog-gtc-unit-192"><span class="goog-gtc-translatable goog-gtc-from-human" style="">{{ Ref() }} Mozilla. "Core JavaScript 1.5 Guide", <a class=" external" href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide" rel="freelink">http://developer.mozilla.org/en/docs...ript_1.5_Guide</a></span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-193-goog-gtc-unit-194-goog-gtc-unit-195"><span class="goog-gtc-translatable goog-gtc-from-human" style="">{{ Ref() }} wikipedia. "Programación orientada a objetos", <a class=" external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" rel="freelink">http://es.wikipedia.org/wiki/Program...tada_a_objetos</a><br> </span></span></li>
</ol>
<div class="originaldocinfo">
<p><span class="goog-gtc-unit" id="goog-gtc-unit-196"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ Block-title("Original Document Information") }}</span></span></p>
<ul> <li><span class="goog-gtc-unit" id="goog-gtc-unit-197"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Autor (es): Fernando Trasviña &lt;f_trasvina at hotmail dot com&gt;</span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-198"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información de Copyright: © 1998-2005 por los distintos colaboradores mozilla.org, el contenido se encuentra disponible bajo una <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html" title="http://www.mozilla.org/foundation/licensing/website-content.html">licencia Creative Commons</a></span></span></li>
</ul>
</div>
<p>{{ languages( {"en": "en/Introduction_to_Object-Oriented_JavaScript"} ) }}</p>
Revertir a esta revisión