⊗jsOpAdCL 41 of 60 menu

Pérdida de contexto en POO en JavaScript

Al trabajar con clases puede perderse el contexto y this apuntará no al objeto de la clase, sino a otra cosa. Veamos cómo puede suceder esto y qué hacer al respecto.

Supongamos que tenemos una clase User, que contiene el nombre del usuario y un array de ciudades en las que este usuario ha estado:

class User { constructor(name, cities) { this.name = name; this.cities = cities; } }

Supongamos que hay un método que muestra las ciudades:

class User { constructor(name, cities) { this.name = name; this.cities = cities; } showCities() { this.cities.forEach(function(city) { console.log(city); }); } }

Supongamos que en este método decidimos usar algún método auxiliar de la clase. En este caso el contexto se perderá:

class User { constructor(name, cities) { this.name = name; this.cities = cities; } showCities() { this.cities.forEach(function(city) { console.log(this.#cape(city)); // el contexto se perdió }); } #cape(str) { return str[0].toUpperCase() + str.slice(1); } }

Se puede solucionar el problema, por ejemplo, usando una función flecha:

class User { constructor(name, cities) { this.name = name; this.cities = cities; } showCities() { this.cities.forEach(city => { console.log(this.#cape(city)); }); } #cape(str) { return str[0].toUpperCase() + str.slice(1); } }

Corrija el error cometido en el siguiente código:

class Employee { constructor(name, salary, coeffs) { this.name = name; this.salary = salary; this.coeffs = coeffs; } getTotal() { return this.coeffs.reduce(function(res, coeff) { return res + this.salary * coeff; }, 0); } } let employee = new Employee('john', 1000, [1.1, 1.2, 1.3]); let total = employee.getTotal(); console.log(total);
Español
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.
aceptar todas configurar rechazar