this

Apuntes de esta clase:

Les paso una manera ligera de estar practicando this con imágenes y también un artículo que escribí.

https://www.instagram.com/p/B3Ujh2XBWtG/

https://filisantillan.com/this-en-diferentes-situaciones-y-su-comportamiento/

La clase dura 12 minutos. Tardé 43 minutos en terminarla, mientras pausa y verifico todo.
.
Genial

Gran clase y para las y los que quieran profundizar más en el tema: La serie de libros “You don’t know Javascript” tiene una de las mejores explicaciones a fondo de This y objetos que yo he leído.

https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/this-object-prototypes/README.md

La verdad que explica con claridad y me encanta el proyecto. Pero me sorprende que use prototype todavía, si bien nunca está de más saber cómo funcional la herencia prototipal, está totalmente en desuso y JS ya acepta class

Por fin me queda más claro this vaina

This

‌

Para empezar con esta parte tenemos que comentar el plugins AutoPlay para que no nos moleste.

‌

Vamos a crear un nuevo archivo en nuestra carpetas de ejercicios para aprender a usar this.

‌

¿Qué es this?

‌

Es un concepto que tienen muchos lenguajes de programación, sobre todo aquellos orientados a objetos. En Java, por ejemplo, this se refiere a la instancia de ese objeto , podemos escribir this.name. En JavaScript esto también es cierto pero existen contextos que cambian a esta propiedad del lenguaje. Veamos una de ellas, el Global Scope.

‌

This en Global Scope

‌

Si usamos el siguiente código: concole.log(this: ${this}) nos dirá que this es un objeto Window. Siempre que usemos this de forma global el browser lo va a asignar a Window.

‌

Dentro de una función

‌

Si usamos this dentro de una función con el siguiente código:

function whoIsThis() {
            return this
        }
console.log(`whoIsThis: ${whoIsThis()}`)

‌

Nos arrojará que this sigue siendo el objeto window. Esto sucede por que estamos ejecutando la función directamente, no está dentro de nada, simplemente cuando está sola el this será window. Esto pasa por defecto, excepto cuando usamos el 'use strict'.

‌

Usando el modo estricto

‌

Ahora lo probaremos usando el modo estricto de JavaScript.

'use strict'
function whoIsThisStrict() {
    return this
}
console.log(`whoIsThisStrict: ${whoIsThisStrict()}`)

‌

Si usamos el modo estricto nos arrojará que this es indefinido, undefined. También podemos limitar el uso estricto para que funcione nada más dentro de la función.

function whoIsThisStrict() {
    'use strict'
    return this
}
console.log(`whoIsThisStrict: ${whoIsThisStrict()}`)

‌

Acá sigue siendo undefined pero limitado dentro de la función.

‌

This en un objeto

‌

This se refiere a un objeto. Ese objeto es el que actualmente está ejecutando un pedazo de código.

‌

Hasta ahora lo hemos llamado directamente, ¿pero qué pasa si esta función estuviera metida dentro de un objeto? Este objeto es el que va a ejecutar nuestra función, por ende será nuestro this.

const person = {
        name: "César",
        saludar: function() {
          console.log(`Hola soy ${this.name}`);
        }
      };
person.saludar();

‌

Cuando llamamos a this en la función saludar hace referencia al objeto person que cuenta con su propiedad name.

‌

This cuando sacamos una función de un objeto

‌

Ahora, si sacamos la función saludar y la ejecutamos en una constante que se llame acción, el this representará otra cosa.

const accion = person.saludar; 
accion();

‌

Acá el navegador nos arrojará un error ya que no se puede leer a this.name por que no existen en el contesto global.

‌

This en el contexto de una clase

‌

Las clases no existen en JavaScript. No son iguales a las clases de otros lenguajes de programación. Es una buena forma de entenderlo si le llamamos clases por la funcionalidad que tienen, pero más adelante se explicará mejor este tema de herencia prototipal.

function human(name){
          this.name = name
      }
human.prototype.saludar = function() {
          console.log(`Hola me llamo ${this.name}`)
      }
const cesar = new human('César')
cesar.saludar()
‌

Cuando llamamos a this se refiere a la instancia cesar, esto es importante saberlo ya que cuando asignamos this.name = name lo hacemos sobre la instancia cesar no en el prototipo o clase human. Para poder usar this tenemos que hacer una instancia de la clase usando new y pasando los valores que queramos.

