0

Tengo una gran duda, soy nuevo en js.

No entiendo que significa la linea 7

Const video = document.querySelector('video')

Const button = document.querySelector('buton')

Function MediaPlayer(config){

  This.media = config.el
}
MediaPlayer.prototype.play = function () {
   This.media.play();
}
 Const player = new MediaPlayer({el : video});
  Button.onclick = () => player.play()

Como lo puedo leer? Que significa, que es lo que está haciendo?

14
  • Jamas habia visto algo así, seguro que es javascript??
    – Layer
    Commented el 29 abr. 2020 a las 2:32
  • Si, obvio que si, lo que me pregunto es... Commented el 29 abr. 2020 a las 2:44
  • Es que en javascript una funcion no se define así y su This tampoco... y lo que esta a la derecha salvo esos asteriscos lo veo normal.
    – Layer
    Commented el 29 abr. 2020 a las 2:45
  • Si, es js, lo que se intenta es crear al parametro config como un objeto y meter a "el" dentro de config? Commented el 29 abr. 2020 a las 2:46
  • Es que no es una function, es un prototipo?? Commented el 29 abr. 2020 a las 2:47

2 respuestas 2

0

en primera decir que eso que tienes ahí si es código JS pero es código javascript incorrecto, puesto que cosas que no deberían comenzar con mayusculas estan comenzando con una mayuscula, de hecho lo podemos probar en un snippet:

Const video = document.querySelector('video')

Const button = document.querySelector('buton')

Function MediaPlayer(config){

  This.media = config.el
}
MediaPlayer.prototype.play = function () {
   This.media.play();
}
 Const player = new MediaPlayer({el : video});
  Button.onclick = () => player.play()
<video></video>
<button></button>

De hecho una cosa mas en la que hay que tener cuidado es que aquí en esta parte:

Const button = document.querySelector('buton')

Escribiste buton en el querySelector y no button, el elemento buton no existe, existe es el elemento button.

Ahora bien, aquello que esta mal, son varias cosas, la primera de ellas es que estas declarando las constantes con mayuscula al inicio:

Const video = ...

Debería ser así:

const video = ...

Esto mismo te esta pasando con las funciones, debe ser escrita la palabra function toda en minusculas y no la primera en mayusculas, es decir, tu la tienes así:

//Esto no existe
Function

Y la debes tener así:

//Esto si existe!
function

Esto mismo también te esta pasando con el this this no debe tener la primera en mayuscula, debe ser todo en minusculas, tu lo tienes así:

This

Y es así:

this

Tambien al final estas añadiendole un listener a algo que no existe, mira:

Button.onclick = () => player.play()

No existe Button en tu código, existe la constante button.

Ahora bien, voy a corregir tu código para que sea ejecutable y correcto:

const video = document.querySelector('video')
const button = document.querySelector('button')

function MediaPlayer(config){

  this.media = config.el
}

MediaPlayer.prototype.play = function () {
   this.media.play();
}

const player = new MediaPlayer({el : video});
button.onclick = () => player.play()
video{

  max-height: 300px;

}
<video src = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" muted></video>
<button value = "clickeame!">Clickeame!</button>

Como vemos ahora el código es correcto y funciona, ahora pasaremos a explicar el codigo.

Vamos por lineas, la primera:

const video = document.querySelector('video')

con document.querySelector se esta obteniendo el primer elemento <video> que se encuentre en el html y se lo esta asignando a la constante video.

const button = document.querySelector('button')

Lo mismo que lo anterior, solo que esta vez con la etiqueta <button>.

function MediaPlayer(config){

  this.media = config.el

}

Esta parte es un poco mas extensa, y es que para poder entender por que se usa this dentro de MediaPlayer y el motivo de usar un prototype en una función es que anteriormente las clases en javascript no existian, (deberas consultar sobre las clases tu mismo, ya que es un tema demasiado extenso), pero como antes no existian las clases, no existia un modelo orientado objetos, sin embargo como javascript era un lenguaje orientado a prototipos esto hacia que pudieramos crear nuestros propios objetos y usarlos como clases.

Un ejemplo de esto es la clase MediaPlayer que tienes ahí, y si, digo clase porque anteriormente cuando usabas this o self dentro de una función es porque querias usar esa función como si fuese una clase.

En resumen, lo que se esta haciendo ahí es crear una clase a la vieja escuela, sin embargo con la llegada de ES6 esto ya no es necesario. Ahora ya existen las clases, genericas pero son clases...

Digo genericas porque enrealidad no se les puede considerar como verdaderas clases...

Por ejemplo, si quisieramos coger la clase MediaPlayer que tienes ahí y adaptarla a una clase actual, la clase que tienes ahí se vería así:

class MediaPlayer{

  constructor(config){
    this.media = config.el;
  }

}

const mediaPlayer = new MediaPlayer({el: "Soy un elemento video!"});
console.log(mediaPlayer.media);

Yo considero que actualmente la forma de realizar clases mediante una función esta deprecada, deberías empezar a usar las clases de ES6.

Con respecto a this.

this se refiere al contexto en el que lo uses, por ejemplo si te encuentras dentro de una función this será tu función, si te encuentras dentro de una clase this será tu clase, y si te encuentras dentro de un objeto, this será tu objeto.

En pocas palabras:

this.media = config.el

Eso de ahí lo que hace es asignarle una propiedad a tu clase.

Prosigamos:

MediaPlayer.prototype.play = function () {
   this.media.play();
}

Cuando se usa el prototype de una clase, es para modificar la arquitectura y metodos que contiene esta, por ejemplo ahí le estas agregando a MediaPlayer un metodo bajo el nombre de play, que lo que hará es simplemente darle play al video.

Consideralo una forma de extender aquello que contiene una clase, (si modificas el prototype todas las instancias que hagas tendran el metodo que les añadiste).

const player = new MediaPlayer({el : video});

Se esta haciendo una nueva instancia de MediaPlayer y se esta guardando en la constante player, como parametro le pasamos lo requerido por tu clase, que en este caso es un elemento, y el elemento que le pasamos es el de video, para poder que nuestra clase pueda hacer uso de nuestro video.

por ultimo tenemos:

button.onclick = () => player.play()

Estas añadiendo un evento oyente, en este caso de tipo click al boton, y lo que va a hacer este boton cuando se cliquee es darle play al video.

sin embargo talvez deba explicar esta parte de aquó

() => player.play()

Eso de ahi se conoce como función flecha, en lo mas minimo de su expresión, y hacen parte de ES6, en pocas palabras es una acortación de esto mismo:

button.onclick = function(){
    player.play();
}

Que como vemos es mas largo pero hacen lo mismo.

Espero te haya sido útil esta información, saludos!

-1

Resulta que JS es un lenguaje de prototipado, todos los elementos de JavaScript tienen un prototipo al cual puedes acceder mediante prototype

Todos los objetos que comparten el mismo prototipo pueden desempeñar las mismas acciones y/o atributos podríamos decir que el prototipo es la "clase" si estas familiarizado con POO.

Básicamente tu código hace lo siguiente *Obtienes el elemento video *Obtienes el elemento buton *Creas un función llamada MediaPlayer *Modificas el prototipo de la clase MediaPlayer (todo objeto que sea de tipo MediaPlayer tendrá acceso a la función media.play() ) *Creas un objeto player *Asignas un evento al buton para que el player realice la función play()

Espero haberte ayudado

Tu Respuesta

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

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