First soution

Question

0

52

Views

How to correctly wrap and call a function in an object

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!

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-03T09:48:44.243Z

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>