La palabra clave this hace referencia al valor del objeto que está vinculado al
en el momento de la llamada, lo que significa que su valor es diferente según
de si una función se llama como método, como función independiente o como
constructor.
Cuando se llama a una función, se crea una instancia de la palabra clave this detrás
escenas como una referencia al objeto que contiene esa función, lo que le da
acceso a las propiedades y los métodos definidos junto con él desde su alcance.
En algunos casos, trabajar con this es similar a trabajar con una variable declarada
con const. Al igual que una constante, this no se puede quitar y su valor no se puede
pero los métodos y las propiedades del objeto al que la palabra clave this
que contiene pueden modificarse.
Vinculación global
Fuera de una función o del contexto de un objeto, this se refiere al
propiedad globalThis, que es una referencia al objeto global en la mayoría
entornos de JavaScript. En el contexto de una secuencia de comandos que se ejecuta en un navegador web,
El objeto global es el objeto window:
this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}
En Node.js, globalThis es el objeto global:
$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}
Fuera del modo estricto, this también hace referencia al objeto global dentro de un
función, porque el elemento superior Window es el objeto que efectivamente "es propietario"
esas funciones.
function myFunction() {
console.log( this );
}
myFunction();
> Window {...}
(function() {
console.log( this );
}());
> Window {...}
Cuando se usa el modo estricto, this tiene un valor de undefined dentro de un
función:
(function() {
"use strict";
console.log( this );
}());
> undefined
Antes de la introducción del modo estricto, se agregó un valor null o undefined para this.
se reemplazaría por una referencia al objeto global. Es posible que a veces veas
vinculación global conocida como “vinculación predeterminada” debido a este comportamiento heredado.
Vinculación implícita
Cuando se llama a una función como método de un objeto, se crea una instancia de this dentro
ese método se refiere al objeto que contiene el método, lo que da acceso al
y las propiedades asociadas:
let myObject = {
myValue: "This is my string.",
myMethod() {
console.log( this.myValue );
}
};
myObject.myMethod();
> "This is my string."
Puede parecer que el valor de this depende de cómo una función y su
del objeto que los contiene. En cambio, el contexto para el valor de this es
el contexto de ejecución actual. En este caso, el contexto de ejecución es que el
El objeto myObject llama al método myMethod, por lo que myObject es el valor.
para this. Esto puede parecer un tecnicismo en el contexto de la
ejemplos, pero para usos más avanzados de this, es una distinción esencial
tener en cuenta.
En general, usa this de maneras que no esperen que el código que lo rodea tenga
una estructura en particular. La excepción a esta regla es ES5.
Funciones de flecha.
this en funciones de flecha
En las funciones de flecha,
this se resuelve en una vinculación en un
entorno de cierre léxico. Esto significa que
this en una función de flecha hace referencia al valor de this en la función de esa función
el contexto de cierre más cercano:
let myObject = {
myMethod() { console.log( this ); },
myArrowFunction: () => console.log( this ),
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
myObject.myArrowFunction();
> Window {...}
En el ejemplo anterior, myObject.myMethod() registra myObject como el objeto.
al que le pertenece ese método, pero myObject.myArrowFunction() muestra globalThis
(o undefined), ya que la instancia de this dentro de la función de flecha
se refiere, en cambio, al alcance envolvente más alto.
En el siguiente ejemplo, myEnclosingMethod crea una función de flecha en el
que lo contiene cuando se ejecuta. La instancia de this dentro del
flecha ahora hace referencia al valor de this dentro del
entorno, que es el método que contiene esa función flecha. Debido a que el
el valor de this dentro de myEnclosingMethod se refiere a myObject, después de que
define la función flecha, this dentro de la función flecha también hace referencia a
myObject:
let myObject = {
myMethod() { console.log( this ); },
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
Vinculación explícita
La vinculación implícita controla la mayoría de los casos de uso para trabajar con this. Sin embargo,
a veces puede necesitar el valor de this para representar una ejecución específica
contextual, en lugar del contexto supuesto. Es ilustrativo, aunque un poco desactualizado,
El ejemplo es trabajar con this en la función de devolución de llamada de un setTimeout.
ya que esta devolución de llamada tiene un contexto de ejecución único:
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
myObject.myMethod();
> "This is my string."
setTimeout( myObject.myMethod, 100 );
> undefined
Si bien desde entonces, esta deficiencia específica de setTimeout ya fue abordada por
otras funciones, problemas similares de "pérdida" this ya se solucionaron
creando una referencia explícita al valor de this dentro del alcance de la
el contexto previsto. En ocasiones, es posible que veas instancias de this asignadas.
a una variable con identificadores como that, self o _this en versiones heredadas
de código abierto. Estas son convenciones de identificador comunes para variables que contienen un
pasado el valor this.
Cuando llamas a una función con los métodos call(), bind() o apply(),
this hace referencia de forma explícita al objeto al que se llama:
let myFunction = function() {
console.log( this.myValue );
}
let myObject = {
"myValue" : "This is my string."
};
myFunction.call( myObject );
> "This is my string."
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."
La vinculación explícita anula el valor this proporcionado por la vinculación implícita.
let myObject = {
"myValue" : "This string sits alongside myMethod.",
myMethod() {
console.log( this.myValue );
}
};
let myOtherObject = {
"myValue" : "This is a string in another object entirely.",
};
myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."
Si se llama a una función de una manera que establezca el valor de this en
undefined o null; ese valor se reemplaza por globalThis fuera de estricto
modo:
let myFunction = function() {
console.log( this );
}
myFunction.call( null );
> Window {...}
Del mismo modo, si se llama a una función de una manera que daría a this un valor
, ese valor se sustituye por el
objeto wrapper del valor primitivo
Fuera del modo estricto:
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> Number { 10 }
En el modo estricto, un valor this pasado no se coerciona a un objeto de ninguna manera.
incluso si es un valor primitivo, null o undefined:
"use strict";
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> 10
myFunction.call( null );
> null
Vinculación de new
Cuando se usa una clase como constructor con el
La palabra clave new, this hace referencia a la instancia recién creada:
class MyClass {
myString;
constructor() {
this.myString = "My string.";
}
logThis() {
console.log( this );
}
}
const thisClass = new MyClass();
thisClass.logThis();
> Object { myString: "My string." }
De manera similar, el valor de this dentro de una función de constructor a la que se llama con new
se refiere al objeto que se crea:
function MyFunction() {
this.myString = "My string.";
this.logThis = function() {
console.log( this );
}
}
const myObject = new MyFunction();
myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }
Vinculación del controlador de eventos
En el contexto de los controladores de eventos, el valor de this hace referencia al objeto que
lo invoca. Dentro de la función de devolución de llamada de un controlador de eventos, significa this.
hace referencia al elemento asociado con el controlador:
let button = document.querySelector( "button" );
button.addEventListener( "click", function( event ) { console.log( this ); } );
Cuando un usuario interactúa con button en el fragmento anterior, el resultado
el objeto del elemento que contiene el mismo <button>:
> Button {}
Cuando se usa una función de flecha como devolución de llamada de objeto de escucha de eventos, el valor del
De nuevo, el contexto de ejecución envolvente más cercano proporciona this. En la parte superior
esto significa que this dentro de una función de devolución de llamada del controlador de eventos es
globalThis (o undefined, en modo estricto):
let button = document.querySelector( "button" );
button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined
Al igual que con cualquier otro objeto, cuando usas call(), bind() o apply()
métodos para hacer referencia a la función de devolución de llamada de un objeto de escucha de eventos, this
hace referencia al objeto de manera explícita:
let button = document.querySelector( "button" );
let myObject = {
"myValue" : true
};
function handleClick() {
console.log( this );
}
button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }
Verifica tus conocimientos
¿Cuál es el objeto global de una secuencia de comandos que se ejecuta en un navegador web?
a la que hace referencia this cuando se usa fuera de una función o
el contexto de un objeto?
windowbrowserundefined