Trabajar con Objetos JavaScript
Declarar e instanciar un Objeto
Para crear un Objeto se utiliza el operador new seguido del nombre de la clase que queremos instanciar:
var oObject = new Object();
var oStringObject = new String();
En la primera linea creamos una nueva instancia del objeto que se
almacena en la variable. Cuando la funcion constructor no requiere
parametros es posible instanciar la clase sin parentesis.
var oObject = new Object;
var oStringObject = new String;
ECMAScript, no permite acceder a la representacion fisica de un
objeto; unicamente podemos acceder a su referencia. Cada vez que creamos
un objeto, la referencia se almacena en la variable, no el objeto en si
mismo.
Para la destruccion ECMAScript posee un recolector de basura, lo que
nos evita de tener que ocuparnos de la destruccion de objetos para
liberar memoria. En el momento que un objeto no contiene ninguna
referencia hacia el, recolector de basura se encarga de destruir dicho
objeto. El recolector de basura se ejecuta cada vez que una funcion
termina liberando todas sus variables ademas de ejecutarse en momentos
no tan predecibles. La manera de forzar la destruccion de un objeto es
hacer todas sus referencias igual a null. Por ejemplo:
var oObject = new Object;
//do something with the object here
oObject = null;
En este caso oObject es igual a null, no existes mas referencias hacia
el objeto creado. Esto implica que cuando se ejecute el recolector de
basura, se destruira el objeto. Es una buena practica, una vez que no
vayamos a usar mas un objeto creado, igualar su referencia a null. Esto
nos evitara referencias indeseadas y liberara memoria. Ademas en
antiguos navegadores, el funcionamiento
Hay que ser cauteloso a la hora de quitar todas las referencias a un
objeto, supongamos que tenemos mas de una, ambas deberian ser igualadas a
"null" para que dicho objeto sea destruido.
Por "binding" entendemos la manera en la que el codigo de la interfaz de
un objeto (metodos y propiedades) se asocian a una instancia.
Early binding las propiedades y metodos de se declaran en su clase antes
de que se realice una instanciacion, de esta manera el
compilador/interprete puede preparar el codigo bytecode con
anterioridad. Esto es lo que sucede en leguajes como Java. ECMAScript no
es fuertemente tipado por lo que no soporta early binding.
Late binding, implica que el compilador/interprete no conoce con
anticipacion el tipo de objeto que contiene una variable hasta que no
esta en runtime, por lo que no se realiza ninguna verificacion del tipo
de objeto, sino si soporta o no una determinada propiedad o metodo.
En ECMAScript se usa "late binding".
En ECMAScript, los objetos no se crean de la misma manera. Existen objetos propios del lenguaje los
cuales pueden ser usados directamente o creados a partir de su constructor.
ECMA-262 se definen los objetos nativos como "cualquier objeto que
incorpora ECMAScript independientemente del cliente o framework".
Dicho claramente, los objetos nativos son las clases entre las que se incluyen los siguientes:
Object,Boolean,Error,SyntaxError,Function,Number,EvalError,TypeError,Array,Date,RangeError,URIError,String,RegExp,ReferenceError
ECMAScript, al contrario de Java, tiene una clase Array.
var aValues = new Array();
//o bien
var aValues = [];
Si conocemos el numero de elementos del Array podemos indicar el tamaño como parametro.
var aValues = new Array(20);
//acceder a los elementos o asignarlos
var aColors = new Array();
aColors[0] = “red”;
aColors[1] = “green”;
aColors[2] = “blue”;
var elem = aColors[0];
Ademas si sabes los valores que el array deberia contener, pueden establecerse directamente.
var aColors = new Array(“red”, “green”, “blue”);
//En este caso como strings, primer elemento en posicion 0
alert(aColors[1]);
//devuelve “green”
var aColors = new Array(“red”, “green”, “blue”);
alert(aColors.length);
//devuelve “3”
//Como indicamos anteriormente, crece dinamicamente. Si queremos añadir un elemento al final:
var aColors = new Array(“red”, “green”, “blue”);
alert(aColors.length);
//outputs “3”
//Este codigo cambia la longitud del array de 3 a 4.
aColors[3] = “purple”;
alert(aColors.length);
//outputs “4”
//en otro lenguaje tendriamos un error Array OutOfBounds
aColors[20] = "color20"
// automaticamente se rellenan las posiciones 4-19 con null
//lenght es ahora 21
alert(aColors.length);
//outputs “21”
El numero maximo de elementos de un array es "4 294 967 295" elementos. Mas alla de este
numero nos devolveria una excepcion.
Es posible declarar un objeto Array mediante su representacion literal.
var aColors = [“red”, “green”, “blue”];
alert(aColors.length);
En la clase Array se sobrecarga el metodo toString() y valueOf() para
devolver un string formateado. El string se formatea de manera que cada
elemento del array es de la forma siguiente:
“red,green,blue”
//Array.valueOf y Array.toString
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
var aColors = [“soda”, “fanta”, “cola”];
alert(aColors.toString());
//outputs “soda,fanta,cola”
De la misma forma, el metodo toLocaleString() devuelve un string
formateado con sus elementos. La diferencia aqui es que cada uno de sus
elementos se formatea teniendo en cuenta los requisitos de formateo de
idioma.
var aColors = [“red”, “green”, “blue”];
alert(aColors.toLocaleString());
//outputs “red,green,blue”
Cuando queremos crear dichos valores fuera de los arrays, ECMAScript contiene el metodo
join() ,
su funcion es crear string concatenados. join() acepta el argumento que es el string a utilizar para separar los elementos del array.
//metodo join
var aColors = [“red”, “green”, “blue”];
alert(aColors.join(“,”));
//outputs “red,green,blue”
alert(aColors.join(“-SEP-”));
//outputs “red-SEP-green-SEP-blue”
alert(aColors.join(“][“));
//outputs “red][green][blue”
Vemos que cualquier elemento string puede ser usado como separador.
La forma de realizar la operacion inversa es mediante split(). Este metodo recibe un unico parametro que es el string que debe ser considerado como separador.
//metodo split
var sColors = “red,green,blue”;
var aColors = sColors.split(“,”);
//Si ponemos un nuevo separador con una cadena vacia, el metodo split() devuelve cada item con el
//separador por defecto.
var sColors = “green”;
var aColors = sColors.split(“”);
alert(aColors.toString());
//outputs “g,r,e,e,n”
Aqui el, string “green” se transforma en el array de strings “g” , “r” ,
“e” , “e” , “n” .
Esta funcionalidad puede ser util si necesitamos parsear strings en sus
caracteres.
El objeto Array tiene un par de metodos que tiene su equivalente en la
clase String, llamado concat() y slice(). El metodo concat() funciona
exactamente de la misma forma que lo ha works almost exactly the same as
it does with
strings: The arguments are appended to the end of the array, and a new
Array object (one containing
both the items in the original array and the new items) is returned as
the function value.
var aColors = [“red”, “green”, “blue”];
var aColors2 = aColors.concat(“yellow”, “purple”);
alert(aColors2.toString());
//outputs “red,green,blue,yellow,purple”
alert(aColors.toString());
//outputs “red,green,blue”
En este ejemplo el string “yellow” y “purple” se añade al array aColors, mediante concat()
y el resultado se asigna a aColors2 que contiene el resultado. aColors2
array contiene los 5 valores, aColors contiene los valores inciales.
Esto se puede demostrar usando el metodo toString().
El metodo slice() similar al String de la clase que devuelve un nuevo
array con los items indicados.
var aColors = [“red”, “green”, “blue”, “yellow”, “purple”];
var aColors2 = aColors.slice(1);
var aColors3 = aColors.slice(1, 4);
alert(aColors2.toString());
//outputs “green,blue,yellow,purple”
alert(aColors3.toString());
//outputs “green,blue,yellow”
Una caracteristica interesante de la clase Array en ECMAScript es que
contiene metodos que permiten comportarse como otro tipo de estructrura
de dato.
1- Array como Stack, metodos push() y pop().
// un array manejado como pila
var stack = new Array;
stack.push(“red”);
stack.push(“green”);
stack.push(“yellow”);
alert(stack.toString());
var vItem = stack.pop();
alert(vItem);
alert(stack.toString());
//outputs “red,green,yellow”
//outputs “yellow”
//outputs “red,green”
///
var stack = new Array;
stack[0] = “red”;
stack[1] = “green”;
stack[2] = “yellow”;
alert(stack.toString());
var vItem = stack.pop();
alert(vItem);
alert(stack.toString());
//outputs “red,green,yellow”
//outputs “yellow”
//outputs “red,green”
2- Array y los metodos shift(), unshift()
var aColors = [“red”, “green”, “yellow”];
var vItem = aColors.shift();
alert(aColors.toString());
//outputs “green,yellow”
alert(vItem);
//outputs “red”
aColors.unshift(“black”);
alert(aColors.toString());
//outputs “black,green,yellow”
3- Array como Cola FIFO, metodos push() y unshift().
var queue = [“red”, “green”, “yellow”];
queue.push(“black”);
alert(queue.toString());
//outputs “red,green,yellow,black”
var sNextColor = queue.shift();
alert(sNextColor);
//outputs “red”
alert(queue.toString());
//outputs “green,yellow,black”
4- Array ordenado, metodos reverse() y sort() methods.
//reverse()
var aColors = [“red”, “green”, “blue”];
aColors.reverse();
alert(aColors.toString());
//outputs “blue,green,red”
El metodo sort(), por otro lado, organiza los items en el array
ordenandolos de manera ascendente segun los valores que contiene
var aColors = [“red”, “green”, “blue”, “yellow”];
aColors.sort();
alert(aColors.toString());
//outputs “blue,green,red,yellow”
//sort()
var aColors = [3, 32, 2, 5]
aColors.sort();
alert(aColors.toString());
//outputs “2,3,32,5”
//!! Ordenacion de tipos string
El metodo splice() , es realmente sencillo, permite insertar elementos en medio del Array, aunque ademas se usa para:
1- Borrar — Es posible borrar un numero determinado de elementos de un
array indicando unicamente 2 paramtros, la posicion inicial y el numero
de elementos a eliminar
//ejemplo : array.splice(0, 2) elimina los dos primeros elementos
var tab = ['sea','monkey','browser'];
tab.splice(0,2);
// ['browser']
Insertar valores — reemplazamos los valores de un array indicando la
posicion inicial, el numero de elementos a eliminar y el elemento a
insertar, podemos añadir un cuarto parametro, quinto, ...N, que son los
valores a insertar a partir de dicha posicion.
//por ejemplo: array.splice(2, 0, “red”, “green”)
// añade los strings “red” and “green”
//en el array a partir de la posicion 2.
Reemplazar valores:
//array.splice(2, 1, “red”, “green”)
//borra un elemento a partir de la posicion 2 e inserta uno.
La clase "Date" en ECMAScript se basa en antiguas versiones de
"java.util.Date" de Java. ECMAScript,
almacena la fecha como el numero de milisegundos desde las 12 AM on
January 1, 1970 UTC.
UniversalTimeCocde (Greenwich Mean Time), es la fecha estandar de
referencia. Almacenar la fecha en milisegundos garantizaria que no
afectase el efecto 2000.
var d = new Date();
//crea un objeto date con la fecha y hora del dia actual
//Para crear un valor lo podemos indicar como parametro el numero de milisegundos que han transcurrido desde la fecha de referencia:
var d = new Date(0);
//equivalente a new Date()
Date y los metodos parse() y UTC() .
ECMA-262 no especifica cuales son los formatos string de fecha que
parse() maneja, asi que es especifico de la implementacion o especifico
de la locale,
por ejemplo los siguientes formatos:
"mm/dd/yyyy" (6/13/2004)
"mmmm dd, yyyy" (January 12, 2004)
Si intentamos crear un objeto date a partir de la cadena "May 25, 2004", podemos usar el metodo parse()
para obtener su representacion en milisegundos y a continuacion pasar dicho valor a un constructor Date(millis)
var d0 = Date.parse(“May 25, 2004”)
// verificar d0 instanceof Date
// o bien isNan(d0)
var d = new Date(d0);
//si parse falla devuelve NaN
El metodo UTC() devuelve la representacion en
milisegundos de una fecha, pero con diferentes argumentos: año, mes,
dia del mes, horas, minutos, segundos, and milisegundos.
Cuando usamos UTC(), tenemos que especificar el año y mes, pero el resto
de informacion es opcional.
Atencion cuando establecemos el rango de valores ya que numero de mes va
de 0 (Enero) a 11(Diciembre).
// "Feb/5/2003"
var d = new Date(Date.UTC(2003, 1, 5));
//Para el caso de las horas van de 0 a 23.
//"February 5, 2004 at 1:05 PM"
var d = new Date(Date.UTC(2003, 1, 5, 13, 5));
Otra forma de crear una fecha es pasar los parametros que el metodo UTC() acepta directamente:
var d = new Date(2003, 1, 5);
Los argumentos se especifican en el mismo orden, y no tienen que aparecer todos (excepto para año y mes).
La sobrecarga de los metodos toString() y valueOf() de la clase Date es
distinta. El metodo valueOf() siempre devuelve los milisegundos mientras
que el metodo toString() devuelve un string dependiente de la
implementacion y en formato legible.
Metodos de la clase Date
Metodo Descripcion
toDateString() devuelve la parte de fecha( mes, dia, año ) en formato plataforma.
toTimeString() devuelve la parte de tiempo de fecha (horas, minutos, segundos)
toLocaleString() devuelve la fecha hora en formato de la locale
toLocaleDateString() devuelve la parte de fecha en formato de la locale
toLocaleTimeString() devuelve la parte de tiempo en formato de la locale
toUTCString() devuelve los valores UTC de la fecha en formato legible
El metodo de la clase Date getTimezoneOffset(). Devuelve el numero de minutos que la current timezone que sobrepasa la hora UTC. Para U.S. Eastern Daylight Saving Time,
que es 5 horas( 300 minutes) anterior a UTC.
//hora de verano; si son iguales
var d1 = new Date(2004, 0, 1);
var d2 = new Date(2004, 6, 1);
var bSupportsDaylightSavingTime = d1.getTimezoneOffset() != d2.getTimezoneOffset();
El resto de metodos de la clase Date se usan como getters/setters
Date
Metodo Descripcion
getTime() Returns the milliseconds representation of the date.
setTime(milliseconds) Sets the milliseconds representation of the date.
getFullYear() Returns the year of the date, represented by four digits (such as 2004 instead of just 04).
getUTCFullYear() Returns the year of the UTC date, represented by four
digits.
setFullYear(year) Sets the year of the date, which must be given as a
four-digit year.
setUTCFullYear(year) Sets the year of the UTC date, which must be given
as a four-digit year.
getMonth() Returns the month of the date, represented by the numbers 0
(for January) through 11 (for December).
getUTCMonth() Returns the month of the UTC date, represented by the
numbers 0 (for January) through 11 (for December).
setMonth(month) Sets the month of the date, which is any number 0 or
greater. Numbers greater than 11 begin to add years.
setUTCMonth(month) Sets the month of the UTC date, which is any number 0
or greater. Numbers greater than 11 begin to add years.
getDate() Returns the date, which is the day of the month, of the date
value.
getUTCDate() Returns the date, which is the day of the month, of the UTC
date value.
setDate(date) Sets the day of the month of the date.
setUTCDate(date) Sets the day of the month of the UTC date.
getDay() Returns the day of the week of the date.
getUTCDay() Returns the day of the week of the UTC date.
setDay(day) Sets the day of the week of the date.
setUTCDay(day) Sets the day of the week of the UTC date.
getHours() Returns the hours of the date time.
getUTCHours() Returns the hours of the UTC date time.
setHours(hours) Sets the hours of the date time.
setUTCHours(hours) Sets the hours of the UTC date time.
getMinutes() Returns the minutes of the date time.
getUTCMinutes() Returns the minutes of the UTC date time.
setMinutes(minutes) Sets the minutes of the date time.
setUTCMinutes(minutes) Sets the minutes of the UTC date time.
getSeconds() Returns the seconds of the date time.
getUTCSeconds() Returns the seconds of the UTC date time.
setSeconds(seconds) Sets the seconds of the date time.Object Basics
setUTCSeconds(seconds) Sets the seconds of the UTC date time.
getMilliseconds() Returns the milliseconds of the date time. Note that
this does not refer to the milliseconds since January 1,1970, but rather
the number of milliseconds in the current time, such as 4:55:34.20,
where 20 is the number of milliseconds of the time.
getUTCMilliseconds () Returns the milliseconds of the UTC date time.
setMilliseconds(milliseconds) Sets the milliseconds of the date time.
setUTCMilliseconds(millseconds) Sets the milliseconds of the UTC date time.
Objetos implicitos de ECMAScript
ECMA-262 define built-in object (BOM) como "cualquier objeto de la
implementacion independientemente del entorno en el que se encuentra,
que se encuentra presente en la ejecucion de un programa ECMAScript"
Esto implica que un desarrollador no tiene por que instanciar
directamente un objeto de este tipo ya que se encuentra presente en el
entorno.
ECMA-262: define dos objetos: "Global" y "Math".
Un objeto exclusivo de ECMAScript es el objeto Global, ya que a efectos
de desarrollador no existe, por ejemplo, si queremos hacer una
referencia a Global, devolveria error:
//intentar crear una referencia a Global
var pointer = Global;
El error indicaria que no existe dicho objeto. ECMAScript no contiene
funciones independientes, pertenecen a un objeto que existe, por ejemplo a Global.
esta manera las propiedades por defecto y metodos de ECMAScript tales
eval(), isNan(), parseInt(), en realidad son
metodos del objeto Global.
Veamos algunas de ellas:
//ECMAScript metodos de Global
var sUri = “http://www.wrox.com/jsprog value.htm#start”;
// tiene en cuenta que se trata de una URI por lo que encode se aplica a la parte que sigue a http://
alert(encodeURI(sUri));
// devuelve http://www.wrox.com/jsprog%20value.htm#start
// no tiene en cuenta que se trata de una URI, toma todo el string para aplicar encode
alert(encodeURIComponent(sUri));
//deveuelve http%3A%2F%2Fwww.wrox.com%2Fjsprog%20value.htm%23start
// la transformacion inversa seria con decodeURI
var sUri = “http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start”;
alert(decodeURI(sUri));
// devuele http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
alert(decodeURIComponent(sUri));
// devuelve http://www.wrox.com/illegal value.htm#start
Una buena practica para evitar sorpresas en cuanto a la codificacion es usar encondeURI, decodeURI
en lugar de escape, unescape, ya que estos ultimos no tienen en cuenta la codificacion Unicode sino ASCII,
por lo que podemos obtener caracteres indeseados
Metodo eval():
Quiza uno de los mas importantes ya que trabaja como un interprete de ECMAScript. Un ejemplo:
var str = "( 1 && 1)";
eval(str);
//devolveria true
str = "( 1 && 0)";
eval(str);
//devolveria false
Declarar una variable fuera de eval e invocarla dentro de la cadena, sustituye la variable por su valor:
var msg = “hello world”;
eval(“alert(msg)”);
Declarar funciones mediante eval() u otro tipo de propiedad.Existe riesgo en su uso,
ocurre cuando en una aplicacion en las que se introducen datos, entre ellos, un campo que declara un trozo de codigo
malintencionado, puede dar lugar a un problema de seguridad (denominado inyeccion de codigo).
//evaluar codigo js en una cadena, en este caso carga la funcion
var input = "";
input = “function sayHi() { alert(‘hi’); }”;
eval(input);
sayHi();
Propiedades del objeto Global:
Global
Propiedad Descripccion
undefined The literal for the Undefined type.
NaN The special Number value for Not a Number.
Infinity The special Number value for an infinite value.
Object Constructor for Object
Array Constructor for Array .
Function Constructor for Function .
Boolean Constructor for Boolean .
String Constructor for String .
Number Constructor for Number .
Date Constructor for Date .
RegExp Constructor for RegExp .
Error Constructor for Error .
EvalError Constructor for EvalError .
RangeError Constructor for RangeError .
ReferenceError Constructor for ReferenceError .
SyntaxError Constructor for SyntaxError .
TypeError Constructor for TypeError .
URIError Constructor for URIError .
El objeto implicito Math, esta destinado a operaciones de calculo. Veamos algunas de sus propiedades:
Math
Propiedad Descripccion
E The value of e, the base of the natural logarithms.
LN10 The natural logarithm of 10.
LN2 The natural logarithm of 2.
LOG2E The base 2 logarithm of E .
LOG10E The base 1 logarithm of E .
PI The value of π.
SQRT1_2 The square root of 1 ⁄ 2.
SQRT2 The square root of 2.
Metodos del objeto Math:
Usados con frecuencia los metodos min(),max():
var iMax = Math.max(3, 54, 32, 16);
alert(iMax);
//devuelve “54”
var iMin = Math.min(3, 54, 32, 16);
alert(iMin);
//devuelve “3”
Metodo abs() , valor absoluto de un numero:
var iNegOne = Math.abs(-5);
alert(iNegOne);
//outputs “5”
var iPosOne = Math.abs(5);
alert(iPosOne);
//outputs “5”
Para el redondeo tenemos :
ceil() , floor() , and round()
ceil() redondea decimales hacia el valor más cercano.
floor() redondea al valor inferior mas cercano.
round() el redondeo clasico, lo realiza hacia el valor más proximo a partir de 0.5.
Veamos un ejemplo de redondeo:
var a = 25.5;
var ceil = Math.ceil(a);
var round = Math.round(a);
var floor = Math.floor(a);
alert(ceil);
//devuelve “26”
alert(round);
//devuelve “26”
alert(floor);
//devuelve “25”
En funciones de redondeo es necesario tener muy encuenta cual es el tipo que necesitamos aun cuando el resultado sea el mismo y
no intercambiar de una a otra si no queremos obtener resultados indeseados.
Methods de calculo exponencial:
exp() eleva Math.E (E exp x) a la potencia indicada
log() devuelve el logaritmo natural de un numero
pow() eleva un determinado numero a una potencia
sqrt() calcula la raiz cuadrada de un numero
Los metodos exp() y log() realizan cada uno la transformacion inversa con Math.E
var number = 2;
var resultado = Math.log(Math.exp(number));
alert(resultado);
// resultado = number = 2
var iNum = Math.pow(2, 10);
var iNum = Math.sqrt(4);
alert(iNum);
//outputs “2”
Resto de metodos para calcular que ofrece el objeto implicito Math:
Method Description
acos(x) Returns the arc cosine of x.
asin(x) Returns the arc sine of x.
atan(x) Returns the arc tangent of x.
atan2(y, x) Returns the arc cosine of y/x.
cos(x) Returns the cosine of x.
sin(x) Returns the sine of x.
tan(x) Returns the tangent of x.
Metodo random() Nos devuelve un numero aleatorio entre 0 y 1, distinto de 0 o 1
//En este ejemplo de redondeo de un resultado aleatorio entre una serie de prim a Total elementos
var prim = 2;
var Total = 10;
var aleat = Math.floor(Math.random() * Total + prim) % Total;
Scope de objetos, objetos static y uso de "this"
Public, protected y private
En la implementacion ECMAScript, el unico ambito que existe es el de
publico, un factor a tener en cuenta, por convencion es se usa la
notacion underscore para indicar que una propiedad o metodo es privado.
En general se añaden __ antes de cada elemento.
obj.__color__ = “red”;
obj._radius = 0.3;
Static no es static
El ambito "static" indica que la propiedad o metodo es definido a nivel de
clase y es accesible para todos las instancias y declarado publico como
ocurren en ECMAScript, accesible a todo el resto de elementos. Es
similar al caso del metodo java, java.util.Date.parse() que es estatico.
//Ejemplo que muestra añadir un metodo
//en el ambito publico, no estatico ya que no
//esta declarado dentro del contexto de la funcion de sayHi
function sayHi() {
alert(“hi”);
}
sayHi.alternate = function() {
alert(“hola”);
};
sayHi();
sayHi.alternate();
//outputs “hi”
//outputs “hola”
Uso de this
var oCar = new Object;
oCar.color = “red”;
//añade el metodo showColor no estatico
oCar.showColor = function () {
alert(this.color); //this aqui hace referencia a oCar
//outputs “red”
};
var oCar = new Object;
oCar.color = “red”;
oCar.showColor = function () {
alert(oCar.color);
//outputs “red”
};
//this en este caso nos permite apuntar al objeto que contiene el metodo
//y evita tener que referenciarlo directamente
function showColor() {
alert(this.color);
}
var oCar1 = new Object;
oCar1.color = “red”;
oCar1.showColor = showColor;
var oCar2 = new Object;
oCar2.color = “blue”;
oCar2.showColor = showColor;
oCar1.showColor();
oCar2.showColor();
//outputs “red”
//outputs “blue”
Es importante tener en cuenta que debemos usar this "cuando hacemos
referencia a propiedades de un objeto".
// si queremos hacer referencia a la propiedad color del objeto
contenedor
// this se busca en el ambito de variables locales al metodo y en el
ambito global
// por lo que al no encontrarlo mostraria null.
function showColor() {
alert(color);
}
![[ Puerto Cero Uno ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXs7hWiiK0_ETMqSqjEYdPtKVGAtAw_S16cM3u-3t1kwYIw-FM1aSQeOkrlr9lmqom-9Kw9kz0ZoPNXfpYGC_CIbLwn20L7Ps3leRsUpjPp63xioaYTeMLJsI-2JnRc8mWwH76Jbhn-jx/s752/puertocerounobanner.jpg)
