What is the best way to retrieve the specific property from a bound function?

Question

What is the best way to retrieve the specific property from a bound function?

I'm looking to retrieve the value of a specific property from a function that has already been bound.

function foo(){
  console.log(this.a)
}
const bar = foo.bind({a:1})
bar() // Outputs 1
bar.getThis() // expected result is { a: 1 }

Given the code snippet above, what would be the proper way to extract the bound object { a: 1 } from the variable bar?

javascript this

Answer 1

Answer №1

To achieve this, a method to extend the built-in `bind` functionality is by modifying it as shown in the code snippet below.

Function.prototype.__bind__ = Function.prototype.bind;

Function.prototype.bind = function(object) {
  var fn = this.__bind__(object);
  fn.getThis = function () {
   return object;
  }
  return fn;
}

function example(){
  return this.value
}
var output = example.bind({value:1})
console.log(output());
console.log(output.getThis())

Answer 2

To achieve this, a method to extend the built-in `bind` functionality is by modifying it as shown in the code snippet below.

Function.prototype.__bind__ = Function.prototype.bind;

Function.prototype.bind = function(object) {
  var fn = this.__bind__(object);
  fn.getThis = function () {
   return object;
  }
  return fn;
}

function example(){
  return this.value
}
var output = example.bind({value:1})
console.log(output());
console.log(output.getThis())

Answer 3

Answer №2

Accessing [[BoundThis]] is restricted as it is considered an internal property of bound function objects.

However, you can still view it in the console:

https://i.stack.imgur.com/FHydr.png

The pre-bound this value of a function Object is created using the native built-in Function.prototype.bind method. Only ECMAScript objects created through Function.prototype.bind have a [[BoundThis]] internal property.

According to Bergi, "to utilize it within your program logic, you would need to implement your own version of bind that reveals this value as a property".

Although, if modifications can be made to the foo() function, you could try something like this:

function foo() {
  console.log(this.a);

  return {
    getThis: () => this
  };
}
const bar = foo.bind({ a: 1 });

console.log(bar().getThis()) // { "a": 1 }

Answer 4

Accessing [[BoundThis]] is restricted as it is considered an internal property of bound function objects.

However, you can still view it in the console:

https://i.stack.imgur.com/FHydr.png

The pre-bound this value of a function Object is created using the native built-in Function.prototype.bind method. Only ECMAScript objects created through Function.prototype.bind have a [[BoundThis]] internal property.

According to Bergi, "to utilize it within your program logic, you would need to implement your own version of bind that reveals this value as a property".

Although, if modifications can be made to the foo() function, you could try something like this:

function foo() {
  console.log(this.a);

  return {
    getThis: () => this
  };
}
const bar = foo.bind({ a: 1 });

console.log(bar().getThis()) // { "a": 1 }

Answer 5

Answer №3

In order to retrieve the enclosed object { a: 1 }, you can simply return or display this:

function example() {
  console.log(this);
}

const sample = example.bind({ a: 1 });

sample(); // { a: 1 }

I trust this explanation proves beneficial.

Answer 6

In order to retrieve the enclosed object { a: 1 }, you can simply return or display this:

function example() {
  console.log(this);
}

const sample = example.bind({ a: 1 });

sample(); // { a: 1 }

I trust this explanation proves beneficial.

What is the best way to retrieve the specific property from a bound function?

Answer №1

Answer №2

Answer №3

Similar questions

Filter error - Unable to retrieve property 'toLowerCase' from null value

Can you explain how differential inheritance works in JavaScript?

jQuery function duplicates row in table

What is the method for including a data attribute in the text of a cell using Datatables Editor?

Offspring of div should have equal height without the top and bottom padding

Vue's span function is yielding the promise object

Load information into array for jqGrid display

Custom label slots in q-file for the Quasar file picker for personalized file selection label

The jQuery window.on event is not functioning when trying to handle the same hash change

The AngularJS $rootscope $destroy event is not being triggered, resulting in timeouts not being cancelled

The submission of an Angular form results in errors such as being unavailable or

What is the process for reporting a security vulnerability in an npm package if you are the maintainer and publisher?

Adjust Mui Autocomplete value selection in real-time

An operator in rxjs that transforms an Observable of lists containing type X into an Observable of type X

Utilize Javascript to conceal images

Conceal the input field prior to making a selection from the dropdown menu

Unusual marker appearing on every page utilizing ionic v1 and angularjs

How to use mousedown event in Three.js to create line drawings

Sending an array object from Ajax to Django Framework

When trying to set up Plaiceholder in a Next.js/Webpack 5 environment, you may encounter the following issue: "Error: Module not found - Can't resolve 'child_process