Unable to access Function.prototype.call directly

Question

Unable to access Function.prototype.call directly

function testFunc(b) { return b }

testFunc(2) // => 2

testFunc.call(null, 2) // => 2

Function.prototype.call(testFunc, null, 2) // => undefined

Curious why the final line returns undefined, aren't they supposed to be equivalent?

javascript

Answer 1

Answer №1

In these instances, the results will be consistent:

function f(a) { return a}

console.log(f(1)); // => 1

console.log(f.call(null, 1)); // => 1

console.log(Function.prototype.call.call(f, null, 1)); // => 1

It's important to note the added usage of.call in the final statement.

Now, let's delve into the rationale behind it:

Function.prototype.call

As per the specification, Function.prototype.call executes an abstract operation Call(func, thisArg, argList).

Therefore, f.call(null, 1) triggers the abstract operation Call(f, null, 1), with f representing the function being executed, null as the calling context, and 1 as the argument passed to f. This leads to the anticipated output.

Based on this logic, applying

Function.prototype.call(f, null, 1)

would yield the abstract operation Call(Function.prototype, f, null, 1), where Function.prototype is the invoked function, f acts as the context, and null and 1 serve as arguments for Function.prototype. Obviously, this won't work as intended.

Function.prototype.call.call

However, by employing

Function.prototype.call.call(f, null, 1)

, you invoke the abstract call operation Call(Function.prototype.call, f, null, 1). In this case, Function.prototype.call serves as the target function, f takes on the role of the calling context, while null and 1 are provided as arguments. Consequently, the outcome mirrors that of: f.call(null, 1).

Answer 2

In these instances, the results will be consistent:

function f(a) { return a}

console.log(f(1)); // => 1

console.log(f.call(null, 1)); // => 1

console.log(Function.prototype.call.call(f, null, 1)); // => 1

It's important to note the added usage of.call in the final statement.

Now, let's delve into the rationale behind it:

Function.prototype.call

As per the specification, Function.prototype.call executes an abstract operation Call(func, thisArg, argList).

Therefore, f.call(null, 1) triggers the abstract operation Call(f, null, 1), with f representing the function being executed, null as the calling context, and 1 as the argument passed to f. This leads to the anticipated output.

Based on this logic, applying

Function.prototype.call(f, null, 1)

would yield the abstract operation Call(Function.prototype, f, null, 1), where Function.prototype is the invoked function, f acts as the context, and null and 1 serve as arguments for Function.prototype. Obviously, this won't work as intended.

Function.prototype.call.call

However, by employing

Function.prototype.call.call(f, null, 1)

, you invoke the abstract call operation Call(Function.prototype.call, f, null, 1). In this case, Function.prototype.call serves as the target function, f takes on the role of the calling context, while null and 1 are provided as arguments. Consequently, the outcome mirrors that of: f.call(null, 1).

Answer 3

Answer №2

Let's dive into the following example:

function fn() { console.log(this); }
fn.a = function(){console.log(this)}
fn.a() // function fn() { console.log(this); }

Now, let's explore creating a custom call function:

  Function.prototype.customCall = function () {
    let arr = Array.prototype.slice.call(arguments, 1);
    this.apply(arguments[0], arr);
  }

  function a(ar){ console.log(ar + this.name) };
  let obj = {name : "thierry"};
 // a.customCall( obj, 'hi ')

Function.customCall.customCall(a, obj, 'hi ');

When we execute

Function.prototype.customCall.customCall(a, obj, 'hi ')

Initially, on the first run we have:

arr = [ obj, 'hi ']

this = Function.customCall

resulting in

Function.customCall.apply(a, [ obj, 'hi ']);

Then, on the second run:

arr = ['hi']

this = a

leading to a.apply(obj, ['hi']), equivalent to a.call(obj, 'hi');

If we were to use

Function.customCall(a, obj, 'hi ');

, the initial run would result in this = Function which will not work and throw an error or return undefined. This can be handled with a try-catch.

  Function.prototype.customCall = function () {
    let arr = Array.prototype.slice.call(arguments, 1);
    try{
       return this.apply(arguments[0], arr);
    }catch(e){}
  }

  function a(ar){ return ar + this.name };
  let obj = {name : "thierry"};
  console.log(Function.customCall(a, obj, 'hi ')); // undefined

  console.log(Function.customCall.customCall(a, obj, 'hi ')); // hi thierry

Answer 4

Let's dive into the following example:

function fn() { console.log(this); }
fn.a = function(){console.log(this)}
fn.a() // function fn() { console.log(this); }

Now, let's explore creating a custom call function:

  Function.prototype.customCall = function () {
    let arr = Array.prototype.slice.call(arguments, 1);
    this.apply(arguments[0], arr);
  }

  function a(ar){ console.log(ar + this.name) };
  let obj = {name : "thierry"};
 // a.customCall( obj, 'hi ')

Function.customCall.customCall(a, obj, 'hi ');

When we execute

Function.prototype.customCall.customCall(a, obj, 'hi ')

Initially, on the first run we have:

arr = [ obj, 'hi ']

this = Function.customCall

resulting in

Function.customCall.apply(a, [ obj, 'hi ']);

Then, on the second run:

arr = ['hi']

this = a

leading to a.apply(obj, ['hi']), equivalent to a.call(obj, 'hi');

If we were to use

Function.customCall(a, obj, 'hi ');

, the initial run would result in this = Function which will not work and throw an error or return undefined. This can be handled with a try-catch.

  Function.prototype.customCall = function () {
    let arr = Array.prototype.slice.call(arguments, 1);
    try{
       return this.apply(arguments[0], arr);
    }catch(e){}
  }

  function a(ar){ return ar + this.name };
  let obj = {name : "thierry"};
  console.log(Function.customCall(a, obj, 'hi ')); // undefined

  console.log(Function.customCall.customCall(a, obj, 'hi ')); // hi thierry

Unable to access Function.prototype.call directly

Answer №1

Function.prototype.call

Function.prototype.call.call

Answer №2

Similar questions

Automatic Incremental Counter

"Centered in the middle of the screen, an animated

`How to prevent other events from triggering in jQuery while an animation is running`

Ability to utilize an alternative attribute type within a TypeScript object

Hierarchical Navigation Panels

Unable to generate onsen-ui popover

Is there a way to identify which specific item in a watched array has been altered in VueJS?

Retrieve the appended element's object

Error message: "The variable _ is not defined when trying to use angular-google-maps library"

Tips for modifying style.display using JavaScript

Encountered an error: The function run is not supported for the current bot command

Tips for delivering a heartfelt message when a user adds an item

There are no markers or popups currently displayed on the map

What is the method used by three.js to render video with spherical UV mapping?

Here's how to use the useState hook directly in your React components without

Unable to get Discord.js sample code functioning correctly

Preventing Unauthorized Access: Redirecting to Login Page in Vue.js

Is it possible to create a webpage where the header and footer remain static, while the content in the body can be dynamically changed

Retrieving the value of a duplicated button in AngularJS

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?