5

se que es tonta pero supongamos este caso en javascript con la siguiente instruccion:

document.style.width    

Mi duda es la siguiente (se que la duda se puede aplicar a otros lenguajes). Se que document se refiere a la pagina en la que se está trabajando; pero al colocar el punto y luego colocar style tengo entendido que es para acceder a esa variable. Mi duda viene al colocar el . y luego width. Se que el punto es para acceder a una variable o método de algun objeto, pero entonces ¿style es un objeto?.

Y si no lo es y fuese una variable entonces ¿con el punto se estaría accediendo a una variable dentro de otra variable?

Y si fuese un objeto, entonces ¿se estaría accediendo a un objeto dentro de otro objeto?.

¿que seria el style?

4
  • 2
    ”Ninguna pregunta es tonta, solamente existen personas con ganas de aprender” el 4 ago. a las 1:06
  • Ya entendí tu inquietud, trataré de explicarla lo mejor que pueda. el 4 ago. a las 1:07
  • 2
    Es muy fácil responder sin tanto texto creo, "¿style es un objeto?. Y si no lo es y fuese una variable" -> Un objeto es un concepto, una variable es un "contenedor". Una variable se usa para contener objetos!!. Un string es un objeto (tiene un valor como texto pero también tiene métodos!), un número igual, y un objeto así: {nombre: "perico"} igual. Todo son objetos, y las variables simplemente guardan cosas! El style es un objeto más, igual que todo lo demás :)
    – Benito-B
    el 4 ago. a las 7:25
  • En JS todo son objetos. el 5 ago. a las 16:24

3 respuestas 3

5

A ver, algunos básicos de la Programación Orientada a Objetos y su implementación en JavaScript.

Notación punto

El punto es, en realidad, un operador, llamado operador punto, parte de la notación punto.

La página Objects in JavaScript dice:

this dot notation is how JavaScript grants access to the data inside an object. The dot (.) is simply an operator that sits between its operands, just like + and -.

Mi traducción libre:

esta notación punto es cómo JavaScript permite el acceso a los datos dentro de un objeto. El punto (.) es simplemente un operador que se encuentra entre sus operandos, al igual que + y -.

Miembros del objeto

Por otro lado, estos datos que están dentro de un objeto, en POO no suelen llamarse variables, sino miembros del objeto. También se utiliza el término propiedad, que usualmente implica que se está accediendo a un miembro a través de getters y setters que son métodos que se ejecutan al leer o asignar un valor.

Al final, claro que son variables, en el sentido que a través de un identificador accedemos a la memoria que las contiene, pero hablar de miembros o de propiedades permite comunicar con claridad que se trata de partes de un objeto.

Objetos compuestos

Es bastante común que los miembros de un objeto sean, a su vez, objetos. Es decir, libremente se pueden tener miembros con datos primitivos, como enteros, o cadenas de caracteres, así como miembros que son, a su vez, objetos (o interfaces, que quedan fuera del alcance de esta respuesta). Cuando tienes un objeto que tiene miembros de tipo objeto, se dice que es un objeto compuesto.

Así, también es común acceder a los miembros de un objeto compuesto encadenando con el operador punto entre un objeto raíz y sus miembros y sub-miembros que son objetos, hasta llegar al dato deseado, por ejemplo, leer su valor con algo como:

miVariable = miObjeto.miPropiedad.miSubPropiedad.miSubSubPropiedad

Variables de tipo objeto

En la redacción de tu pregunta se nota que hay cierta confusión entre variables y objetos, como si no fueran lo mismo.

Lo cierto es que usualmente usamos variables para acceder a los objetos. Es decir, podemos tener variables con datos simples y variables con objetos (esto es un poco más profundo, pues habría que hablar de referencias y otras yerbas, pero lo mantendremos simple en esta respuesta).

Por ejemplo:

miVariable = 5; //variable con un número
miVariable2 = {nickname: "jachguate", nombre: "Juan Antonio", direccion: {ciudad: "Guatemala", pais: "Guatemala"} }

console.log("numero", miVariable);
console.log("ciudad", miVariable2.direccion.ciudad);

console.log("direccion", miVariable2.direccion);

En lenguajes más estrictos, hay una clara definición para Clase y Objeto, que son las instancias que existen en memoria de una clase.

Tu ejemplo:

Por otro lado, todo lo estándar suele estar bien documentado en JavaScript. Así, la documentación de Document dice:

La interfaz Document representa cualquier página web cargada en el navegador y sirve como punto de entrada al contenido de la página web, que es el árbol DOM (Document Object Model).

Cuándo escribimos document estamos accediendo a un objeto que implementa la interfaz Document.