He añadido mas cosas interesantes como aporte de esta clase, me llevo algo de tiempo comprenderlos pero al final lo comparto con ustedes

    <script>
        // this en el scope global

        // (el objeto es window)
        console.log(`this en el scope global es: ${this}`)




        // this en el scope de una función  
        
        // (es el dueño de la función (quien la invoca), en este caso window)
        function whoIsThis() {
            console.log(`this en el scope de una función es: ${this}`)
        }
        whoIsThis()


        function whoIsThisInner() {
            function inner() {
                console.log(`this en el scope de una función interna es: ${this}`)
            }
            inner()
        }
        whoIsThisInner()




        // this en el scope de una función con modo estricto activado
        
        // evita la propagación de this desde el exterior
        // por lo que this será undefined (es decir no se manda o empaqueta)
        // ni de fuera hacia adentro, como dentro hasta mas adentro
        function whoIsThisStrictMode() {
            // el modo estricto por lo general es declarado al inicio del archivo, su función es evitar que se haga uso de variables no declaradas
            'use strict'
            console.log(`this en el scope de una función en modo estricto es ${this}`)

            function inner() {
                console.log(`this en el scope de una función interna en modo estricto es ${this}`)
            }
            inner()
        }
        whoIsThisStrictMode()

        const objetito = {
            nombre: 'Mongo',
            tipo: 'Perro'
        }

        // Sin embargo, yo puedo indicar explicitamente a una función cual será el contexto de this que deberá tomar en cuenta.
        whoIsThisStrictMode.call(objetito)




        // this en el contexto de un objeto
        
        // this será el dueño de la función, es decir quien la invoca, en este caso el propio objeto
        const persona = {
            nombre: 'Alejandro',
            saludar: function() {
                console.log(`Hola, me llamo ${this.nombre}`)
            }
        }
        // saludar se invoca a partir del objeto persona (this = objeto persona)
        persona.saludar()





        // this cuando sacamos a una funcion de un objeto
        
        // se pierde el contexto del this, puesto que la referencia se invoca desde un contexto diferente al objeto
        const accion = persona.saludar
        accion()
       





        // this en el contexto de una clase

        // En este caso this es el propio objeto
        function Animal(nombre) {
            this.nombre = nombre
        }

        Animal.prototype.saludar = function() {
            console.log(`Hola dueño me llamo ${this.nombre}`)
        }

        const mongo = new Animal('monguito')
        mongo.saludar()




        // this en el contexto de una función controladora de evento

        // this es el propio elemento que activo el evento
        const boton = document.querySelector('#btn-1')
        boton.addEventListener('click', function(event) {
            console.log(`this en el scope de una función controlador de evento es ${this}`)
        })





        // this en scope de una función que procesa el event loop (asincronas)

        // los procesos que le son delegados al navegador, this es el propio navegador, es decir window
        const boton2 = document.querySelector('#btn-2')
        boton2.addEventListener('click', function(event) {
            console.log(`this el el controlador de evento es ${this}`)

            setTimeout(function() {
                // Aquí this salta de un contexto a otro
                console.log(`this en una función asincrona, que le es delegada al navegador ${this}`)
            }, 1000)
        })
    </script>

Hola, tengo una duda, tu comentas que para escribir funciones se debe de hacer por medio de prototipos, pero que hay de hacerlo asi:

function Person(nombre,edad){
  
  this.edad = edad;
  this.nombre = nombre;
  
  this.getEdad = function(){
    return this.edad;
  }
  
  this.getNombre = function(){
    return this.nombre;
  }
}

var angel = new Person('Angel',28)

console.log(angel.getNombre())

Hola soy Gabriel 😛

Un caso adicional a los mencionados por el profesor, es el uso del this en eventos, en este caso this se refiere al objeto del DOM en el que se accionó el evento. Ejemplo:

<button onclick="this.innerHTML = Date()">The time is?</button>

Al hacer clic en el botón cambiará el valor del atributo innerHTML del botón que es a quien se reconoce como this.

Hoy en día ya lo podemos hacer así

class Person{
  constructor(name) {
    this.name = name;
  }
  saludar() {
    console.log(`Hola, me llamo ${this.name}`);
  }
}

const angela = new Person('Angela');
angela.saludar();

me gusto esta clase la entendí mejor , aunque la vi varias veces.

this es el equivalente a usar self en python

Opa!, finalmente creo que entiendo… el código que escribimos tiene una estructura de arbol… se va construyendo rama por rama. Si estoy en rama 1, y escribo una funcion que usa this justo cuando se esta leyendo esa rama, _this _va a hacer referencia a rama 1.

Ahora, si estoy en rama 2, y señalo que se ejecute una función que está en rama 1, el _this _de la función que está en rama 1 me va a devolver rama 2.

Es ser consciente del lugar donde estás parado, dentro de este arbol, en cada linea de código.

El modo estricto en JavaScript https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Modo_estricto

