Después de muchas horas buscando una explicación y fallando, lo pregunto aquí.
Todo el código aquí son ejemplos hechos de lo que estaba trabajando.
objeto sencillo:
let obj = { fun: window.getComputedStyle, ele: $('#myDiv')[0] };Al intentar la siguiente llamada de función:
obj.fun(obj.ele);Da el siguiente error:
Uncaught TypeError: 'getComputedStyle' called on an object that does not implement interface Window. Estoy usando jQuery para recuperar el elemento JS, pero usar document.getElementById produciría el mismo resultado.
Busqué durante un tiempo sobre diferentes tipos de objetos y encontré este estilo:
let obj = { fun: function() {return window.getComputedStyle}, ele: $('#myDiv')[0] };Pero este tipo debe llamarse de otra manera:
obj.fun()(obj.ele);Este enfoque funciona correctamente.
Obviamente, la versión ampliada del código funciona según lo previsto:
window.getComputedStyle($('#myDiv')[0]);El código anterior devuelve el objeto completo correctamente.
Entonces mis preguntas son:
¡Gracias!
Cuando llama al método obj.fun() , está llamando a getComputedStyle con el alcance obj (this value) y no con el alcance global (this/window/globalThis).
Hay varias formas de corregir este comportamiento particular:
Puede hacer uso de una función, como las funciones de flecha y definir fun-property siguiente manera:
fun: (e) => window.getComputedStyle(e)Vea un fragmento de trabajo a continuación:
let obj = { fun: (e) => window.getComputedStyle(e), ele: $('#myDiv')[0] }; console.log(obj.fun(obj.ele)); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myDiv"></div>Puede hacer uso de Function.prototype.bind para acceder al contexto correcto en la invocación de la función usando este código:
fun: window.getComputedStyle.bind(this)Ver un fragmento de trabajo:
let obj = { fun: window.getComputedStyle.bind(this), ele: $('#myDiv')[0] }; console.log(obj.fun(obj.ele)); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myDiv"></div>