A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Getters y setters

17/42
Recursos

Los getters y setters son funciones que podemos usar en un objeto para tener propiedades virtuales. Se usan los keywords set y get para crear estas propiedades.

Estas propiedades al ser funciones pueden llevar una validaci贸n de por medio y ser usadas con el operador de asignaci贸n como si fueran una variable m谩s dentro del objeto.

Aportes 111

Preguntas 26

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

apuntes de la clase:

Me parece que aunque se aborda la funcionalidad de los getters y setters, en el contexto en el cual se explica, no facilita su comprensi贸n. Este seria un resumen:

Getters

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  get skills(){
    return this.languages
  }
}

console.log(person.skills)

En este caso estoy retornando el valor de languages atraves de un getter llamado skills, pero para ver mejor su uso, mira este ejemplo:

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  get fullName(){
    return `${this.name} ${this.last_name}`
  }
}

console.log(person.fullName)

En este caso estoy retornando el nombre completo (fullName), como una propiedad del objeto person. El fullName tambi茅n lo podr铆a traer a trav茅s de un m茅todo de la siguiente forma:

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  fullName: function (){
    return `${this.name} ${this.last_name}`
  }
}

console.log(person.fullName())

Sin embargo, a traves del getter la semantica es mucho m脿s transparente y mantiene mejor la integridad de la data.

Setter

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:[],
  set skills(skills){
    this.languages = skills
  }
}

person.skills = ['ruby','rails','nodejs']

console.log(person.languages)

En suma los getters y setters nos permiten tener el control sobre las propiedades que podemos almacenar o recuperar

No me gusto mucho la explicacion de getters y setters. Me parecio corta y creo que no se dio a entender el uso real de estas funciones

Encontr茅 esto por la red y entend铆 la importancia de este tema

let persona = {
  nombre: 'Yeison',
  apellido: 'Daza',
  get nombreCompleto() {
    return `${nombre} ${apellido}`
  },
  set nombreCompleto(nom) {
    const palabras = nom.split(' ');
    this.nombre = palabras[0] || '';
    this.apellido = palabras[1] || '';
  }
}

persona.nombreCompleto = 'Camilo Sanchez'

console.log(persona.nombre); //camilo
console.log(persona.apellido); //sanchez

Compa帽eros les recomiendo ver este v铆deo con la explicaci贸n del los getters y setters antes de realizar el ejercicio del mediaplayer v铆deo . Me saco de muchas dudas

Getters y setters

Son funciones que se usan dentro de objetos para tener propiedades virtuales, podemos establecer valores que no exist铆an en las funciones.

Getter

Enlaza la propiedad de un objeto con una funci贸n que ser谩 llamada cuando la propiedad es buscada.

A veces es deseable permitir acceso a una propiedad que retorna un valor din谩micamente calculado, o si desea mostrar el estado de alguna variable interna sin requerir el uso de llamadas a m茅todos expl铆citos. En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simult谩neamente un getter ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con un setter para crear un tipo de pseudo-propiedad.

var o = {
  get latest () {
    if (this.log.length > 0) {
      return this.log[this.log.length - 1];
    }
    else {
      return null;
    }
  },
  log: []
}

Setter

La sintaxis set enlaza la propiedad de un objeto con una funci贸n que ser谩 llamada cada vez que se le asigne un valor.

var historial = {
  set actual(mensaje) {
    this.log.push(mensaje);
  },
  log: []
}
historial.actual='mensaje 1';
console.log(historial.log) //['mensaje 1']

historial.actual='mensaje 2';
console.log(historial.log)//['mensaje 1', 'mensaje 2']

En JavaScript, un setter puede ser usado para ejecutar una funci贸n para una propiedad especifica que ser谩 ejecutada al cambiar el valor. Los setters se suelen usar con getters para crear un tipo de pseudo-propiedad. No es posible tener un setter para una propiedad que tiene un valor real.Promise.race(iterable)

Devuelve una promesa que se cumple o rechaza tan pronto como una de las promesas del iterable se cumple o rechaza, con el valor o raz贸n de esa promesa.

Creo este tema es un poco complicado de entender, pero espero facilitar un poco las cosas con mi explicaci贸n. En lugar de pasar el this pasamos un nuevo objeto player = { ... } el cual contiene los m茅todos que nos interesa pasar, pero, sigue siendo un objeto. Es por eso que perdemos ciertas caracter铆sticas que tiene el this. Gracias a los getters y setters, recuperamos parte de esas caracter铆sticas, sin utilizar this lo que nos permite (en este caso) saber si el video esta muted y tambi茅n alterarlo.

