Transcripciones
1. Introducción: Ya hemos completado una sección sobre
fundamentos críticos. No obstante, en esta
sección quiero cubrir fundamental
crítica
específica de objetos. En esta sección, siguiendo una rápida mirada superficial a la naturaleza de los objetos
en JavaScript, trataremos principalmente
del concepto de prototipos. Entender los prototipos
en JavaScript, es absolutamente crítico. Algunos hablan de prototipos
como pilar de JavaScript y realmente eso tiene
mucho sentido. Los prototipos están
asociados con objetos. Y como comentamos anteriormente, los objetos están
en todas partes en JavaScript. Eso también hace prototipos
en todas partes. A medida que nos
adentramos en prototipos, primero exploraremos qué
son y cómo afectan a los objetos. Cubriremos la ventaja de los prototipos, la cadena de prototipos y las formas en que podemos trabajar
con las propiedades y métodos proporcionados por los prototipos. No creo que pueda exagerar la importancia de entender los
prototipos en JavaScript. Entonces aunque
sientas que tienes una buena
comprensión de este tema, aún así te
animo a que pases por esta sección es revisión. Bien, ya es suficiente información
introductoria. Vamos a saltar y comencemos.
2. La naturaleza de los objetos: Si ya tienes un conocimiento profundo de la naturaleza de los objetos
en JavaScript, puedes saltarte este tema. Lo he incluido porque antes de empezar a
hablar de prototipos, quiero asegurarme de que se entienda la naturaleza
de los objetos. Esto es especialmente importante para aquellos que pueden estar llegando a JavaScript desde
otro idioma. Ya hemos utilizado objetos en numerosas
ocasiones en este curso. Por lo que puede parecer un poco extraño cubrir la
naturaleza de los objetos. Ahora. Sin embargo, hay
muchos que trabajan con objetos en JavaScript sin entenderlos completamente. A veces es mejor
tener alguna experiencia
con los objetos antes de sumergirse en la
verdadera naturaleza de los objetos, que es lo que estamos
haciendo en esta sección. En pocas palabras, un objeto
es un valor compuesto. Reúne múltiples
piezas de datos, primitivas u otros objetos juntos
bajo una sola referencia. Un objeto es una
colección desordenada de propiedades, y cada propiedad tiene
un nombre y un valor. El nombre de la propiedad
suele ser una cadena, pero también se puede ensamblar. El valor puede ser cualquier tipo de datos
disponible en JavaScript. Entonces hablamos de propiedades
como tener pares nombre-valor. Ahora, antes de ir más lejos, permítanme comenzar a crear un objeto. Algunos declaran la variable. Entonces voy a definir ese objeto usando
un objeto literal. Entonces primer nombre F, sólo
voy a poner
información sobre mí
aquí en este objeto. Entonces básicamente en estos momentos lo que
tenemos son dos propiedades y propiedad de nombre F y
una propiedad de alanina. Y fíjate que cada una de
estas propiedades tienen un nombre y un valor. En el caso de estos dos, los valores son cadenas. Ahora cuando estás
definiendo un objeto, cada propiedad debe estar separada por una coma,
lo cual he hecho aquí. Ahora bien, el nombre es referido
a veces como una clave. Entonces hablamos de propiedades
como par de valor clave también. Ahora para lanzar un tipo de datos
diferente. Aquí hay una propiedad
que almacena un número. Entonces el nombre es score, el valor es 90. Y una propiedad que
almacena un booleano. Ahora dijimos que el
valor de una propiedad puede ser cualquier tipo de datos que esté
disponible en JavaScript. Entonces podemos hacer otro
tipo de objeto, por ejemplo, una matriz. Entonces, si hago cuestionarios aquí y
luego configuro eso como una matriz, y solo contiene
alguna información de cuestionario, básicamente cuestionarios,
los cuestionarios que se
han tomado basura,
algo así. Ahí tengo una matriz. Otro tipo de objeto podría ser cualquiera de los objetos incorporados que están disponibles en JavaScript. Uno de esos curso,
a la fecha objeto. Entonces este objeto se
crea en Acabo de crear un nuevo objeto de fecha
y eso se convierte en el valor de esa propiedad. Entonces claro que solo podemos
tener un objeto estándar, digamos tener una dirección aquí. Y ese es un objeto y contiene
propiedades en su interior. A ver, 45 principal
y luego ciudad. Así que ahí tenemos varios
tipos de datos diferentes asociados con las propiedades. Ahora lo único que aún no
hemos agregado es que no hemos agregado una
función a una propiedad. Y cuando el valor
es una función, a eso
lo llamamos método. Entonces, básicamente, una propiedad de objeto que apunta a una
función como método. Ahora, los métodos se pueden
configurar de dos maneras diferentes. Digamos que quería
una propiedad FullName y esto va a ser un método esto apunta
a una función. Entonces, aquí hay una manera de configurarlo. Esto es, esta es la forma
tradicional. Aquí solo definimos una función. Ahora estoy usando esto para
referirme de nuevo al objeto. Estoy agarrando fname y solo estoy concatenando eso
con Helen name. Entonces utilizo esto de nuevo. Como dije, hay
dos formas de definir un método para adjuntar una
función a una propiedad. Esta es la forma tradicional. Pero en un reciente lanzamiento
del script de Ekman, han simplificado esto para que pueda definir el mismo
método así. Mucho más sencillo de hacer. Ahora, aquí hemos creado un objeto usando un
objeto literal. Eso es lo que llamamos a esto. Pero hay múltiples formas de crear objetos en JavaScript. ejemplo, cada vez que
creamos una función, se crea
un objeto usando
el constructor de funciones. Y eso es sólo un tipo
especial de objeto. Cada vez que creamos una matriz, se crea
un objeto usando
el constructor de matriz, que es un
tipo especial de objeto. Así que muchas
formas diferentes de crear objetos. Pero incluso cuando estamos creando un objeto estándar
como lo he hecho aquí. Hay múltiples
formas de hacerlo. Y nos sumergiremos en muchas de esas diferentes formas de
hacerlo cuando miramos la sección sobre estructuración de
código usando objetos y principios orientados a
objetos tal como se aplican a JavaScript. Entonces eso es lo que
cubriremos algunas de estas diferentes formas de
crear objetos, porque esos se convierten en patrones. Si estás estructurando
tu código usando objetos. Ahora, sigamos adelante y guardemos este objeto y
echemos un vistazo. Esto en un poco y
abre la consola aquí. Y solo haz OBJ. Y ahí podemos ver el objeto y todas sus
distintas propiedades,
los pares de nombre valor, que vemos dentro
de este objeto. Ahora, para acceder a un valor que está
asociado a una propiedad, tradicionalmente
usamos la sintaxis de punto. Así puedo acceder a F9
así y muestra el valor de
esa propiedad en particular. Pero no nos limitamos solo
a la sintaxis de puntos. También podemos usar
corchetes. Y esto se vuelve muy útil cuando necesitamos hacer ciertas
cosas programáticamente. Entonces, por ejemplo, si paso una dirección
de cadena dentro de corchetes, va a
buscar la dirección de punto OBJ, y va a devolver el
valor de esa propiedad, como podemos ver allí. Ahora, esto también se puede usar al asignar
valores a un objeto. Así que déjame saltar hacia atrás el código de
Visual Studio aquí. Y aquí arriba,
primero voy a definir un
par de variables. Uno es el nombre de los datos. Voy a poner eso
igual a una final de cadena. Y luego el otro. Vamos a ir a Data Val. Y pongamos eso igual a 80. Ahora vamos a
usar estos valores para crear otra propiedad
en el objeto OBJ. Ahora podríamos hacer eso dentro
de este objeto literal. Podríamos hacerlo así. Pongo corchetes y luego el nombre del dato,
eso es lo que quiero. Quiero final que sea el nombre
del par nombre valor. Y así puse
corchetes alrededor de él. Entonces le pongo así el colon. Y entonces sólo puedo
asociar el valor con ello. Ahora sigamos adelante y guardemos eso y echemos un vistazo al objeto. Asegúrate de que
en realidad estamos viendo eso. Entonces si abro este objeto y tenemos final y son 80, y así eso funcionó para nosotros. Ahora bien, otra forma podría haber
sido asignarlo aquí. Podría hacer OBJ. Después dentro de los
corchetes nombre de datos. Se puede ver
ahora mismo que está recuperando el valor así que podemos usarlo para recuperar o podemos
usarlo para establecer. Si lo configuro a 90. ¿Qué pasa? Distinción de mayúsculas Ahí vamos. El puntaje ahora muestra 90. Ahora algo más que
nos muestra es que los objetos son mutables, es
decir, se pueden cambiar. Ahora bien, aunque hubiéramos definido este objeto
con la palabra clave const, eso lo haría así que no
pudiéramos asignar otro
valor a esta variable. Eso es todo lo que pasaría. Todavía podríamos cambiar
todas las propiedades dentro del objeto porque
los objetos son mutables. Entonces, usar const no
va a impedir que
cambiemos las propiedades
dentro de un objeto. Ahora bien, hay algunos
comandos que nos ayudan a hacer objetos para que sean más inmutables y no
podamos cambiarlos. Para
introducirlo, tenemos que ser conscientes de que cada propiedad
contiene atributos. Los atributos están asociados con cada propiedad en un objeto, y estos atributos
determinan lo podemos hacer con esa propiedad. Entonces, permítanme repasar por
los tres atributos principales. Uno es escribible. Entonces el atributo escribible determina si el valor se
puede cambiar o no. Entonces, si se puede escribir un conjunto
por defecto en el nombre F, no
puedo cambiar ese valor. No me va a permitir cambiarlo. Bien, también hay un,
un atributo configurable. Y el atributo configurable
determina dos cosas. Una, determina
si podemos o no eliminar la propiedad
del objeto. Entonces, si es falso, no
podemos eliminarlo. La otra cosa que
determina es si podemos cambiar los atributos
para esa propiedad. Así que una vez que se establecen los atributos, si
configuramos configurable a false, no podemos cambiar
esos atributos. Eso es lo que va a
impedir que hagamos. Ahora hay una advertencia a eso. Si configuramos configurable
a fallas, podemos cambiar escribible a false. motor Javascript lo permite, pero ese es el único
escenario en el que
realmente podríamos hacer un cambio de
configurables eran falsos. Ahora el último atributo que necesito
mencionar es enumerable. Ahora el atributo enumerable determina que la propiedad es devuelta por ciertas acciones. Por ejemplo, un bucle
for-in no mostrará una propiedad con un atributo
de innumerables valores predeterminados de conjunto, simplemente no aparecerá. Ahora por defecto, para este
objeto que hemos creado aquí, por defecto, todos
estos están establecidos en true. Y podemos ver eso con un
simple comando de JavaScript. Déjame solo guardar lo que
he hecho ahí. Este es un método estático
de constructor de objetos. Es obtener
descriptor de propiedad propiedad, es bastante largo. Entonces si pasamos en OBJ
y luego pasamos en la propiedad para la que
queremos ver sus atributos. Vamos a hacer F nombre. Devolverá la
información sobre eso. Entonces el valor es que Steve nos
muestra y luego
escribible se establece en true, innumerable se establece en true y configurable se establece en true, para que podamos ver cuáles son. Y por defecto, eso
es lo que se asigna a cada propiedad, verdadera, verdadera y verdadera. Ahora bien, ¿cómo podrías cambiar eso? Bueno, sigamos adelante y
definamos una nueva propiedad. Déjame seguir adelante y
hacer eso dentro de Visual Studio Code para que
tengas un registro de ello. Propiedad definida. Y luego una vez más, este es el método estático, por lo que el punto del objeto define la propiedad. Y luego pasamos en el objeto. Y luego pasamos
en la propiedad. Queremos actuar sobre ello.
Voy a crear uno nuevo. Entonces voy a hacer BD por cumpleaños. Ahora, el tercer
parámetro es un objeto. Y este objeto tiene en él
los atributos
que queremos definir. Uno es el valor. Voy a ponerme eso 25. Entonces podemos hacer las propiedades grabables, configurables e innumerables de las que
hemos hablado. Entonces hagámoslo escribible. Y pongamos eso a falso. Voy a establecer estos
valores predeterminados en todos estos, ya que esto es ya que
true es el default. Bien, sigamos
adelante y guardemos eso. Y ahora veamos qué obtenemos. Entonces echamos un vistazo a OBJ. Podemos abrirlo y
podemos ver que
ahora hay una propiedad de fecha B
y está fijada para el 25 de mayo. ¿Podemos exhibirlo? Obj punto? Claro. Podemos exhibirlo. ¿Podemos cambiarlo?
Bueno, vamos a intentarlo. Se. Será j punto v. Vamos a poner eso
igual al 25 de junio. Parece que cambia. Y esto es lo que creo que
es un problema con esto. Parece que cambia. Pero cuando
volvemos a mostrar OBJ y abrirlo, o cuando echamos un vistazo a la propiedad BD de OBJ todavía
está establecida en su valor
original, por lo que no
nos permite cambiar eso. Ahora, ¿qué pasa con la propiedad
configurable? Intentemos cambiar de nuevo esa
misma propiedad, voy a copiar en
el mismo comando. Intentemos configurarlo de nuevo. Y pongamos escribible a true. Ahora bien, si presiono Retorno, notamos que obtenemos un tipo de error
o no podemos definir la propiedad, no nos permitirá hacerlo. Ahora una cosa más quiero
mostrar solo un for in loop. Así que vamos a hacer yo. Y entonces sólo vamos a console.log. Eso me gusta. Así que hay un bucle for-in
para recorrer todas las propiedades del objeto. Ahora bien, si
miramos a través de eso, no vemos un BD
porque no es enumerable. Intentemos una cosa más. Aquí hay otro método estático. Y esto va a recuperar las llaves. Las claves de los pares de valores clave. La clave de la propiedad. También le llamamos ese nombre, pero mencioné que también se
llamaba claves. Entonces, si mostramos eso, básicamente lo que hace
es que crea una matriz. Pero note que
falta el día B y eso es porque el
atributo enumerable se establece en false. Ahora hay un comando similar, object dot values, que recupera los valores y
los pone en una matriz como esta. Así que algunos buenos
métodos estáticos a tener en cuenta. Básicamente usando estos
diferentes comandos para mostrarte la
naturaleza de los objetos, qué objetos son
iguales en JavaScript. Y con esa puesta a tierra, estamos listos para comenzar a
hablar de prototipos, un concepto muy importante a la
hora de los objetos en JavaScript. Entonces, sigamos adelante.
3. ¿Qué es un prototipo y por qué?: A medida que nos sumergimos en prototipos, primero
tenemos que hablar
sobre qué
es un prototipo y por qué es importante. Entonces primero, ¿qué es un prototipo? Ahora, casi todos los objetos
JavaScript tienen un segundo objeto
asociado a él. Ese segundo objeto se llama
el objeto prototipo. Y el
objeto JavaScript puede tomar
prestadas propiedades de ese objeto
prototipo. Ahora, antes de adentrarnos en
este más detalle mirando ejemplos
en código real, pensemos en el
poder de este concepto. Digamos que teníamos
cuatro objetos de usuario, como estamos mostrando aquí mismo. Usuario uno, usuario,
dos, usuario, tres, usuario para cada uno tienen
una propiedad F name, N y L name propiedad. Y tienen valores diferentes para esas propiedades
como podemos ver, porque sus nombres
son diferentes. Pero digamos que
cada uno de estos objetos necesita un método de nombre completo. Un método de nombre completo
que devolverá el FirstName concatenado
con el apellido. Para que podamos seguir adelante y definir un método ficticio sobre cada uno
de estos objetos. Pero eso no
parece muy eficiente. Ponernos un cada
objeto que usa más memoria y nos estamos
repitiendo. Hay un par de
cosas que simplemente
hacen que eso sea ineficiente. Entonces, la forma ideal es colocar ese método
en el objeto prototipo. Ahora con el método en
el objeto prototipo, entonces cada objeto de usuario puede tomar prestado ese método siempre
que lo
desee, cuando lo necesite. Y es sólo en un solo lugar. Si entonces necesitamos
hacer un cambio en él,
vamos a hacer un cambio en el objeto prototipo que
los cambios disponibles para todos los objetos que usan ese objeto como Es objeto
prototipo. Así que hay muchas ventajas. Ahora en este ejemplo, estoy mostrando el
préstamo de un método, una función que está
asociada a una propiedad. Entonces un método, si entro usuario un punto fullname e
invoco eso en mi código. Cuando se ejecuta el código, el motor JavaScript
va a mirar primero en el usuario un objeto. Se va a
buscar una propiedad de nombre
completo que pueda invocar, utilizar como método. Cuando no lo encuentra. Se verá en el prototipo del
objeto. El primer lugar se verá. Y si lo encuentra ahí, lo agarrará y
lo invocará. Entonces así es como los objetos están tomando prestadas propiedades
del objeto prototipo. El motor JavaScript primero
buscará en el objeto en
sí, no lo puede encontrar. Luego buscará
en el prototipo. Pero, ¿y si el prototipo tuviera una propiedad aquí arriba en
nuestro objeto prototipo? ¿Y si tuviera una propiedad
de f, fname y lname? ¿Qué pasaría entonces? ¿El objeto usaría su propia propiedad vespertina
y propiedad de nombre L? Y la respuesta es sí,
claro que lo haría, en base a lo que describimos, el motor JavaScript
va a encontrar esa propiedad sobre el
uso de un objeto. No necesitará sacarlo
del objeto prototipo. Entonces esta es otra
característica poderosa de los prototipos. Podemos tener propiedades en el objeto
prototipo y podemos anularlas en los objetos locales
individuales. Así que esto proporciona la flexibilidad
que estamos buscando. Ahora, dije que casi todos los objetos
JavaScript tienen un objeto prototipo del
que toma prestadas propiedades. Entonces hay
situaciones en las que podemos tener un objeto sin un objeto
prototipo. Sin embargo, para que eso suceda, tú como desarrollador
tendrías que forzarlo. Entonces, cualquier objeto creado
a través de medios regulares, vincularemos a un objeto
prototipo. Esto significa arrays,
fechas, funciones, objetos JavaScript
regulares,
todos estos tienen objetos prototipo. Y en el siguiente
tema vamos a
empezar a mirar
algunos de estos y a
mirar los
prototipos reales y lo que proporcionan a esos objetos. Entonces, sigamos adelante.
4. Los objetos de prototipo están en todas partes: Ya que casi todos los
objetos tienen un prototipo, sigamos adelante y
miremos algunos objetos. Echa un vistazo al
prototipo y lo que el objeto gana
de ese prototipo. Ahora, sigamos adelante y
comencemos con una matriz. Ahora voy a estar haciendo todo
esto en la consola porque estos solo serán algunos comandos simples y
voy a estar entrando. Entonces lo estaremos haciendo aquí. Así que permítanme comenzar
por crear una matriz. Entonces matriz muy simple, solo va a tener tres
números en ella así. Voy a seguir adelante
y presionar Regresar. Ahora, déjame echar un vistazo a esa matriz
aquí en la consola. Podemos ver los elementos del array. Pero fíjense aquí abajo tenemos esto lo que parece una propiedad,
subrayado, subrayado. Subrayar, subrayado será. Este es un enlace al objeto
prototipo. Y así, si abrimos eso, podemos ver lo que
proporciona el prototipo para las matrices. Ahora, con las matrices, con
ese tipo de objeto específico, hay una serie de cosas
proporcionadas desde el prototipo. Puedes ver todos los
métodos que obtenemos que se pueden usar con una
matriz están contenidos aquí. Entonces, por ejemplo, digamos que
queríamos agregar un valor a esta matriz. Así que haz arreglos hacia arriba, empuja. Sigamos adelante y agreguemos
un cuatro a esa matriz. Ahora cuando miramos la tarifa, ahora
tenemos otro artículo ahí. Ahora, ¿de dónde vino ese método
push? ¿Cómo es que podemos usar eso? Bueno, sin duda se
ve a dónde va esto. Proviene de los objetos
prototipo. Entonces, si nos desplazamos hacia abajo lo suficientemente
lejos, podemos ver empujar. Entonces por eso somos
capaces de usar push. Y así cada array que se crea tuvo acceso
a este método. Y cada matriz no tiene que
agotar memoria almacenando
todos estos métodos. Todos están almacenados en
el objeto prototipo, y luego obtienen
acceso a ellos. Pueden
tomarlos prestados cuando sea necesario. Bien, ahora
veamos algunas otras formas mostrar el prototipo. Acabo de usar lo que se proporciona con el navegador Chrome y la forma en que muestra las cosas. Y soy capaz de abrirlo y luego ver el objeto prototipo. Pero también podríamos hacer esto. Esa cosa que
parece una propiedad que estaba hablando. Dos guiones bajos proto, dos guiones bajos que también están disponibles para mostrar el
prototipo. Y podemos ver que
se ve similar. Lo que estaba viendo antes. Ahora, antes de que te vuelvas loco con este guión bajo,
subrayado, subrayado. Permítanme mencionar esta forma
particular de acceder. No se debería usar el prototipo. Solo lo estoy mostrando aquí por diferentes formas en las que puedes
echar un vistazo a un prototipo, pero no debería usarse. Nunca fue parte de la especificación inicial del
guión de Ekman. Simplemente fue agregado
por los navegadores y finalmente se hizo popular a
lo largo de los años. Y luego se agregó a
la especificación más adelante. Pero aún así se desalentaba. Úsalo, por lo que es más
recomendable usar object dot get prototipo del cual vamos
a echar un vistazo. Y luego más tarde cuando
miremos a configurar el prototipo, veremos pronto
los comandos para hacer eso. Así que con objeto punto
obtener prototipo de, también
podemos
mirar los prototipos. Entonces hagámoslo. Dentro de los paréntesis. Este es un método estático. Así objeto muere gap prototipo
dentro de los paréntesis. Ponemos el objeto, en este caso, el
array que creamos. Y eso lo abrimos y
podemos ver el mismo tipo de cosas que estábamos viendo antes cuando estás
viendo el prototipo. Entonces esa es otra forma de ver
el prototipo de un objeto. Y observe todas las
características que obtenemos agregadas a una matriz
debido al prototipo. Bien, hagamos una diferente. Hagamos una cita. Entonces voy a declarar una variable de
fecha y luego simplemente crear una nueva fecha
para la fecha de hoy. Ahora, debido a la
forma en que se configuran las fechas, simplemente no puedo ingresar
una fecha así y poder ver
el prototipo que básicamente solo para usar el método ToString para mostrar la fecha en
un formato de cadena. Eso es lo que eso hace por mí. Pero puedo hacer una consola dot DIR. Y ahí puedo abrirme
y ver más sobre esto. Entonces aquí está nuestro proto que
apunta al objeto prototipo. Y puedes ver todos
los diferentes métodos es
que las fechas tienen también. Hay un montón de ellos. Entonces tiene sentido que
esos estarían en el objeto prototipo y no
en cada fecha individual. Entonces por el prototipo, una vez más, por
ese objeto prototipo, podemos hacer fecha, punto, obtener fecha, y básicamente
obtener el día del mes. Podemos utilizar cualquiera de esos
métodos que estén disponibles. Entonces, todos los objetos
JavaScript incorporados que
forman parte de JavaScript, todos
tienen
prototipos con ellos. Hemos mirado sólo dos, pero todos tienen prototipos. Puedes experimentar con
eso, puedes probar eso. Y te animo a que
dediques algún tiempo a crear algunos de los diferentes objetos incorporados que están disponibles y
simplemente abrirlos. Eche un vistazo al prototipo, vea lo que está disponible
en el prototipo. Ahora, ¿qué pasa con los objetos simples de
JavaScript? Eso es lo que quiero ver
a continuación. Así que permítanme crear sólo un
simple objetos JavaScript. Voy a tener
un nombre de propiedad. Apenas creó esto. Y no es un objeto JavaScript incorporado
, entonces ¿viene con
un prototipo cuando lo
creo así?
Bueno, vamos a averiguarlo. Vamos a abrir eso. Vemos la propiedad
y seguro, tiene un prototipo también. Y si abro eso,
hay algunas cosas que
obtengo como parte de un simple objeto
JavaScript. Observe que hay un
método es prototipo arriba. Esa es una manera de verificar si algún objeto es un
prototipo de otro objeto. Entonces hay algunas
cosas que obtenemos con el objeto prototipo que viene con un objeto JavaScript simple. En uno de esos está el valor de. Ahí, obtenemos el valor. Ahora vamos a usar que
tiene propiedad propia aquí. Y veamos qué se
devuelve por valor de. Esto es matemático que acabamos de usar. Es falso, así que no
es propiedad propia de OBJ. Esa es otra forma de
indicar que
algo que estamos usando no lo
es, no es parte del objeto
prototipo. Porque este método o
esta propiedad que es un método no es propiedad
propia de OBJ. Lo está obteniendo
del prototipo. Ahora una cosa más quiero
mostrar antes de pasar aquí. Si vuelvo a mirar la matriz, vengo aquí
al objeto prototipo. Abrí eso hacia arriba y me desplazo hacia
abajo hasta el fondo. Mira, aquí hay otro. Y eso es objeto. Esto es array, lo que
esperaríamos. Éste es objeto. Entonces, ¿qué está pasando aquí? Bueno, esta es la cadena
prototipo. Entonces de esto es de lo que
vamos a
hablar en el siguiente tema. Los objetos prototipo
también pueden tener prototipos. Entonces sigamos adelante y
hablaremos de eso.
5. Cadenas de prototipo: Hemos establecido el hecho de que los objetos enlatados y la mayoría de las veces sí tienen un objeto prototipo
del cual ese objeto puede tomar prestado o propiedades
inherentes. Ahora, dado que un
objeto prototipo también es un objeto, tiene sentido que
también pueda tener un objeto prototipo. Esto crea lo que
llamamos una cadena prototipo. Objetos unidos entre sí
en una cadena como moda. Primero veamos
esto en código y luego veremos una
representación gráfica para asegurarnos de entender cómo todos
estos objetos comen juntos
y una cadena prototipo. Bien, para este documento
actual, he creado un array, array
simple y también
un objeto para tener ambos de estos para que podamos
mirarlos en la consola. Y luego voy a hacer algunas cosas
más aquí en el archivo de código y sólo
ver qué pasa. Entonces, lo primero que
vamos a hacer es abrir esa consola para que podamos
echarle un vistazo a estas. Bien, entonces primero echemos
un vistazo a la matriz. Ahora bien, si abro eso, como lo hemos hecho en el pasado, vemos que hay un
prototipo adjunto a eso, y eso pasa a venir
del constructor de matriz. Sin embargo, si abrimos aún más
esto y luego nos desplazamos hacia abajo, entonces ahora estamos
mirando el objeto que es el prototipo
de esa matriz. Y vamos más abajo
dentro de ese objeto, podemos ver todos los métodos
que están disponibles para las matrices. Pero más abajo también tenemos
un vínculo con otro objeto, que es el prototipo
del prototipo. Entonces esta es nuestra cadena prototipo que estamos hablando aquí. Entonces podemos ver eso representado
aquí en el navegador. Vamos a usar el get prototipo de dos también echar un vistazo a eso. Entonces si hago objeto, obtengo prototipo de un
enter, el array. Este es el objeto
que es el prototipo. Todos esos métodos deberían parecer familiares. Hay métodos. Esos son métodos que
están disponibles en matrices. Bien, ahora
vamos un paso más allá. Entonces voy a hacer objeto
punto obtener prototipo de. Y luego dentro de eso, voy a poner objeto del que vuelvo a
sacar prototipo. Entonces primero obtendremos el
prototipo aquí de la matriz, y luego obtendremos el prototipo de ese objeto prototipo. Debería mostrarnos el
tercero que estábamos viendo. Entonces si abro eso, observe lo que tenemos
aquí constructor tiene en propiedad es
valor de propiedad de todo eso. Entonces, si tuviéramos que
bajar y bajar, y luego una vez más, eso es básicamente lo que
estamos viendo aquí. Entonces es el prototipo
del prototipo el que crea lo que se llama una cadena
prototipo. Ahora, en ese código, también
había creado un objeto. Así que quiero
mostrarlo muy rápido. Entonces si entro en OBJ y
luego abro eso, el prototipo de eso es exactamente como el prototipo
del prototipo de matriz. Con una matriz. Cuando creamos una matriz, recibe un prototipo que proviene del constructor de
matriz. Bueno, ese prototipo
recibe un prototipo, viene del constructor de
objetos, y ese es el mismo
objeto que estamos viendo aquí. Entonces eventualmente, a medida que
subas por la cadena de prototipos, todos los objetos irán
al mismo extremo, prototipo. Y ese es el prototipo que se adjunta al constructor de
objetos. Y así todos los objetos
tendrán acceso al valor
del método e.g. I. Puede escribir ARR valor de punto de. Y funciona. Busca primero ese método en la matriz, lo
puedes encontrar ahí. Entonces lo busca en el objeto prototipo.
No lo encuentro ahí. Entonces lo busca
en el prototipo
del objeto prototipo y
finalmente lo encuentra ahí. Ahora bien, si no puede encontrarlo en el objeto prototipo final que está en la cadena prototipo, entonces volvería
indefinido o
daría un error diciendo
que no es un método, no puede hacer cualquier cosa con ella. Bien, ahora vamos un
poco más allá aquí. Déjame seguir adelante y
crear otro objeto. Voy a llamarlo OBJ a. Este objeto va a
tener un solo método en él. Simplemente va a estar lleno. Nombre es el método. ¿Qué va a hacer este método? Va a devolver básicamente este nombre de punto F y
concatenar eso con un espacio. Y luego este punto L. nombre. Eso es lo que devolverá. ¿Bien? Ahora lo que vamos a
hacer es hacer esto un prototipo
de otro objeto. Porque no quiero echar
un vistazo y ver qué pasa cuando colocamos el
prototipo de un objeto. ver si aún tenemos ese prototipo de cadena del que
hablamos. Entonces vamos a seguir adelante y
configurar será J3. Aquí hay un comando
que se utiliza para crear un objeto puede al mismo tiempo adjuntar un prototipo que se llama
Object.create. Es un método estático en
el constructor de objetos. Y lo que hacemos es dentro un paréntesis aquí
pasamos en el objeto que queremos como el objeto prototipo para
este objeto que estamos creando. Entonces OBJ tres tendrá esto
como su prototipo inmediato. Entonces OBJ hasta aquí. Ahora, cuando lo guardo y miro al OBJ
tres en la consola, no
hay nada en el objeto, pero sí tiene un prototipo. Observe lo que hay en el prototipo, el método de nombre completo. Y entonces eso sigue subiendo
la cadena prototipo también. Ahora agreguemos algo
a OBJ tres. Agreguemos una propiedad de nombre F y
una propiedad de nombre L. Así OBJ tres punto F nombre. Ahí está el FirstName, LBJ, tres L nombre, y este
va a ser nuestro apellido. Ahí vamos. Ahora tenemos a los dos en. Entonces ahora vamos a guardar eso. Volvamos a saltar a la consola. Ahora bien, esta vez si
entro OBJ tres, nombre
completo, ¿qué
va a pasar? Lo
buscará en OBJ tres. No lo encuentra
ahí. Entonces busca en su objeto prototipo, lo encuentra ahí, hace lo que se necesita y nos
devuelve el nombre completo. Ahora acabamos de hablar
sobre el valor del cual se encuentra en el objeto
prototipo final cuando estamos subiendo una
cadena prototipo que está disponible aquí para nosotros en este objeto
JavaScript autodefinido. Y básicamente
imprime el valor de lo que tiene que ir
a pedir que suban en
la cadena de prototipos para
poder encontrarla. Entonces no puede encontrarlo OBJ tres, no puede
encontrarlo en
su objeto prototipo, que es OBJ a este de aquí. No lo encuentro ahí. Donde finalmente lo encuentra está en el prototipo de punto objeto,
prototipo. Ahí es donde
finalmente lo encuentra, el prototipo del constructor de
objetos. Entonces hemos hablado de eso
desde una perspectiva de código. Veamos cómo se
representa eso usando una imagen solo para que pueda asegurarme de que esto
sea concreto en tu mente. Este es un
concepto importante a comprender. Entonces echemos un
vistazo a un gráfico que
ilustrará eso. Así que aquí hemos representado OBJ tres tiene la propiedad fname
y lname. Y entonces tenemos su prototipo
objeto representado OB J2. Y luego tenemos el
prototipo de eso, que es el prototipo asignado al constructor de objetos,
object dot prototype. Eso es aquí arriba, ahí es
donde se encuentra el valor. Entonces cuando entro OBJ el valor de tres puntos del mismo
primero se ve en el objeto OBJ, no lo encuentro ahí. Entonces se mueve a su prototipo, no lo
puede encontrar ahí. mueve a su prototipo, lo
encuentra ahí, y
continuaría hasta esa cadena
prototipo. Esto pasa a ser el final
de la cadena prototipo. Entonces, si no lo encontró aquí, entonces daría un error
indicando que
no pudo encontrar esa función o ese valor de no
es una función. Así es como el motor JavaScript utiliza la cadena
de
prototipos para tomar prestadas propiedades del prototipo de
un objeto. Y esto ilustra
que no es solo el prototipo de
objeto inicial, sino que puede ser el prototipo
del prototipo. Puede subir esa cadena
prototipo para encontrar y tomar
prestadas esas propiedades. Bien, pasemos
al siguiente tema.
6. Las propiedades de los objetos tienen Precedence: Antes de dejar el tema de prototipos y comenzar a usarlos, quiero enfatizar un punto que quizás ya
hayas descubierto, pero quiero
asegurarme de que se sepa. Eso es un método o propiedad
de un objeto siempre
anulará el método
o propiedad
del mismo nombre en un objeto
prototipo. En otras palabras, cuando el motor
JavaScript está buscando un método
o una propiedad, se ve primero en el objeto. Si el objeto lo tiene, usa esa versión e
ignora cualquier cosa que pueda encontrar en la cadena
prototipo. Veamos un ejemplo
rápido que también
podría ser útil
por otras razones. Entonces voy a crear un objeto
muy sencillo aquí. Obj es como lo llamaremos. Y voy a tener
una propiedad de nombre F. O bueno, vamos a hacer
el nombre F y después voy a
poner una edad de 45 años. Eso es todo lo que vamos a tener ahora mismo en este objeto en particular. Déjeme seguir adelante y guardar eso. Voy a simplemente cambiar el tamaño de esto un poco. Y vamos a ir
a la consola aquí. Y lo primero que quiero
hacer, Ahí está nuestro objeto. Eso lo podemos ver con bastante facilidad. Y lo que pasa si hago valor de ello me muestra el
objeto como un objeto. Así puedo navegar a través de eso. Puedo ver el prototipo. De dónde viene ese valor
de propiedad, o ese valor de método
proviene del prototipo. Eso lo podemos ver aquí mismo. ¿Bien? Por lo que también podemos verificar que no pertenece al objeto
haciendo tiene propiedad propia. Y luego dentro de ese valor
haciendo de esta manera, y eso vuelve falso. Entonces sabemos que el
valor del método no
es una propiedad sobre un objeto. Eso es bastante obvio
a estas alturas. Pero también sabemos que podemos acceder a él porque lo encuentra en la cadena prototipo y lo
imprime de esta manera. Ahora, hagamos algo
muy rápido. Hagamos un cinco más OBJ. Observe lo que se imprime. ¿De dónde viene eso? Bueno, eso viene
del método de dos cadenas. Generalmente, cuando un objeto necesita ser convertido a
un valor primitivo, utiliza el valor del
método para hacerlo. Pero en el caso de una cadena, una situación de cadena, utilizará dos cadenas para hacer
esa conversión. Si el valor de las devoluciones, algo que podría ser
coaccionado en una cadena, entonces usará valor arriba. Pero ahora mismo qué valor de está devolviendo no puede ser
coaccionado en una cadena. Así que usamos el método toString. Así que vamos a hacer un
par de cambios aquí. Volvamos a ese objeto. Y primero voy a
hacer un método ToString. Y vamos a hacer que
devuelva este nombre punto F. Y eso es lo que
vamos a tener. El método de dos cadenas de retorno. Vaya, ahí pongo un punto. Ahí vamos. Ahora vamos a guardar eso. Y saltemos y volvamos a hacer
ese mismo comando. Y
fíjense lo que obtenemos porque
anulamos el método toString que está en la cadena prototipo, es
decir, en el prototipo del
objeto. Ahora obtenemos el valor que es designado por el
método toString en el propio objeto. Bien, ahora agreguemos
un valor de método. Y esto puede ser muy
útil si necesitas un objeto para poder
convertir a un número. Vamos a seguir adelante
y hacer valor de. Y para esto voy
a hacer que me devuelvan un número que es la edad. Ahora, vamos a guardar esto.
Vamos a saltar. Hagamos lo mismo otra vez. Y ahora mira lo que pasa. Ahora porque esto es un número. Se va a tratar de obtener un valor primitivo del
objeto usando el valor de primero, ya que el valor de es
devolver un número, luego se trata
como un número y básicamente suma esas
dos cosas juntas. Ahora, ¿qué pasaría
si tuviéramos una cadena? Vamos, hagamos
algo como esto. Objeto más OBJ. Bueno, accede
al valor del método. Siempre trata de acceder a eso primero si necesita
convertirlo a un valor primitivo. Si puede coaccionar a una
cuerda, lo hará. 45 puede ser coaccionado a una cadena, y así lo hace, y
devuelve una cadena aquí. Pero ya que por defecto
es un número. Cuando lo usemos con el número
, devolverá el número. Actuará como un número,
como lo hemos visto aquí. Así que ahí hemos anulado
las propiedades, los métodos que están en el
prototipo de un objeto, de un objeto que creamos. Es parte del constructor de
objetos. Y eso es toString y
el valor de los anulamos. Entonces ahora este objeto usa
los que son locales para él en lugar de los
de la cadena prototipo. Ahora, hemos cubierto
mucho sobre prototipos. Y con este conocimiento, podemos comenzar a
aplicarlos sin el
misterio de los prototipos, demasiadas personas se lanzan a
trabajar con objetos en JavaScript y realmente no entienden qué es
pasando detrás de escena. Es mucho mejor
entender por qué las cosas están funcionando de una
manera particular y por qué los prototipos hacen las
cosas que hacen en JavaScript. Y eso es importante
saberlo porque los prototipos se utilizan a lo largo de JavaScript. Bien, sigamos adelante.
7. ¿Qué sigue?: Has llegado al final de
las secciones fundamentales
y conceptos críticos de
dominar JavaScript. Entonces, ¿qué hace a continuación? Bueno, la siguiente sección de masterización de
JavaScript estará en módulos. Pero te recomendaría
abordar algunos otros temas primero o al mismo tiempo
que estás abordando módulos. Estos otros temas
están en algunos de mis otros cursos y así
quiero señalarlos. En primer lugar, creo que
un concepto crítico, un
patrón crítico y crítico en JavaScript es el diseño orientado a objetos. Y eso se puede encontrar en temas avanzados de
JavaScript en ese curso. Es una de las partes
de ese curso. Y así te recomendaría
si
aún no tienes que pasar por eso y aprender esos diferentes
patrones que están disponibles para la programación
orientada a objetos. Entonces también la
programación funcional
se ha convertido últimamente en una parte integral
de JavaScript. Y entonces eso es algo más
que siento que es crítico. Ese es otro patrón que
creo que es importante
entender. Tengo un curso completo sobre eso, programación
funcional en
JavaScript, una Guía Práctica. Este es realmente un enfoque
práctico para la programación funcional. Entonces, aunque no uses paradigma de programación
funcional todo el tiempo, puedes aplicar los conceptos
que ahí se enseñan. Y creo que son
críticos para entender. Y luego finalmente,
muy crítico es entender los
patrones asíncronos en JavaScript. Y ese es un
curso completo también. Eso es en inmersión profunda asincrónica de
JavaScript. Por lo que recomendaría
abordarlos al mismo tiempo o antes de abordar los módulos. Bien, sigue aprendiendo y gracias por pasar por
este curso conmigo.
Steven Hancock, Founder All Things JavaScript
