• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

154
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!

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error