b谩sicamente, la ventaja de los getters es que nos permiten modelar la informaci贸n antes de mostrarla, y que al codificar en vez de acceder a un m茅todo del objeto accedamos a un atributo virtual, y el set nos permite validar lo que se agregara la propiedad del objeto antes de asignarlo

En el ejemplo de esta clase dice que se est谩 restringiendo a los plugins de acceder a ciertas funcionalidades pero en realidad les est谩 pasando el objeto media dentro del objeto player, ah铆 est谩n todas las funcionalidades.

Lo correcto ser铆a crear una variable con el objeto media antes de definir el objeto player, y que el objeto player acceda a esa variable para definir sus m茅todos y propiedades. As铆 media queda por fuera del objeto, ser铆a privado, similar a la clase de Clousures.

const media = this.media;
    const player = {
        play: () => media.play(),
        pause: () => media.pause(),
        get paused() {
            return media.paused;
        },
        get muted() {
            return media.muted;
        },
        set muted(state) {
            media.muted = state;
        }
    };

Un ejemplo simple de como funciona getter and setter:

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  get lang() {
    return this.language.toUpperCase();
  },
  set lang(value) {
    this.language = value.toUpperCase();
  }
};
//
person.lang = "en";
//
console.log(person.lang);//EN

Segun la W3Schools: https://www.w3schools.com/js/js_object_accessors.asp

驴Por qu茅 usar getters y setters?

  • Da una sintaxis m谩s simple
  • Permite una sintaxis igual para propiedades y m茅todos
  • Puede asegurar una mejor calidad de datos
  • Es 煤til para hacer cosas detr谩s de escena.

Un ejemplo del uso de getters y setters

//Getters se utilizan para generar una propiedad virtual retornando un valor a traves de una funcion
//Setters permiten mutar o iterar las propiedades virtuales modificando propiedades dentro de una funcion

const person = {
    firstName :'Alessandri',
    lastName : 'Fonseca',
    get fullName(){
       return `${this.firstName} ${this.lastName}`
    },
    set fullName(value){
        const parts = value.split(' ')
        this.firstName = parts[0]
        this.lastName = parts[1]
    }
}
person.fullName = 'Jonh Smith'

