2

After many hours looking for a explanation and failing, I am asking it here.

All code here are examples made from what I was working on.

First Approach

Simple object:

let obj = {
    fun: window.getComputedStyle,
    ele: $('#myDiv')[0]
};

When trying the following function call:

obj.fun(obj.ele);

Gives the following error:

Uncaught TypeError: 'getComputedStyle' called on an object that does not implement interface Window.

I am using jQuery to retrieve the JS element, but using document.getElementById would produce the same result.

Second Approach

I did search for a while about different types of objects, and found this style:

let obj = {
    fun: function() {return window.getComputedStyle},
    ele: $('#myDiv')[0]
};

But this type needs to be called differently:

obj.fun()(obj.ele);

This approach works correctly.

Question

Obviously the expanded version of the code works as intended:

window.getComputedStyle($('#myDiv')[0]);

The above code returns the full object correctly.

So my questions are:

  • Why is the first approach (which makes more sense to me) fails?
  • Is there a way to fix the first approach, so I can use the first type of function call?
  • Is this type of function wrapping not supposed to be done?

Thank you!

zeroTAG
  • 65
  • 8
  • Why do you mix jQuery and JavaScript? -> [`$.css()`](https://api.jquery.com/css/) – Andreas Mar 17 '22 at 10:49
  • 2
    There should be a better dupe, but it's the same problem/topic: [How to access the correct `this` inside a callback](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Andreas Mar 17 '22 at 10:52
  • @Andreas the jQuery is irrelevant, the question is about why is my object not calling it how I would think it would. `$.css()` would work, but if I didn't have jQuery why is my approach not working. – zeroTAG Mar 17 '22 at 10:52
  • 1
    _"the jQuery is irrelevant"_ - Then don't mix it in your question or you will get comments like mine that tell you other solutions to get the desired output ;) – Andreas Mar 17 '22 at 10:53
  • @Andreas You are right, I tried making the code smaller from I what I had. I'll be more careful next time. Also I'll read the linked topic to understand why this happened. – zeroTAG Mar 17 '22 at 11:02
  • 1
    When you use `obj.fun()` you are calling `getComputedStyle` with a _this_ value of `obj`, and not `window` (as you would when you call it on the window object `window.getComputedStyle()`). You should be able to bind the `this` though: `fun: window.getComputedStyle.bind(window)` – Nick Parsons Mar 17 '22 at 11:06

1 Answers1

3

When you call the obj.fun()-method you are calling getComputedStyle with the scope obj (this value) and not with the global scope (this/window/globalThis).

There are several way to fix this particular behaviour:

First soution

You can make use of a function, such as arrow functions and define fun-property as following:

fun: (e) => window.getComputedStyle(e)

See a working snippet below:

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>

Second soution

You can make use of Function.prototype.bind to access the correct context on function invokation using this code:

fun: window.getComputedStyle.bind(this)

See a working snippet:

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>
stacj
  • 1,103
  • 1
  • 7
  • 20
  • Thank you, I used the first solution, but one additional question, why is the problem context? Is `this` being used inside the function I'm trying to call? – zeroTAG Mar 17 '22 at 11:12
  • _"You can make use of arrow functions..."_ - This option is not a arrow-function-only thing. It would also work with a regular `function`. – Andreas Mar 17 '22 at 11:13
  • 1
    @zeroTAG Yes, because that's what the error message tells us: _"...**called on an object** that does not implement interface Window"_ - The only available reference to the calling object (without it being passed as argument or via a global reference) is `this` – Andreas Mar 17 '22 at 11:16
  • @Andreas Right, I see. So as a rule of thumb if I make references to functions like that, I should use an arrow function so `this` is properly bound? Even if `this` is not used? Or is that overkill? – zeroTAG Mar 17 '22 at 11:20
  • @zeroTAG This totally depends on the called function. If it doesn't use `this` you don't need a defined `this`. _"I should use an arrow function"_ -> [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable). There are also other ways to solve this problem (the method/object offers a way to define the content of `this`, `.bind()`, `.call()`, `.apply()`, ...) -> [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – Andreas Mar 17 '22 at 11:25
  • @Andreas Yes sorry, I meant, not necessarily arrow function, but the binding code. I'll check it out the resources linked. Thank you! – zeroTAG Mar 17 '22 at 11:28