¿Qué es This en JavaScript?

En general, el concepto de this, se aplica a una referencencia a una instancia real de la clase en la que aparece, esta referencia esta disponible en muchos lenguajes de programación, pero en el caso de javascript tiene algunas casuísticas. más specifices.

Por regla general this es una referencerencia que se crea cuando una función que es invocada, y su valordepende de el lugar en el cual esta invocación se realice.

암비토 글로벌

Si esta invocación no es llamada desde una función, this siempre hace reference reference al objeto window

console.log(this);

Window {window: Window, self: Window, …}

기능

En el caso de las funciones, el valor de this,dependerá exclusivamente de el lugar en el cual esta es invocada.

por Defecto, dentro de una función, this hace reference reference al objeto global window

function test(){
  console.log(this);
}

test();

Window {window: Window, self: Window, …}

Nuestro escenario cambia totalmente si usamos "use strict"

"use strict"

function test(){
  console.log(this);
}

test();

undefined

El uso estricto nos ayuda a no modificar el ámbito global 우연한 사고, por ejemplo:

function Cuadrado(ancho, alto) {
    this.ancho = 100;
    this.alto = 200;
}

const cuadrado = Cuadrado(50,60);
console.log(cuadrado); 

undefined

페로 시 베모스 엘 발로 드 라스 변수 덴트로 델 오브제토 창

console.log(window.ancho,window.alto)

100,200

para prevenir esto, se necesita el uso de "엄격한 사용"

"use strict"
function Cuadrado(ancho, alto) {
    this.ancho = 100;
    this.alto = 200;
}

const cuadrado = Cuadrado(50,60);
console.log(cuadrado); 

Uncaught TypeError: Cannot set property 'ancho' of undefined 

no permitiendo modificar el valor de this en su ámbito local

En cambio, si agregamos a la declaración la palabra new, Generamos una nueva instancia de this

"use strict"
function Cuadrado(ancho, alto) {
    this.ancho = 100;
    this.alto = 200;
}

const cuadrado = new Cuadrado(50,60);
console.log(cuadrado); 

Object {
  alto: 200,
  ancho: 100
}

생성자 델 오브제토와 함께 실현할 수 있는 아호라 명령

"use strict"
function Cuadrado(ancho, alto) {
    this.ancho = ancho;
    this.alto = alto;
    console.log (this);
}

const cuadrado = new Cuadrado(50,60);

Object {
  alto: 60,
  ancho: 50
}

메토도스

Cuando llamamos a un metodo de una función, this se asocia al objeto que contiene dicho método

const cuadrado = {
    ancho: 100,
    alto: 200,
    info() {
        console.log('Soy un cuadrado de',this.ancho, 'x',this.alto);
        console.log(this);
    }
};
cuadrado.info();

Soy un cuadrado de 100 x 200
Object {ancho: 100, alto: 200, info: ƒ...}

Ahora todo cambiaría, si asignamos el metodo a una declaración de función

const cuadrado = {
    ancho: 100,
    alto: 200,
    info() {
        console.log('Soy un cuadrado de',this.ancho, 'x',this.alto);
        console.log(this);
    }
};
let mostrarInfo = cuadrado.info;
mostrarInfo();

Soy un cuadrado de undefined x undefined
Window {window: Window, self: Window, …}

Acá perdemos el contexto de this, ya que la llamada ocurre bajo el ámbito global

화살표 함수

Al momento de crear un arrow function, el valor de this quedará asociado al valor de this de su ámbito externo

const test = () => {
    console.log(this);
};
test(); 

Window {window: Window, self: Window, …}

Antes de usar arrow functions, para poder manejar los valores del ámbito global dentro de metodos, debíamos usar un "hack"que era copiar el valor de this a otra variable

const cuadrado = {
  ancho: 100,
  agrandar() {
    const _this = this;
    setInterval(function () {
      console.log(++_this.ancho);
    }, 1000);
  }
};
cuadrado.agrandar();

Solucionar esto con el uso de arrow function es mucho más limpio

const cuadrado = {
  ancho: 100,
  agrandar() {
    setInterval(() => {
      console.log(++this.ancho);
    }, 1000);
  }
};
cuadrado.agrandar();

묶다

Existen adicionalmente, metodos que nos permiten modificar la referencencia a donde apunta this

Veamos este ejemplo

const cuadrado = {
  ancho: 200,
  alto: 100,
  showDimensions: function() {
    return this.ancho + ' x ' + this.alto;
  }
}

const print = function() {
  console.log(this.showDimensions());
}

print();

Uncaught TypeError: this.showDimensions is not a function

this en la función print apunta a la referenced del objeto en el ámbito global, ergo no tiene acceso a showDimensions

En caso que necesitemos acceder al scope de cuadrado desde print necesitamos usar el metodo bind()

const printBinded = print.bind(cuadrado);
printBinded();

De esta forma, le estamos diciendo que el valor de this en print, debe ser la referencencia al de cuadrado

부르다

La diferencia con Bind, es que este metodo, si ejecuta la función, igual que (), con la diferencia que Call tiene como parametro la reference de this en la función que se ejecuta.

const printBinded = print.bind(cuadrado);
printBinded();

Con este obtendremos el mismo resultado que con Bind, con la diferencia que la función no se copia, si no que se ejecuta.

적용하다

La diferencia entre Call y Apply, es tan solo la forma de envira los parametros, en el caso de apply esta orientado a recibir muchos parametros, en forma de array

print.apply(cuadrado, ['100', '200']);

차용

Un prestamo de función es cuando compartimos la función de un objeto, pero con distintos parametros

const cuadrado = {
  ancho: 100,
  alto: 200,
  showDimensions: function() {
    return this.ancho + ' x ' + this.alto;
  }
}

const rectangulo = {
  ancho: 500,
  alto: 200
}

const result = cuadrado.showDimensions.apply(rectangulo);
console.log(result); 

500 x 200

카레

El concepto decuring es básicamente crear una copia de una función pero con parametros por defecto

예:

function showDimensions(a, b) {
  return a + ' x ' + b;
}

const showDimensionsCopy = showDimensions.bind(this, 200);

console.log(showDimensionsCopy(100));

"200 x 100"

표지 사진 작성자@bradstallcup