console.log(person.fullName)```

esta clase no es muy clara
Aqu铆 les dejo un poco sobre la documentaci贸n para que la complemente con la clase y la puedan entender mejor
https://www.w3schools.com/js/js_object_accessors.asp

Este ejemplo que plantean aqu铆 en este link me parece bastante bueno para reforzar esta clase y entender un poco mejor los Getters y Setters: JavaScript Getters and Setters

Recomendaciones para aquellos que se les dificulte entender esta clase , apoy谩ndome de recursos de los comentarios de compa帽eros

  1. Leer la descripci贸n debajo del v铆deo
  2. Leer detalladamente la siguiente imagen -> visi贸n general
  3. Leer paso por paso la siguiente Infografia
  4. Volver a ver el video

Pensaras que el camino es un poco largo pero si no resolver谩 un 100% de tus dudas tendr谩s una visi贸n muy clara de este para proceder a darle una investigaci贸n mas amplia

Esta clase no la vi muy acertada para explicar el uso de getters y setters.

En lenguajes fuertemente tipado se comprende m谩s los setters y getters como en JAVA

No entend铆 nada de esta clase 馃槮

Pues siendo honesta, quede algo perdida. Tiene c贸digos actualizados que no hemos hecho en la clase y que si combinas el tuyo con el de esta clase, tienen muchas diferencias. Tratare de estudiar mas el tema. Gracias!!

Para quienes quedaron un poco inconclusos o con dudas de la explicaci贸n de los Getters y Setters recomiendo muuucho 茅ste video https://www.youtube.com/watch?v=TEzu31q9MVA 馃槃

Entend铆 mas en los aportes de la clase que al profesor, pero es que el profesor explica de una manera que te revuelve, tienes que regresar el video una y otra vez para entender lo que dice, hace falta una actualizaci贸n al curso

Despu茅s de leer documentaci贸n, otros videos y rever esta clase, les dejo el c贸digo comentado, puede que les ayude:

    // Ejecuta el plugin AutoPlay
    _initPlugins(){
      const player = {
        // this hace referencia a player que es el
        // objeto que ejecuta esta parte del codigo
        play: () => this.play(), 
        pause: () => this.pause(),
        media: this.media, // debe ser definido media, porque se pierde su referencia

        // get permite acceder a la propiedad muted desde fuera
        // en este caso "if (!player.muted)"" accede desde Autoplay.js
        get muted () {
          return this.media.muted;
        },

        // set permite modificar una propiedad desde fuera
        // en este caso  "player.muted = true" desde Autoplay.js
        // donde true es el valor que se le va dar a la propiedad
        set muted(value) {
          this.media.muted = value;
        },
      };
      
      this.plugins.forEach(plugin => {
        plugin.run(player);
      });
    };

Un poco enrredado el ejemplo para entender el concepto

Yo he estado usando los getters en Vuejs que son un poco m谩s complejos y son realmente 煤tiles.

  • reducen la complejidad del c贸digo.
  • evitan escribir propiedades de mas.
  • evita escribir funciones innecesarias.

Estos conceptos me quedaron muy poco claros鈥
Ser铆a mejor usar ejemplos m谩s sencillos y enfocarse solamente en un concepto.

Mis respetos para este profesor鈥 es demasiado crack programando, pero me toma ver cada clase 3 e incluso m谩s veces para poder entender y comprender lo que hace. 隆es una cosa de locos!

Quer铆a dejar un aporte, explicando la utilidad de todo esto con mis propias palabras, capaz a alguien lo ayuda a entender.

Si por ejemplo dentro de nuestro prototipo tenemos una propiedad 鈥渘ombre鈥 que no queremos que sea accedida a la ligera, en vez de compartir directamente la variable para que hagan lo que quieran con ella, podemos compartir unicamente un getter para que puedan leer ese valor, pero que no puedan acceder a el y modificarlo.

Tambien podemos hacer uso del metodo setter si por ejemplo queremos que si se pueda modificar esa propiedad 鈥渘ombre鈥 pero no queremos que pongan numeros ya que no tendria sentido para nuestro programa.

Estos m茅todos en resumen nos permiten proteger nuestras variables y controlar lo que se puede hacer con ellas. Es muy parecido a lo que son las variables privadas dentro de Java.

En el ejemplo del profesor, en vez de enviar todo el media player, envia un objeto con 煤nicamente las propiedades que quiere que los plugin puedan acceder, y utiliza set y get para controlar la propiedad muted.

Importante Si alguien tiene problemas para continuar con las modificaciones que hizo el profesor, una solucion a medias puede ser:

  • [ Ir a la seccion de Archivos y Enlaces de esta clase y descargar el proyecto y adaptar el tuyo a este (Yo lo hice asi) ]. Ahora bien, digo solucion a medias porque el archivo 鈥渋ndex.js鈥 como 鈥淢ediaPlayer.js鈥 tienen un pequehno error. Mas abajo la solucion final. Gracias por leer.

No se si alguien se dio cuenta que en el index hay c贸digo que no hab铆a puesto antes鈥

Les comparto un poco del problema que tuve con this en esta clase:
.

Estoy tratando de llevar el curso utilizando las sugar syntax Class la cual nos permite tener una sintaxis m谩s acercada a las clases de otros lenguajes. Por supuesto su definici贸n es diferente a la que usa el profesor, pero a mi gusto, hace m谩s sentido de acuerdo a lo que se est谩 tratando de hacer.
.
Un compa帽ero en otro comentario menciona que se le hace poco intuitivo como se comporta this en est谩 clase y comparto su inquietud, ya que no est谩 cumpliendo del todo la definici贸n de 鈥渢his es qui茅n ejecuta el c贸digo鈥. Escrib铆 el c贸digo lo m谩s parecido posible a lo visto en la clase y tuve un bug.

 _initPlugins () {
    const player = {
      playPause: () => this.playPause(),
      media: () => this.media,
      get muted() {
        return this.media.muted
      },
      set muted(value) {
        this.media.muted = value
      }
    }

    this.plugins.forEach(plugin => plugin.run(player))
  }

Al escribirlo as铆 mi video s铆 se autoreproducia pero con el sonido activado鈥
.
Me di cuenta que el comportamiento de los setters y getters cambia cuando se usan dentro de una definici贸n de Class(this fuera del setter/getter funciona igual que en la clase). C贸mo resultado de esto, al entrar a un setter o getter, estaba perdiendo el this que hace referencia a MediaPlayer y estaba obteniendo un this con referencia al player. Cuando usamos setter y getter con Class, el this s铆 se refiere al objeto en cuesti贸n que est谩 ejecutando el c贸digo(en este caso al player) y no al MediaPlayer. Por lo tanto usar los setters y getters como se ven en la clase, ten铆a un bug en mi c贸digo ya que this.media daba undefined (porque this en esta caso es el objeto player, el cual no tiene definida una propiedad media). Considero que esto es el comportamiento m谩s l贸gico, siguiendo con la idea de que this es quien ejecuta el c贸digo.
.

Record茅 en un curso anterior de JavaScript con Sacha que mencionaba que una pr谩ctica com煤n que se utilizaba para poder conservar un this era creando una variable llamada _this. Tuve que implementarlo de esta manera para poder obtener el mismo resultado que en la clase, aqu铆 el c贸digo que s铆 funciona:

 _initPlugins () {
    const _this = this
    const player = {
      playPause: () => this.playPause(),
      media: () => this.media,
      get muted() {
        return _this.media.muted
      },
      set muted(value) {
        _this.media.muted = value
      }
    }

    this.plugins.forEach(plugin => plugin.run(player))
  }

No s茅 si esto sea una soluci贸n 贸ptima, pero lo comparto por si alguien se encuentra en esta misma situaci贸n. 馃槂

por si te cuesta entender la clase : https://www.youtube.com/watch?v=TEzu31q9MVA

Esto es com煤n en Java. as铆 que esto no se hizo tan dif铆cil, por otro lado son poco comunes (creo que con un .prototype se obtiene un resultado mejor y m谩s entendible)

Un poco confuso las asignaci贸n por medio del igual, pero con otra revisi贸n quedara claro.

esta es la clase que mas me ha costado entender entre todas las que eh visto

Agradezco el aporte Filiberto Santill谩n,muy util

Me vi esto 2 veces lei resumenes y vi videos pero siendo sincero cuando veo esta clase me quedo mas perdido, creo que entiendo los getters y setters pero por lo que explicaron la gente en aportes y los videos de youtube lo que vi hoy en aqui no entiendo nada y eso que e llevado los cursos como se tienen que llevar en la ruta de javascript

Hola a todos, alguien mas le ha salido este error

Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

esto nunca lo habia escuchado

Genial gracias a esto podemos encapsular nuestro codigo y protegerlo

definitivamente este curso es algo enredado. me cuesta mucho entender.

Basicamente getters y setters son propiedades fantasmas, que podemos llamar para leer o cambiar propiedades de un objeto original manteniendo la privacidad de esas propiedades originales.

Un apunte extra, en esta clase hay un ejemplo para la diferencia entre una funci贸n flecha y una funci贸n an贸nima, si se cambia el atributo play o pause por una funcion an贸nima el c贸digo se rompe, debido a que el this que hace referencia en la funci贸n flecha es al objeto de MediaPlayer y el caso de la funcion an贸nima es al objeto de AutoPlugin. Compru茅benlo con un console.log al this en ambos casos

Los getters y setters son funciones que podemos usar en un objeto para tener propiedades virtuales. Se usan los keywords set y get para crear estas propiedades. Estas a ser funciones pueden llevar una validaci贸n de por medio y ser usadas con el operador de asignaci贸n como si fueran una variable m谩s dentro del objeto.

Un poco confundida =(

Excelente expliacion de los getters y setters

Interesantes funciones!!

I share my code!!

function MediaPlayer(config) {
  this.media = config.el;
  this.plugins = config.plugins || [];

  this._initPlugins();
}

MediaPlayer.prototype._initPlugins = function() {
  const player = {
    play: () =>this.play(),
    pause: () => this.pause(),
    media: this.media,
    get muted() {
      return this.media.muted;
    },
    set muted (value) {
        this.media.muted = value;
    }
  };

  this.plugins.forEach(plugin => {
    plugin.run(player);
  });
};

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

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

MediaPlayer.prototype.togglePlay = function() {
  if (this.media.paused) {
    this.play();
  } else {
    this.pause();
  }
};

MediaPlayer.prototype.mute = function() {
  this.media.muted = true;
};

MediaPlayer.prototype.unmute = function() {
  this.media.muted = false;
};

export default MediaPlayer;```