javascript como lenguaje no utiliza el concepto de clases, pero podemos adaptar una función que funcione como constructor emulando las clases, sobre este constructor generar unos métodos utilizando el prototype y luego instanciar la función constructora con new. Si me equivoco me sacan del error porfa :’)

Cuando se usa una arrow function en un objeto se pierde el contexto de this. aquí un ejemplo

person = {
        name : "Luis Miguel",
        saludar : () => {
            console.log("Hola mi nombre es : " + this.name)
        }
}   

eso devolvería

Hola mi nombre es : 

Según MDN, “En general, el valor de this está determinado por cómo se invoca a la función. No puede ser establecida mediante una asignación en tiempo de ejecución, y puede ser diferente cada vez que la función es invocada.”
.
Pero yo lo entendí así: This es cómo cuando te conviene contar una historia o no. A veces puedes ponerte en el papel de primera persona, otras en el papel de tercera persona. Todo dependiendo el contexto cómo cuentes la historia.
.
Global Scope & Function Scope es cuando se hace referencia a Window.
This de una Clase, se hace referencia a la instancia generada por el constructor
This dentro de una función, que está contenida en un objeto, hace referencia a ese objeto

This es objeto, que para acceder a el, es this.objeto.

Puede ser global o en un modo strict.

Es importante ver que el this tienen un comportamiento especial en las funciones flecha, diferente a las funciones normales , donde el this no llama al objeto invocador, si no al objeto del prototype donde se definio

http://www.etnassoft.com/2016/06/23/las-funciones-flecha-en-javascript-parte-2/

El this era un problema para mi porque aunque lo usaba al programar, no entendía del todo cómo funcionaba, ahora lo entiendo perfectamente. Muy buena clase.

Cada vez me gusta mas Javascript

Al fin me queda super claro este tema.

alguien me puede puede sacar de una duda? no se si sea por la fecha que de grabó la clase o si estoy algo perdido…pero el profesor en mas de una ocasión ha mencionado que las clases en JavaScript no existe, sin embargo, en cursos anteriores y en Internet se encuentra como usar clases en el lenguaje y utilizar un constructor, asi que existen o no existen? prototype y constructor se pueden usar para lo mismo?

Aqui hay documentacion que puede ayudar: Aqui

es medio frustante, yo vengo de toda la linea de aprendizaje de JS, y desde que comence con este curso me e perdido totalmente, no logro asimilar todo el contenido y hay muchas cosas que me confunden, siento que falta un curso de JS antes de este para poder seguirle el ritmo al profesor

en el curso de fundamentos de js, se explica un poco mejor el concepto de this

Amigos no se menciona en el vídeo pero aquí lo dejo para que lo tengan en cuenta:

• En las funciones clásicas el contexto se define al llamarlas y en las funciones flechas se define al declararlas.

El modo estricto hace mmuchas más cosas que solo limitar el scope;
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Modo_estricto

Pero en ECMAScript 2015 si existen las clases. Por qué no se toman en cuenta ):?

Como comprobe que this se refiere al objeto que lo ejecuta? De esta manera:

  function saludarGlobal() {
            console.log(`Hola soy ${this.name}`)
        }
        
        person2 = {
            name: 'Eduardo',
            saludar: saludarGlobal
        }

        person2.saludar();

Resultado: Hola soy Eduardo 🤯

Entendí un poco mejor con este video:
https://www.youtube.com/watch?v=-NwaKH9POBk

Falto explicar la manera en la que las arrow function trabajan con el this.

this >> se refiere a la instancia de un objeto, es la mejor definición que he escuchado, simple

Yo conozco la función bind(), que se usa para “atar” el this de la clase a los métodos de este. Esto se hace de la siguiente manera

class Person {
  constructor(){
    this.method1 = this.method1.bind(this) 
  }
}

This es un concepto que tienen muchos lenguajes de programacion. Sobre todo los POO. This se refiere a la instancia de esa clase cuando creamos un objeto. En JS tambien se aplica en esto. Pero tiene otros conceptos donde tienen otros valores diferentes y hay que conocerlos.

• Scope Global

This hace referencia al elemento window mientras usamos en el Scope Global

• Function Scope

