¿Por qué se crea este objeto en función de una clase que devuelve indefinida? ¿No debería devolver el 'rojo'?
this.name='red' // global.name class foo { constructor(name){ this.name= name return function (){ console.log(this.name); // new object is gonna return only this } } } let oof = new foo ('green'); console.log(oof) //name is not defined. Expected to return 'red' (global) oof(); //cannot read the property function color () { console.log(this.name); } color(); //red¡Gracias!
Edit1 : Escribí mal el oof . Corregido ahora.
Edit2 : Entonces, muchachos, sé que un constructor generalmente no acepta una devolución (no tendría sentido) y que this palabra clave se refiere al objeto que se va a crear. La cosa aquí es que estaba tratando de probar los límites de this . En una función normal, this.name devolvería 'red' como se llama en el ámbito global. ¿Por qué no funciona en este caso? porque es una función creada por una clase?
Edit3 : para que quede claro, agregué otra función color , que se supone que es la misma que oof (ambas son funciones y se llaman en la ventana) pero haciendo referencia a globalThis (rojo). La única diferencia es la forma en que están construidos.
Están sucediendo dos cosas aquí: primero, no puede devolver esa función desde el constructor, es posible que desee establecerla como una propiedad:
this.name='red' // global.name class foo { constructor(name){ this.name= name this.sayName = function (){ console.log(this.name); // } } } let oof = new foo ('green'); oof.sayName()Nota: en las clases, generalmente agregamos funciones como métodos, no directamente como una propiedad como acabo de hacer.
El segundo problema es el alcance, está vinculando la propiedad de nombre al objeto instanciado, por lo que no cambiará directamente global.name, sino 'this.name' => oof.name en su lugar.
Recuerde : cuando se trata de clases, 'esto' siempre se referirá al objeto de instancia.
Esta referencia no es lo que espera en su código. La regla general es: "dentro del contexto de una función, esto toma el valor del objeto que efectivamente invoca esa función".
Cuando hace oof() no hay ningún objeto que lo invoque, a pesar de que hubiera esperado que el alcance global se hubiera pasado a oof , ese no es el caso.
Si desea que su código funcione como tiene su función definida, puede probar ({name:'surprise', oof}).oof() . Aquí ve que hay un objeto con un nombre de atributo que invoca su función y ese es el objeto al que se refiere dentro de oof .
Para obtener más información sobre cómo funciona esto , puede consultar los documentos de MDN sobre esto .
Ok, después de 3 días de dolor de cabeza y gracias a las respuestas, creo que obtuve la solución:
use strict siempre está habilitado. Más en: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#strict_mode_for_classesthis ya no se referirá al objeto global (haciendo que sea más seguro escribir su código) Más en: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Modo_estricto#asegurar_javascriptthis correctamente. Ejemplo: this.name='red' // global.name function color(){ 'use strict' console.log(this.name); } class Color { constructor(){ return function (){ console.log(this.name) } } } let foo= new Color(); let newObj= {name: 'blue',foo,color} newObj.color(); //blue newObj.foo(); // blue