En conclusi贸n los getters and setters son propiedades de un objetos virtuales que parecen como una funci贸n " get muted() {} " pero no son funciones son propiedades en este caso del objeto player , en este caso sirven para validar o restringir las funciones(m茅todos) que puede usar el plugin de la class MediaPlayer鈥

鈥 Espero entiendan mis explicaciones si no me gustaria que me lo hicieran saber 馃槃鈥

rayos lo coloque en preguntas jajaja

Me causa conflicto cuando dice que va a crear una variable y pone "const". Ya que eso no es una variable. Por qu茅 el valor no cambia. Eso es constante. 馃憖馃憖

Me salvaron los comentarios, no entend铆a la utilidad con el ejemplo de la clase. Funciona muy similar a trabajar con valores privados dentro de una clase en java usando set y get.

la idea es clara, similar a otros lenguajes solo que estas propiedades son virtuales.

No solamente podemos pasar un valor a un getter, si tenemos que modificar varias propiedades podemos pasar un objeto o array.

const person = {
  name: "Jhean",
  lastname: "Pacheco",
  age: 27,
  job: "Frontend Developer",
  get fullPerson() {
    return console.log(`Hi, it's ${person.name} ${person.lastname}, I have ${person.age} years old and I work as ${person.job}.`);
  },
  set fullPerson(value) {
    person.age = value.newAge;
    person.job = value.newJob;
  }
}