En este caso volvemos a obtener el objeto window si es que la ejecutamos directamente. Esto no pasa si usamos el Strict Mode (que se activa escribiendo la cadena ‘use strict’ En este caso del modo estricto nos dice que el THIS es UNDEFINED. (Este modo nos ayuda a evitar algunos errores en el desarrollo).

• Contexto de un Objeto

Si ejecutamos THIS en la funcion de un objeto podemos ver que esta hace referencia al Objeto recien creado. Ya que la funcion la ejecuta un objeto pero hace referencia al OBJETO que la esta ejecutando.

• Cuando sacamos la funcion del objeto

Aqui no nos arroja ningun resultado, ya que solo se esta llamando directamente desde la variable al que se le asigno la funcion y no existe ningun objeto.

• Contexto de una clase

En JS no existen clases como en Java pero es muy parecido a lo obtenido con el valor ‘new’.

En la clase todos los valores referenciados utilizan THIS que tiene un valor vacio ya que representa el parametro.

Básicamente, .this difiere segun el contexto en el que sea usado.

https://platzi.com/tutoriales/1642-javascript-profesional/7382-use-strict/
Les dejo este tutorial que hice explicando 'use ‘strict’

Con este video podrán complementar lo que es es .this super recomendado! ☺

asd

Excelente Explicación

Excelente clase… sigamos

Buena explicación

Buenísimo, falto con el bind y el call, espero verlos más adelante

Se ve mucho mejor la playera negra, como que la amarilla no pinta tanto y es muy llamativa.

// this en el contexto de una "clase"
      class Person {
        constructor(name, lastname){
          this.name = name
          this.lastname = lastname
        }

        saludar() {
          console.log(`Hola soy ${this.name} ${this.lastname} desde clase`)
        }
      }

      const angelus = new Person('Angelus', 'Piloto')
      angelus.saludar()

este video lo esperaba desde hace mucho 😄

Mucho mejor el profesor en esta clase.

gran clase!

Maravilloso

Excelente clase, ya empiezo a tomarle ritmo al profe

pues la verdad yo no entendi muy bien asi que tuve que buscar en la web mas informacion para tener claro este concepto de this

El this es el contexto, pero hay que diferenciarlo del contexto de ejecución. El contexto es el valor que tiene la variable this en algún momento de la ejecución, es decir cual es el objeto que esta ejecutando una función. Mientras que el contexto de ejecución es el Scope, es decir el entorno que le da el significado a las variables

this toma el valor del contexto donde nos encontremos

Si se te hace complejo, esto depronto te sirva:
Segun entiendo, el alcance del this, depende de su Scoupe, por ejemplo, en ejemplo del profesor yo agrege una variable “name” antes del objeto person, y esto sucedia con o sin el this:
Con this:

let name = 'Carlos';
       const person = {
           name : 'Ana',
           age: '20',
           saludar:function(){
            console.log(`Hola soy ${this.name}`);
         }
       }
       person.saludar();//el resultado es: Hola soy Ana

Sin el This

let name = 'Carlos';
       const person = {
           name : 'Ana',
           age: '20',
           saludar:function(){
            console.log(`Hola soy ${name}`);
         }
       }
       person.saludar();//El resultado es Hola soy Carlos

no me funciona el import y export ya trate de varias maneras y me sigue saliendo error, alguien me podria ayudar?

Uncaught SyntaxError: Cannot use import statement outside a module

Resumen de la clase:
This

• Se refiere a un objeto.
• El objeto depende de cómo this sea usado.
• Ese objeto es el que está ejecutando un pedazo de código.

This en Global Scope

• Cuando se usa this de forma global hace referencia al objeto Window.

This en Function Scope

• Cuando usamos this en una función y ejecutamos la función de forma directa this hace referencia al objeto Window.

Usando el modo estricto

• Este modo nos sirve para evitar errores, mejor en desarrollo que en producción…
• Con este modo this en una función nos devolverá undefined.

function whoIsThisStrict() {
    'use strict'
    return this
}
console.log(`whoIsThisStrict: ${whoIsThisStrict()}`)

This en un objeto

• Cuando llamamos a this desde una función contenida en un objeto, this se hace referencia a ese objeto
• Cuando llamamos a this desde una función definida fuera del objeto pero ejecutada por un objeto, this se hace referencia a ese objeto

const person = {
    name: "Max",
    saludar: function() {
    console.log(`Hola soy ${this.name}`);
    }
};
person.saludar();

• Cuando llamamos a this desde una función definida fuera del objeto pero ejecutada por un objeto, this se hace referencia a ese objeto

function saludarGlobal() {
    console.log(`Hola soy ${this.name}`)
}
person2 = {
    name: ‘Emma’,
    saludar: saludarGlobal
}

person2.saludar();

This cuando sacamos una función de un objeto

• En este caso this volverá a referenciar el objeto Window.

This en el contexto de una clase

• Cuando usamos a this desde una “clase”, se hace referencia a la instancia generada por el constructor.
• No se hace referencia al objeto prototipal (“la clase”).
• Recuerda: las clases no existen en JS. Es azúcar sintáctica
• Son funciones especiales.

function human(name){
    // this = {}
    this.name = name
}
// agregamos un metodo utilizando el prototype
human.prototype.saludar = function() {
    console.log(`Hola me llamo ${this.name}`)
}
// para instanciar un objeto usamos new
const andy = new human('Andy')
andy.saludar()

En este video el profe Sacha explica THIS de una forma muy completa y sencilla.
https://www.youtube.com/watch?v=bS71_W_BDFE&list=PLfWyZ8S-XzecAttp3QU-gBBXvMqEZTQXB&index=12

agrego un ejemplo: con arrow apunta a window con o sin strict mode.

Es la forma de hacer referencia al contexto en el que me encuentro y ese contexto contiene una pieza de código a ejecutar, este contexto suele ser un objeto.

This es un concepto clave para poder comprender mejor un lenguaje de programacion y en particular en este curso this es mitad del curso porque se utiliza en todo.

.THIS

This se refiere a un objeto, ese objeto es el que a ctualmente esta ejecutando un pedazo de código.

This es un concepto que utilizan muchos lenguajes de progamacion, (mas que todo los lenguajes que son orientados a objetos) this tiene muchos ambitos en el lenguaje de JavaScript.

[[art_js_scope]]

El resultado de esto nos arroja que this es un objeto. Siempre que estamos usando this en el contexto global, el browser lo va a asignar a window.

console.log(`this: ${this}`);
//En consola vamos a tener:
//this: [object window]

El resultado de esto nos arroja que this es un objeto. Se esta ejecutando una función directamente, es decir, la estamos llamando sin un obejto previo (se ejecuta directamente) y el motor de js le asigna el valor de (object window) por default.

function whoIsThis(){
	return this;
}
console.log(`whoIsThis(): ${whoIsThis()}`);
//En consola vamos a tener:
//this: [object window]

El resultado de esto nos arroja que this es undefined. Strict mode nos sirve para evitar errores, el motor de js nos va a ayudar a identificar errores. [[art_js_profesional_strict_mode]]

function whoIsThisStrict() {
	'use strict';
	return this;
}
console.log(`whoIsThisStrict(): ${whoIsThisStrict()}`);
//La respuesta sera:
//whoIsThisStrict(): undefined

El resultado de esto nos arroja que this es un objeto, en este caso this es person porque el this se esta ejecutando dentro de un objeto. (This se refiere al objeto que actualmente esta ejecutando el pedazo de código)

consts person = {
	name: 'Gabriel',
	saludar: function () {
		console.log(`Hola soy ${this.name}`)
	}
};

person.saludar();
//La respuesta sera:
//person.saludar(): Hola soy Gabriel

El resultado de esto NO nos arroja nada sobre this, esto es porque la función ya no es ejecutada por el objeto person, la función queda fuera del ambito del objeto, entonces this ya no se refiere a person Gabriel.

const accion = person.saludar;
accion();


//La respuesta sera:
//person.saludar(): Hola soy 

[[art_js_profesional_clases]]
En el contexto de objetos que fueron instanciados de una clase, This se va a referir a la instancia de ese objeto. En este caso estamos asignando un valor a name desde la instancia, NO desde el objeto protitpal

//Esto funciona como un CONSTRUCTOR
//Los nombres de las clases en JS se escriben la primera con MAY
function Person (name) {
	this.name = name;
};

person.prototype.saludar = function () {
	console.log(`Hola me llamo ${this.name}`)
};

const angela = new Person("Angela");
angela.saludar();

//La respuesta sera:
//person.saludar(): Hola me llamo Angela

Me acuerdo que vi una lecture de MIT en yt de hace ya 2 decadas como del 2001 en la que explicaban class inheritance con la clase person con sus params como nombre edad y lo de siempre, pero la clase person le heredaba a hombre y mujer, que tenia un parametro genero. Ese profe se veia bien viejito creo que alcanzo a pensionarse antes que lo funaran jajaja. That didnt age well, como dicen en ingles.
Afortundamente el pobre no declaro los atributos trabajo con instancias con atributo policia o piloto para hombre y ama de casa o secretaria para mujer. En ese caso le mandan cuchillos ensangrentados y balas al correo, incluso en esa epoca eso estaba mal. No condono la discriminacion de ningun modo, pero cada vez que veo una leccion explicando clases me acuerdo de ese video. Creo que por eso ahora utilizan la clase animal con clases hijas perro gato y persona.

esta clase me gustó mucho

Como buen complemento a esta clase y además para saber un poco mas sobre this y strict mode les recomiendo los siguientes videos: This en Javascript y Use Strict

Desde el MDN:

Clases

Last modified: 4 ene 2022, by MDN contributors

Esta clase se ha quedado un poco vieja

Una nota sobre new, esta palabra es la que indica si estamos hablando de una función normal o de un constructor. Por lo tanto, cambia el this.

Los constructores (que por convención son nombrados con mayúscula) crean implícitamente un objeto this que retornan

function Persona(name){
	const this = {} //ocurre implícitamente
	this.name = name
	return this //ocurre implícitamente
}

Este objeto this solo es creado cuando usamos la keyboard new.

const Mary = new Persona('Mary')
// mary es {name: mary}

Si no la usamos:

const Mary = Persona('Mary')
// may es undefined

Con las clases (que son prototipos disfrazados) ocurre lo mismo. Esta es una razón por las que algunas personas prefieren usar factories en vez de constructores/clases.

como se llama la app que le permite cambiar el nombe de las variables o funciones en todos los sitios donde sea nombrada

Hoy se me hizo fácil entender como funciona this, gracias a que ayer duré como dos horas estudiándolo XD

Esta clase debió estar antes de comenzar a hacer el player. No creen?

Aqui hay otro widget que les puede ayudar a descubrir que es this

const person = {
  whoami: function () {
    return this;
  }
};
console.log("person this", person.whoami());

// this en el scope global
    console.log(`This: ${this}`);

    // this en el scope de una funcion
    function whoIsThis() {
        return this;
    }

    console.log(`whoIsThis(): ${whoIsThis()}`);

    // this en el scope de una funcion en strict mode

    function whoIsThisStrict() {
        "use strict";
        return this;
    }

    console.log(`whoIsThisStrict(): ${whoIsThisStrict()}`);
    // this en el contexto de un objeto
    const person = {
        name: 'Gabriel',
        saludar: function () {
            console.log(`hola soy ${this.name}`);
        }
    };
    person.saludar();
    // this cuando sacamos una funcion de un objeto
    const accion = person.saludar;
    accion();

    // this cuando sacamos una funcion de un objeto
    class Person {
        constructor(name) {
            this.name = name;
        }

        saludar() {
            console.log(this);
            console.log(`Me llamo, ${this.name}`);
        }

    }

    persona = new Person('Kevin');
    persona.saludar()

HTML al inicio de la clase:

    <head>
        <title>This</title>
    </head>
    <body>
        <a href="./index.html">Go back</a>
        <p><em>Abre la consola</em></p>
        <p>
            This se refiere a un objeto. Ese objeto es el que actualmente esta ejecutando un pedazo de código
        </p>
    </body>
    <script>
        // this en el scope global
        // this en el scope de una función  
        // this en el scope de una función con modo estricto activado
        // this en el contexto de un objeto
        // this cuando sacamos a una funcion de un objeto
        // this en el contexto de una clase

    </script>
</html>

console.log(whosthis())

Result: DA-DY YAN-kEE

Les dejo el reto de la clase anterior: Github

Lo que intente hacer es que unos botones por defecto se desplieguen en un div contenedor que luego le especifico a un parámetro de MediaPlayer (pannelControl), entonces lo armo de manera interna, con parámetros por defecto y luego lo despliego con player.displayPannelControl, pero también quedara habilitado para que personalizar los botones con sus respectivas funciones de play/pause y mute/unmute

import MediaPlayer from './MediaPlayer.js'
import AutoPlay from './plugins/AutoPlay.js'

const movie = document.querySelector('.movie')
const pannelControl = document.querySelector('.pannel-control')

const player = new MediaPlayer({ 
  media: movie, 
  pannelControl: pannelControl, 
  plugins: [
    new AutoPlay()
  ] 
})

player.displayPannelControl()

8. this

¿Qué es this?

“This”, es una palabra clave que se comporta como una función y hace referencia al objeto actual. En javascript this se comporta un poco diferente en Javascript en comparación con otros lenguajes. Además tiene algunas diferencias entre el modo estricto y el modo no estricto.

En JavaScript this se refiere a un objeto. Ese objeto es el que actualmente está ejecutando un pedazo de código, es decir depende de donde se ejecute this su contexto puede variar

This en el contexto global

Cuando llamamos a this en el Global Scope o Function Scope, se hace referencia al objeto window , está asignación la hace el motor de JavaScript, A excepción de cuando estamos en strict mode que nos regresará undefined. El strict mode sirve para evitar problemas que nos puede surgir en ciertas ocasiones. Lo que se intenta es que al usar strict mode es que el motor de javascript nos ayude, y que dichos problemas salgan en la fase de desarrollo

/////////////////////////////////////////
// ==this en el scope global==
/////////////////////////////////////////

console.group('This en el Scope Global');

// 1. this fuera de una función es el objeto window
console.log(`this es: ${this}`); // window

// 2. this en el scope de una función es el objeto window
function whoIsThis() {
	return this;
}
console.log(`whoIsThis ${whoIsThis()}`);// window

// 3. this en el scope de una función en strict mode es undefined
function whoIsThisStrict() {
	'use strict';
	return this;
}
console.log(`whoIsThisStrict:  ${whoIsThisStrict()}`);// undefined
console.groupEnd();

This en el contexto de un objeto

• Cuando llamamos a this desde una función que está contenida en un objeto, this se hace referencia a ese objeto. Pero si se ejecuta ese this contenido en un scope global se perderá el this.

/////////////////////////////////////////
//  == this en el contexto de un objeto=
/////////////////////////////////////////

// this dentro de un objeto
console.group('This en el contexto de un objeto');

const person = {
	name: 'Gabriel',
	saludar: function () {
		return `Hola soy ${this.name}`;
	},
};
console.log(`person.saludar(): ${person.saludar()}`); // Hola soy Gabriel

// this cuando sacamos a una función de un objeto
const action = person.saludar;
console.log(`action(): ${action()}`); // undefined
console.groupEnd();

This en el contexto de una clase

Cuando llamamos a this desde una “clase”, se hace referencia a la instancia generada por el constructor.

/////////////////////////////////////////
// this en el contexto de una "clase"
/////////////////////////////////////////

// this en el contexto de una "clase", se va referira a la
// instancia de la clase

function Person(name) {
	this.name = name;
}
Person.prototype.saludar = function () {
	return `Me llamo ${this.name}`;
};

// instancia de la clase
const angela = new Person('Angela');
angela.saludar; // Me llamo Angela

En resumen

this se refiere a un objeto, ese objeto es el que actualmente está ejecutando un pedazo de código.
No se puede asignar un valor a this directamente y este depende de en que scope nos encontramos:

Es interesante como en Node (o utilizando extensiones de VSCode como Code Runner, que utiliza Node para ejecutarse), el objeto this retorna al objeto global en lugar de retornar al objeto window.

En Node, el objeto global contiene las variables de entorno, metadatos de Node, constantes como __dirname o __filename, etc.

Que mal profesor, no se le entiende nada… 😦

JavaScript fue diseñado de modo que fuera fácil para programadores novatos, y puede haber operaciones semánticas que deberían ser errores pero son tratadas como libres de error…
les dejo este link para saber mas sobre el uso de
‘strict mode’

El valor de this puede cambiar si se usa dentro de una arrow function. Para una función normal, this sera el objeto que esta llamando a dicha función (lo que este a la izquierda del punto). Para una arrow function, this toma el valor del contexto circundante actual. En donde fue definida la función, “afuerita”

this: se refiere al objeto donde se esta ejecutando un pedazo de codigo.
this en Globalscope: this sera igual al objeto windows.

//this en el scope global
      console.log(`this: ${this}`);
//this=windows

this en function scope: this sera igual a windows si la funcion esta inicializada en el scope global.

function whoIsThis() {
//this = windows;
        return this;
    }

En el contexto de un objeto: this hara referencia a el objeto que esta ejecutando el pedazo de codigo.

const person = {
//this = person;
        name: 'Gabriel',
        saludar: function() {
          console.log(`Hola soy ${this.name}`);
        },
      };

this en el contexto de una "clase

function Person(name) {
        // this = {} osea que no tiene valor
        this.name = name;
      }

      Person.prototype.saludar = function() {
        console.log(`Me llamo ${this.name}`);
      };

      const angela = new Person('Angela'); //this = angela;
      angela.saludar();

en el caso de que queramos elegir quien será this podremos usar function.prototype.call o function.prototype.apply o function.prototype.bind,

Más información sobre This.
https://www.w3schools.com/js/js_this.asp

Por que si Person es un objeto se escribe en forma de funcion?

THIS tiene diferentes valores, dependiendo de dónde se use:

1. En un Método, this se refiere al objeto propietario.
2. Solo, se refiere al objeto global (windows)
3. En una función se refiere al objeto global (windows)
4. En una función en modo estricto, this es undefined.
5. En un evento, this se refiere al elemento que recibió el evento.
6. Métodos como call() y apply() this puede referirse a cualquier objeto.

this

En la mayoría de los lengajes de programación, this, hace referencia a la instancia de la clase que se está utilizando, en el caso de JavaScript, sabemos que no existen las clases, generalmente nos referiremos a instancias pero de protoypes, realmente puede tener muchas variantes, veamos algunas de ellas:

En el contexto global, this hace referencia directamente al window

console.log(this) // window

En el contexto de una función, cuando this está siendo llamada directamente desde el window, será window, sí y solo sí no estamos utilizando strict mode

function whoIsThis() {
  return this
}
console.log(this) // window

En strict mode, this será undefined, podemos usarlo para solventar algunos errores que nos puede ocasionar el ejemplo anterior.

'use strict'
function whoIsThis() {
  return this
}
console.log(this) // undefined

En un objeto, this hace referencia a la instancia del propio objeto

const person = {
  name: 'uzi',
  greeting: function() {
    console.log(`Hola soy ${this.name}`) // Hola soy uzi
  }
}
person.greeting()

Funciona de manera similar que en las clases, pero tomemos en cuenta que en ambos casos, this hace referencia a la instancia, no al objeto prototipal:

function Person(name) {
  this.name = name
}
Person.protoype.greeting = function() {
  console.log(`Hola me llamo ${this.name}`)
}

const uzi = new Person('Uzi')
uzi.greeting() // Hola me llamo Uzi

this

Es un concepto que tienen muchos lenguajes de programación, sobre todo aquellos que son OOP, This se va a referir a la instancia de esa clase cuando crees un objeto.

En Js también se usa el this de esta forma, pero se puede llegar a utilizar en otros contextos y se llega a comportar de manera diferente.

this se refiere a un objeto. Ese objeto es el actualmente está ejecutando un pedazo de código.

En este caso es igual al objeto Window

console.log(`this: ${this}`)

En este caso obtenemos que this es window, lo que sucede es que estamos ejecutando una función directamente, cuando hacemos eso el motor de JS le va a asignar que this va a ser window. Es un valor por default.

function whoIsThis() {
    return this
}

console.log(`whoIsThis: ${whoIsThis()}`)

Esto no pasaría si estuviéramos utilizando JS en un modo que se llama el strict mode, este un modo que se puede encender así:

function whoIsThisStrict() {
      'use strict'
      return this
}

console.log(`whoIsThisStrict: ${whoIsThisStrict()}`)

Con strict mode podemos evitar algunos errores.

// this en el contexto de un objeto
const person = {
      name: 'Gabriel',
      saludar: function () {
           console.log(`person.saludar: Hola soy ${this.name}`)
      }
}

person.saludar()

Si ejecutamos this cuando lo sacamos de una función de un objeto, nos dará undifined, ya que la función que estamos ejecutando afuera como accion no se está llamando dentro del contexto de un objeto, simplemente se está llamando completamente similar a como hicimos con la función whoIsThis

const accion = person.saludar
accion()

En este caso, this se va referir a la distancia de un objeto

function Person(name) {
      // this = {}
      this.name = name
}

Person.prototype.saludar = function () {
      console.log(`Me llamo ${this.name}`)
}

const angela = new Person(`Angela`)
angela.saludar()

// class - ecmascript 6
 class OtherPerson {
       constructor(name) {
           this.name = name
       }

        saludos() {
            console.log(`Me llamo ${this.name}`)
        }
}

const pedro = new OtherPerson(`Pedro`)
pedro.saludos()

Brutal esta clase, this es mucho mas claro. Una vez mas las cosas dejan de ser magia y se encuentra el porque.

va yendo!!

no entiendo por que enredan tanto a la gente esta claro que definimos el constructor como si fuera un método pero si utilizamos una sintaxis adecuada podemos hacer cosas como esta

class animal {
constructor (especie,edad,color)
{
this.color = color ;
this.epecie = especie ;
this.edad= edad;
}
}

tenemos un constructor y tenemos una estructura valida y lo mas importante que se entiende facilmente

Explicación y recapitulación de This.

Me gusto mucho esta clase

Se despejaron muchas dudas. Gracias 😃

this se refiere a un objeto, ese objeto es el que actualmente está ejecutando un pedazo de código.

Finalmente pude entender bien a this!!!

¡Toda la vida trabajando con clases y sólo las hacía sin saber lo que realmente eran! Ahora entiendo qué es this D:

this

Veo que para objetos igual persiste el que si yo guardo la referencia de una funcino de objeto y luego sera ejecutada entonces el this es window

 function Person(nombre) {
            this.nombre = nombre
        }

        Person.prototype.saludar = function() {
            console.log(`Hola ${this.nombre}`)
        }

        const person= new Person('Hernan')
        person.saludar()
        console.log('===')
        const saludo = person.saludar
        saludo()

hay gente q incluso viendo los cursos anteirores no saben que es el strict mode debio explicarlo para evitar confusiones… y así otros puntos mas.
strict mode: es una caracteristica que tiene js que indica entre otros que no se pueden usar variables que no se hayan declarado y se llama de la siguiente manera “use strict”; por esta razón al profesor le sale undefined.