Lamentablemente hasta aquí podemos llegar, pues, como puedes ver en la documentación, Document no tiene un miembro llamado style.

Si tratamos de accederlo, obtenemos undefined, o un error, como se muestra en los ejemplos siguientes:

console.log(document.style);

//esto generará un error:
console.log(document.style.width);

Cómo aprender más

La teoría de objetos, el paradigma de programación orientada a objetos, son temas profundos que no se aprenden en un día. Hay muchos libros, artículos, videos.

Mi recomendación es que leas en investigues. Aquí hay muchos términos que te pueden llevar a un mar de información.

Mi sugerencia siempre son libros, por encima de otros recursos, pues suelen ser más ordenados y te llevan paso a paso por los temas importantes, pero depende de tu nivel de interés y de posibilidades. Esto no es nada más que una pequeña introducción.

4
  • Excelente respuesta. En realidad OP tiene confusión en los términos y eso obstaculiza el entendimiento. El DOM no es la página en la que se está trabajando, sino que es parte de ella (ver por ejemplo la diferencia entre document y window). Por otra parte, en la POO, todo es un objeto. Y las variables serían referencias a los objetos que estamos usando en un determinado contexto.
    – A. Cedano
    el 4 ago. a las 14:38
  • Si vamos a lo puro de la teoría, todo es un objeto, pero en la práctica, muchos lenguajes permiten la mezcla de tipos primitivos con objetos y no todo es un objeto. JavaScript es uno de ellos (de hecho, algunos dirían que no es POO lo de JavaScript, pero no vamos a debatir eso acá. Creo que vale la pena hacer la aclaración.
    – jachguate
    el 4 ago. a las 18:53
  • @jachguate en lenguajes como C# si, todo es un objeto. En Java y en Javascript no es así ya que existen tipos primitivos y tipos envolventes.
    – Mateo
    el 5 ago. a las 15:34
  • @Mateo es lo que he dicho, sin mencionar en cuales si y en cuales no, por no dejar ninguno fuera.
    – jachguate
    el 5 ago. a las 16:58
2

En la programación orientada a objetos, un objeto posee caracteristicas o propiedades que lo describen. Por poner un ejemplo auto posee ruedas, puertas, motor, entre otras propiedades que lo caracterizan.

En algunos lenguajes como javascript, el acceso a las propiedades de un objeto puede lograrse por medio de la notación del punto (.). Quiere decir que para acceder a la cantidad de ruedas que posee un objeto del tipo auto, lo hariamos por medio de:

auto.ruedas

Volviendo al caso que presentas, document es un objeto que representa la pagina actual que estas visualizando. Como objeto, este posee una serie de propiedades que lo caracterizan, como lo es characterSet (que es un string que indica la codificación de caracteres usado en el documento), la propiedad childElementCount que es el número de elementos hijos que posee el documento, entre muchas otras propiedades.

El chiste acá esta es que las propíedades pueden ser de distintos tipos; pueden ser string, numeros o incluso otros objetos con sus respectivas propiedades, como es el caso de document.style. Este objeto (que a su vez es propiedad del objeto document, posee propiedades a las que puedes acceder como es la propiedad witdh. Es por eso que cuando quieres acceder a la propiedad width, lo puedes hacer usando la notación punto, como en el ejemplo del auto:

document.style.width

Puedes ver mas sobre el manejo de objetos y sus propiedades en javascript aca: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_objects

2

Repasemos un par de conceptos:

  • Una variable es un mero contenedor. Su valor puede ser de un tipo primitivo o un objeto.

  • Un objeto es una instancia de una clase. Contiene variables, llamadas propiedades (o atributos).

La expresión document.style.width significa "accede al atributo width del objeto en el atributo style del objeto en el atributo document".

En síntesis:

  • document, style y width no son objetos. Son propiedades.

  • De nuevo, sus valores pueden ser de tipo primitivo u objetos.


Como dice esta respuesta y la documentación, Javascript convierte los tipos primitivos en objetos envolventes automáticamente. Por ende, no todo es un objeto.

14
  • 1
    ¿document no es un objeto?
    – jachguate
    el 5 ago. a las 17:01
  • document si es un objeto, que representa a la interfaz de la clase Document. el 5 ago. a las 17:15
  • @jachguate no. document es un atributo de los objetos Window. En efecto, el valor de document es un objeto Document.
    – Mateo
    el 5 ago. a las 17:58
  • El hecho que sea un atributo de otro objeto, no hace que deje de ser objeto en si mismo.
    – jachguate
    el 5 ago. a las 17:59
  • Juan es una persona (objeto) y tiene un hijo (atributo) llamado Pedro. Tu dices que Pedro no es una persona??????
    – Yussef
    el 8 ago. a las 23:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.