console.log(person.fullPerson);

person.fullPerson = {
  newAge: 30,
  newJob: "FullStack Developer"
};
console.log(person.fullPerson);

valor virtual que podemos usar dentro de objetos que tienen propiedades virtuales

Actualmente se lanza en el 2021 los metodos privado y los atributos privados es2021

Por si alguien ten铆a la duda de c贸mo poner las flechas en vez de => y los de equidad estricta (===) y mucho m谩s, chequen Fira Code

En esta clase vamos a retomar el proyecto del reproductor de video.

Recordemos que en este punto nuestra funci贸n inicializadora de todos los m茅todos se ve as铆:

MediaPlayer.prototype._initPlugins = function () {
	this.plugins.forEach((plugin) => {
		plugin.run(this);
	});
};

Lo que hace es ejecutar la funci贸n Run de cada plugin, pasando como par谩metro a this, que en este caso es TODO nuestro Media Player

Podemos mejorar nuestro c贸digo pas谩ndole a los plugins solamente la informaci贸n necesaria (la que indiquemos expl铆citamente). Para hacer esto, solo tenemos que definir una nueva variable (player en este caso), que har谩 referencia a las funciones del Media Player.

MediaPlayer.prototype._initPlugins = function () {
	const player = {
		play: () => this.play(),
		pause: () => this.pause(),
		media: this.media
	};
	this.plugins.forEach((plugin) => {
		plugin.run(player);
	});
};

Ahora creamos un objeto llamado player y es al que tendr谩n acceso los plugins. De esta manera limitamos el acceso que tienen los plugins a nuestra clase.

Pese a que ya contamos con una funci贸n de muted en this.media o en nuestro prototipo, veremos otra forma de acceder a los valores de mute usando getters y setters en Javascript.

Entendamos un poco de qu茅 son los Getters y Setters.

Getters y Setters son propiedades del lenguaje que nos permiten crear propiedades virtuales y que se usan para obtener y definir variables de un objeto.

Los getters y setters se definen dentro de objetos y su sintaxis es la siguiente:

const obj = {
  get attribute(){
    // Optional validation/transformation
    return this.attribute;
  },
  set attribute(value){
    // Optional validation/transformation
    this.attribute = value
  }
}

Para invocarlos usamos la siguiente sintaxis:

obj.attribute         //ejecutar谩 el getter
obj.attribute = true; //ejecutar谩 el setter

馃 Hmmmm鈥 su uso es igual. 驴Entonces para qu茅 nos sirven?
Getters y Setters nos permitir谩n hacer validaciones o transformaciones de los valores que reciben o que env铆an.

El ejemplo b谩sico de Getters es el de nombre completo: imagina que tu objeto tiene nombre y apellido, sin embargo usas muy frecuentemente el nombre completo. Es a la hora de ejecuci贸n que tendr铆as que concatenar obj.nombre y obj.apellido. Peeeero鈥 qu茅 tal si creamos una propiedad virtual llamada nombreCompleto que har谩 la concatenaci贸n por nosotros. Es aqu铆 donde entran los Getters.

