this

8/42
Recursos
Transcripci贸n

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:

  • Cuando llamamos a this en el Global Scope o Function Scope, se hace referencia al objeto window. A excepci贸n de cuando estamos en strict mode que nos regresar谩 undefined.
  • Cuando llamamos a this desde una funci贸n que est谩 contenida en un objeto, this se hace referencia a ese objeto.
  • Cuando llamamos a this desde una 鈥渃lase鈥, se hace referencia a la instancia generada por el constructor.

Aportes 169

Preguntas 26

Ordenar por:

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

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 鈥淵ou don鈥檛 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, 鈥淓n 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鈥ero 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 鈥渁tar鈥 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 鈥榰se 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 鈥榥ew鈥.

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.

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 鈥渘ame鈥 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: 鈥楨mma鈥,
    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 鈥渃lase鈥, se hace referencia a la instancia generada por el constructor.
  • No se hace referencia al objeto prototipal (鈥渓a 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]]


<h6>THIS en Global Scope:</h6>

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]

<h6>THIS en Scope de una funcion:</h6>

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]

<h6>THIS en Scope de una funcion en strict mode:</h6>

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

<h6>THIS en el contexto de un objeto:</h6>

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
<h6>THIS cuando sacamos una funci贸n de un objeto:</h6>

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 

<h6>THIS en el contexto de una clase:</h6>

[[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?

鈥淭his鈥, 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 鈥渃lase鈥, 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
鈥榮trict 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, 鈥渁fuerita鈥

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:

<h3>this en el contexto global</h3>

En el contexto global, this hace referencia directamente al window

console.log(this) // window
<h3>this en el contexto de una funci贸n</h3>

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
<h3>this en el contexto de un objeto</h3>

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()
<h3>this en el contexto de una clase</h3>

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.

<h4>Global scope</h4>

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.

<h4>Objeto (scope de un objeto)</h4>
// 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()
<h4>this en una clase</h4>

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 鈥渦se strict鈥; por esta raz贸n al profesor le sale undefined.