Los Setters tambi茅n sirven para procesar los datos enviador. Imagina que puedes hacer validaciones una sola vez y no cada vez que mandes un dato.

Volvamos a nuestro Media Player.

Ahora que sabemos para que sirven y c贸mo se usan los Getters y Setter implement茅moslos en nuestro Reproductor:

MediaPlayer.prototype._initPlugins = function () {
	const player = {
		play: () => this.play(),
		pause: () => this.pause(),
		media: this.media,
		get muted() {
			return this.media.muted;
		},
		set muted(value) {
			this.media.muted = value;
		},
	};

En este ejercicio no definimos validaciones, transformaciones ni alg煤n proceso, pero es solo un ejemplo se uso.

Esto me recuerda mucho al est谩ndar que maneja Java con Get y Set como funciones de clases.

Esto tambi茅n me recuerda las propiedades con decoradores

@property

en python/Django.

Los set y get son propiedades virtuales que no permite hacer cualquier tipo de logica, get no retorna y set atrapa cualquier valor, como los set y get no son funciones no se declara como una funcion si no como una propiedad y se asigna con un =

pero lo setter y getters no son tan nuevos ya que estos se podian utilizar al usar Object.create ademas de que tambien al usar prototype los puedes generar

const EXAMPLE = Object.create({}, {
    name: {
        set: function(name) {
            this.value = name;
        },
        get: function() {
            return this.value;
        }
    },
    datos: {
        value: function (name, age) {
            return `hola ${name} tu edad es ${age} a帽os`;
        }
    }
});

EXAMPLE.name = "Jorge";
console.log(EXAMPLE.name);

// usando el metodo value
const RESULT = EXAMPLE.datos("jorge", 23);
console.log(RESULT);

Yo recuerdo que se pueden usar de esa manera y no solo puedes usar set y get tambi茅n al generar lo con el Object.create tienes la opci贸n de utilizar value, lo que si entiendo es que actualmente se usa un poco de sugar syntax.

C贸digo del reto

https://tv8d9.csb.app/

Tambi茅n podemos pasar el set del muted de la siguiente manera un poco m谩s simplificada

player.muted = !player.muted;

Tambi茅n se puede asociar directamente las funciones de play, pause y el objeto media, sin utilizar arrow functions y funciona correctamente

MediaPlayer.prototype.initPlugins = function () {
	const player = {
		play: this.play,
		pause: this.pause,
		media: this.media,
		get muted() {
			return this.media.muted;
		},
		set muted(value) {
			this.media.muted = value;
		}
	}
	this.plugins.forEach(plugin => {
		plugin.run(player);
	});
};

Un articulo explicando Getters y setters, espero los sirva:
https://yeisondaza.com/entendiendo-getters-y-setters-en-javascript

En este rjemplo se explica muy bien estas propiedades!
https://www.arsys.es/blog/programacion/propiedades-get-set-javascript/

Un poco confundido pero como todo es cuestion de practica

Entend铆 mucho mejor 茅sta vez al ver la clase.
Pero le铆 茅ste blog (haz click) y me qued贸 m谩s claro!

Son acciones para poder declarar cosas que el usuario jam谩s tendr谩 acceso. Es algo que podemos crear y nos da posibilidades de operar cosas de una manera privada.

let person = {
  name: 'Andr茅s',
  lastname: 'Eslava',
  get completeName() {
    return `${nombre} ${apellido}`
  },
  set completeName(nam) {
    const words = nam.split(' ');
    this.name = words[0] || '';
    this.lastname = words[1] || '';
  }
}

person.completeName = 'Felipe Zuluaga'

console.log(person.name); //Felipe
console.log(person.lastname); //Zuluaga
Tengo una duda: Por qu茅 deber铆a usar las palabras reservadas get y set si puedo hacer los mismo con una funci贸n. ej.

var persona = {
  nombre: 'Arsys',
  apellidos: 'Internet',
  getNombreCompleto: function() {
    return this.nombre + ' ' + this.apellidos;
  }
}```
seria lo mismo qu茅:


var persona = {
nombre: 鈥楢rsys鈥,
apellidos: 鈥業nternet鈥,
get nombreCompleto() {
return this.nombre + 鈥 鈥 + this.apellidos;
}
}``````

Interesante como las propiedades virtuales pueden ayudarnos a generar nuevas funcionalidades sin necesidad de declararlas nuevamente, solo tomandolas prestadas.

Esta clase es particularmente util para entender la l贸gica de los gets y sets junto a las propiedades virtuales, con lo cual podremos ahorrar lineas de codigo y hacer m谩s entendible el mismo.

Encontre un blog con un post muy acorde para complementar esta clase.

Blog

para poder entender a profundidad el uso de get y set, recomiendo el curso de Js POO, y luego el intermedio, alli se explica mucho mejor y de manera practica

Excelente clase, esto es una herramienta buenisima鈥

Tuve que buscar informaci贸n adicional al tema.
El mejor ejemplo que encontr茅 para entender mejor estos conceptos:

let person = {
	firstname: 'Yamir',
	lastname: 'Minaya',
	get fullName(){
		return `${this.firstname} ${this.lastname}`;
	},
	set fullName(name){
		let words = name.toString().split(' ');
		this.firstname = words[0] || '';
		this.lastname = words[1] || '';
	}
} 

los setter y getter los logre entender por otro lado ya que aca se hace bolas uno, pasando propiedades de los Media; lo que entedi aca es que sirven para no setear directamente a la funcion/clase y asi usar funciones que solo llamamos para realizar los cambios que queremos o llamar funcionalidades.

Si quieres prepararte un poco previamente a la clase te recomiendo esta otra clase de otro curso que me pareci贸 buena para refrescar y entender mejor el tema y su prop贸sito video

Tarde bastante, pero al fin lo entend铆

Me parece que no est谩n tomando en cuenta la serie de comentarios negativos que tiene esta clase, el se帽or Kaufman tiene una p茅sima forma de ense帽ar.
Eh seguido toda la ruta de aprendizaje de la escuela de JavaScript que propone esta plataforma digital pero me parece que he aprendido mas en Youtube que aqu铆 mismo.

Este curso necesita actualizarse, la explicaci贸n que nos dan es muy pobre!

Aqui les va mi resumen para entenderlo dentro del contexto.

get se utiliza para acceder a atributos del objeto. Adem谩s, puede invocarse como un atributo en s铆 mismo. Podr铆amos utilizar player.muted, sin necesidad del par茅ntesis.

Lo que necesitamos aqui es acceder al valor muted, de la propiedad media de la clase.

Por ello, usamos get y retornamos un this.media.muted. Lo cu谩l nos permitir谩 acceder a la propiedad como un atributo.

get muted(){
return this.media.muted
}

Dado que this, est谩 referenciando al nuevo objeto player creado, y no al mediaPlayer.
Definimos media: this.media. Lo cu谩l asigna la propiedad media del mediaPlayer, al nuevo objeto Player construido.

media: this.media,

Una vez que tenemos acceso, podemos utilizar un setter para modificar el valor de dicha propiedad desde afuera. (desde el plugin autoPlay)

Por ello definimos

set muted(vaule) = {
this.media.muted = value
}

Dado que cambiamos el alcance de los plugins al nuevo objeto creado player; en lugar de llamar a player.muted(), que no existe como m茅todo en nuestro nuevo objeto directamente, podemos modificarlo como si fuera una propiedad gracias al getter.

Por ello escribimos dentro de autoPlay,

player.muted = true;

A lo cu谩l, le a帽adimos una condici贸n, que va a verificar que el video no est茅 muteado.

if (!player.muted) {
player.muted = true;
}

Acepto correcciones, apreciaciones o preguntas 馃槉

Estas son funciones que podemos utilizar dentro de objetos que nos permiten tener propiedades virtuales. No existe directamente en el objeto pero atraves de una funcion podemos calcular estos valores o establecer un nuevo valor.

Los getters y setters son funciones que tenemos dentro de objetos que nos permiten tener propiedades virtuales, es decir, no es un propiedad que existe directamente en el objeto pero a trav茅s de un getter o setter podemos correr una funci贸n que calcular谩 el valor.

Para complementar, ac谩 se explica con otro ejemplo: Aqu铆

Ufff esta no me la sab铆a, est谩 genial, me recuerda mucho a Laravel con Eloquent donde escribes funciones pero las usas como si fueran propiedades jaja

Getters y setters


Los getters y setters son funciones que podemos usar en un objeto. Estas las utilizamos para tener propiedades virtuales.

Para hacer un getters o setters utilizamos las palabras reservadas get y set.

  • Getters 鈫 Es una funci贸n de un objeto que nos trae datos de este.
  • Setters 鈫 Es una funci贸n de un objeto que nos deja meter datos en ese objeto.
get muted() {
   return this.media.muted
}

鈿 Los setters no los llaman como una funci贸n, sino que le pasamos un valor

AutoPlay.prototype.run = function (player) {
    if (!player.muted) {
        player.muted = true
    }

Qu茅 otro ejemplo de uso podr铆amos tener de una buena aplicaci贸n de getters and setters? A mi no se me ocurre ninguna ):

Esto es muy parecido a le que en Laravel se llaman Accessors y Mutators. :0

Getter y Setter sirve para cumplir la propiedad de Encapsulamiento del objeto en POO

Los getters y setters son funciones que podemos usar en un objeto para tener propiedades virtuales. Se usan los keywords set y get para crear estas propiedades.

Estas propiedades al ser funciones pueden llevar una validaci贸n de por medio y ser usadas con el operador de asignaci贸n como si fueran una variable m谩s dentro del objeto.

Como no me enter茅 realmente del concepto comparto un c贸digo muy sencillo ya que quiz谩s a alguien se le haga un poco complejo el tema de plugins, muted y dem谩s. Y lanzo la pregunta junto con el aporte, el c贸digo :

var persona = {
  firstName: "Nombre",
  lastName : "Apellido",
  language : "espa帽ol",
  get lang() {
    return this.language;
  }

set lang(lang) {
    this.language = lang;
  }
};

// Mostrar datos del objeto usando un getter:
document.getElementById("demo").innerHTML = persona.lang;

// Asignar una propiedad usando un setter:
persona.lang = "ingl茅s";

// Mostrar datos del objeto:
document.getElementById("demo").innerHTML = person.language;

Si en lugar de usar VAR para crear el Objeto persona usaramos FUNCTION tal y como se realiza con MediaPlayer, 驴ser铆a incorrecto, funcionar铆a y ser铆a una mala pr谩ctica?

Creer铆a yo entonces que son m茅todos que podemos usar en un objeto, donde get nos permite acceder a las props del objeto y set nos permite mutar estas props.

creando las propiedades virtuales

Quiz谩 la explicaci贸n parezca algo confusa, pero volviendo a ver el video se entiende mejor el tema.

Alguien me puede ayudar con esto, no me permite mover la carpeta plugins dentro de la carpeta assets.
Estoy trabajando con WSL y abriendo desde la terminal VSC con code .

Hola, a qu茅 se refiere en espec铆fico con 鈥減ropiedades virtuales鈥? Por qu茅 virtuales?

A volver a ver la clase !!

Esta clase me deja muchos sinsabores:

  • La declaraci贸n de media: this.media es poco intuitiva, (cualquiera podr铆a pensar que saltar铆a un error, porque dentro del objeto player no existe la propiedad media, as铆 que no podr铆a referenciar a this.media) considero que ser铆a mucho mejor y m谩s claro de esta manera:
_initPlugins() {
    const media = this.media

    const video = {
      play: () => media.play(),
      get mutedStatus() {
        return media.muted
      },
      set muted(value) {
        media.muted = value
      }
    }
    this.plugins.forEach(plugin => {
      plugin.run(video)
    })
  }
  • La sobrecarga al tener dos funciones (una get y otra set) del mismo nombre muted, 驴por qu茅 no usar nombres diferentes? Creo que ser铆a m谩s claro (como muestro arriba).

  • Dentro de AutoPlay.js no tiene sentido que preguntemos si el v铆deo est谩 muted o no, ya que debemos mutearlo antes de darle play. 驴No es mejor de frente mutearlo y ya? Algo as铆:

class AutoPlay {
  run(video) {
    video.muted = true
    video.play()
  }
}
  • Finalmente, es poco pr谩ctico usar los getters y setters as铆, se colige que tendr铆amos que crear un objeto nuevo con las funciones que necesitemos a cada plugin, aunque quiz谩s sea lo correcto.
Creo que en este ejemplo es m谩s simple y legible una funci贸n toggleMute() que haga un this.media.muted = !this.media.muted que el setter